axios
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue</title><script src="js/vue.js"></script><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="get请求" onclick="get()"><input type="button" value="post请求" onclick="post()">
</body><script>function get() {axios.get("").then(function (resp) {console.log(resp.data);})}function post() {}
</script>
</html>
Vue
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><input type="text" v-model="message">{{message}}<br><a v-bind:href="url">百度</a><a :href="url">百度</a><br><input type="button" value="点击" v-on:click="handle()"><input type="button" value="点击" @click="handle()"><br><div v-for="(item,index) in addrs">{{item}}:{{index}}</div></div><br><br><div id="test"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1">男</span><span v-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">优秀</span><span v-else-if="user.score >= 60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div>
</body><script>new Vue({el: "#app",data: {message: "Hello Vue!",url: "https://www.baidu.com",addrs:["https://www.baidu.com", "https://www.google.com"]},methods: {handle: function() {alert("Hello Vue!");}}}),new Vue({el: "#test",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {}})
</script>
</html>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = false
Vue.use(ElementUI);new Vue({router,render: h => h(App)
}).$mount('#app')
//App.vue
<template><div><!-- <nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><router-view/><router-view/> 是一个占位符，用于渲染匹配的路由组件。当用户访问 / 路径时，Home 组件将被渲染到 <router-view/> 中。当用户访问 /about 路径时，About 组件将被渲染到 <router-view/> 中。<router-link> 是用于导航的组件，点击时会改变 URL 并触发对应的路由。 --><!-- <h1>{{msg}}</h1> --><element-view></element-view></div>
</template><script>
import ElementView from './views/element/ElementView.vue'
export default {components: { ElementView },data () {return {msg : "Hello World"}},methods : {}
}
</script><style></style>
