一、Vue语法结构
<script src="js/vue.js"><script>//获取vue.js文件进行引用
<script>
//每个Vue应用都需要通过实例化Vue来实现
new Vue({
//Vue构造器中需要有一个el参数来绑定DOM层的标签id
//el绑定元素可以是id,标签名,类名;html和body除外,一般绑定id
//可以绑定多个元素,但是不建议这么做
el:'#app' ,
//data用于定义属性,也指的是MVVM框架中的M(Model数据)
data:{
msg:'hello'
},
//methods用于定义函数(方法)
methods:{
add:function(){
函数体
}
}
)}
</script>
二、文本渲染指令
1.v-html:可以识别标签进行渲染
2.v-text:不能识别标签
使用v-text\v-html可以避免网速慢或者js出错的时候将{{}}渲染到页面中
三、属性绑定指令
v-bind:绑定标签属性,应用vue中的数据
缩写: :属性名='变量'
可以绑定title属性和vue实例,通常用来绑定class和style
书写方式:
单个变量时:v-bind:属性='变量'
多个变量时:v-bind:属性='[变量1,变量2]'
动态控制类名: v-bind:属性="{k:v,k:v}"k属性的值 v条件 v如果是true的时候,k的值存在。否则不存在
四、事件处理指令
v-on:绑定一个事件或者监听器,调用Vue中的方法
缩写:@事件名
书写方式:
v-on:事件名='方法()'
五、 条件渲染指令
v-if:条件渲染指令可以根据判断条件来设置元素的隐藏与显示
v-else:v-else元素必须放在v-if后面,否则他们不会被识别
v-else-if:通常放在v-if后,可以链式的使用多次
书写方式:
v-if='true\false'
v-else='true\false'
v-else-if='true\false'
v-show:切换元素的css属性(display:none)
书写方式:
v-show='true\false'
v-if和v-show两者之间的区别
1.v-if是将该属性的标签直接删除,而v-show是将标签的display属性来回切换
2.v-if只有在条件为true的时候才会渲染,条件为false时什么都不做
3.v-show不管条件为true还是false都会对页面进行渲染,适用于非常频繁的切换
六、遍历循环指令
v-for:将Vue实例中的数组或者对象进行循环,然后将数据渲染到页面上
注意:遍历数组和对象时两者方式有些不同
遍历对象属性:
<div id="app">
<p v-for="(value,key,index) in user">{{index}}:{{key}}:{{value}}</p>
<hr>
<p v-for="value in user">{{value}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
user:{
userId:1,
userName:'张三',
userSex:'男'
}
}
});
</script>
书写方式:
v-for="(value,key,index) in user"
//其中value为遍历得到的数据,key为遍历到的属性名,index为遍历的次序
key和index为可选参数,如果不需要可把指令写为v-for='value in user'
遍历数组元素
<div id="app">
<p v-for="(item,index) in userArr">
{{item.userId}},{{item.userName}},{{item.userSex}}
<button @click="operate(index)">操作</button>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
userArr: [{
userId: 1,
userName: '张三',
userSex: '男'
}, {
userId: 2,
userName: '李四',
userSex: '女'
}, {
userId: 3,
userName: '王五',
userSex: '男'
}]
},
methods:{
operate(index){
console.log(this.userArr[index]);
}
}
});
</script>
书写方式 :
v-for="(item,index) in userArr"
//item为遍历数组中得到的元素
//index为遍历数组中元素的下标
//userArr为数组名
其中index为可选参数,不需要时可将指令写成v-for="item in userArr"