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>