单向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 插值表达式-->
{{msg}}
<div v-bind:style="msg">单向绑定</div>
<div :style="msg">单向绑定</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg:'color:blue;'
}
})
</script>
</body>
</html>
双向绑定
<div id="app">
{{keyword}}
<br/>
<input type="text" :value="keyword"/>
<br/>
<input type="text" v-model="keyword"/>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
keyword:'尚硅谷'
}
})
</script>
事件绑定
<div id="app">
<button v-on:click="show()">事件绑定1</button>
<button @click="show()">事件绑定2</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
show() {
console.log("show.....")
}
}
})
</script>
条件指令
<div id="app">
<input type="checkbox" v-model="ok"/>
<br/>
<div v-if="ok">选中了</div>
<div v-else>没有选中</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok:false
}
})
</script>
循环遍历
<div id="app">
<div v-for="user in userList"> {{user.name}} -- {{user.age}} </div>
<div v-for="(user,index) in userList">
<!-- 带排序的遍历-->
{{index}} -- {{user.name}} -- {{user.age}}
</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[ {"name":"lucy","age":20},{"name":"mary","age":30}]
}
})
</script>
生命周期
<div id="app">
{{msg}}
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg:'hello'
},
created() { //在页面渲染之前执行
debugger<!-- 断点-->
console.log('created.....')
},
mounted() {//在页面渲染之后执行
debugger
console.log('mounted.....')
}
})
</script>
axios实例
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
2.4编写js
<div id="app">
<table>
<tr v-for="user in userList">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[]
},
created() { //在页面渲染之前执行
//调用方法,得到返回json数据
this.getList()
},
methods:{
getList() {
//使用axios方式ajax请求
axios.get("user.json")
.then(response => {//请求成功
//console.log(response)
this.userList = response.data.data.items
console.log(this.userList)
})
.catch(error => {
console.log(error)
}) //请求失败
}
}
})
</script>
同一包中的数据
{
"code":200,
"message":"成功"
,"data":{
"items":[
{"name":"lucy","age":20},
{"name":"mary","age":30},
{"name":"jack","age":40}
]
}
}