vue.js学习基础语法（一）
2019-05-08 本文已影响0人
小岛wink
最近项目没有什么活，除了领导安排让学习小程序，组里还安排了学习下vue，我也跟着看了看视频，简单记录一下，也是新的知识总结了
1、挂载点
2、v-html和v-text区别
都能改变挂载点内部数据，区别是v-html不会转义，
3、事件绑定：
v-on:
也可以简写成@
4、属性绑定
v-bind，也可以用 冒号 简写代替
5 、双向属性绑定：
v-model
<input v-model="firstName"/>
6、计算属性：computed
侦听器：监听某个数据的变化， watch:
完整的demo如下；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VueÈëÃÅ</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<input v-model="firstName"/>
<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:'1',
lastName:'2',
count:'0'
},
computed:{
fullName:function(){
return this.firstName+' '+this.lastName
}
},
watch:{
fullName:function(){
this.count++;
}
}
})
</script>
</body>
</html>
7、v-if， v-show，v-for
例子中，v_if是把元素从dom中删除，而v-show是给元素添加了display=none的样式
<div id="root">
<div v-show="show">hello</div>
<button @click="changeShow">change</button>
</div>
<script>
new Vue({
el:"#root",
data:{
show:true
},
methods:{
changeShow:function(){
this.show= !this.show;
}
}
})
</script>
v-for是循环添加
<div id="root">
<div v-show="show">hello</div>
<button @click="changeShow">change</button>
<Ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show:true ,
list:[1,2,3]
},
methods:{
changeShow:function(){
this.show= !this.show;
}
}
})
</script>
