1、v-model 多用于表单元素实现双向数据绑定
<input v-model="name" />
// name 需要再data中定义,需要接收v-model传递过来的参数
data() {
return {name:''}
}
2、v-bind 动态绑定
作用: 及时对页面的数据进行更改
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
data() {
return {url:'路径'}
}
v-bind:class 三种绑定方法
1、对象型 ‘{red:isred}’
2、三元型 ‘isred?“red”:“blue”’
3、 数组型’[{red:“isred”},{blue:“isblue”}]’
v-bind和v-model的区别
v-bind是一个单向数据绑定,映射关系:Model->View,我们不需要进行额外的DOM操作,只需要进行Model的操作就可以实现视图的联动更新。
v-model是一个双向数据绑定,映射关系:View接受的数据,传给model,model的数据再传给view。把Model绑定到View的同时也将View绑定到Model上,这样就既可以通过更新Model来实现View的自动更新,也可以通过更新View来实现Model数据的更新。所以,当我们用JavaScript代码更新Model时,View就会自动更新,反之,如果用户更新了View,Model的数据也自动被更新了。
3、v-for 动态渲染
格式:v-for=“字段名 in(of) 数组 json” 循环数组或 json, 需要注意从 vue2 开始取消了$index
list 数组数据
<ul>
<li v-for="item in list" :key="item.id" v-html="item.name" />
</ul>
data
data() {
return {
list: [
{id: 1,name: '小明'},
{id: 2,name: '小红'},
{id: 3,name: '小绿'},
]
}
}
v-for里的:key
- 在写v-for的时候,都需要给元素加上一个key属性
- key的主要作用就是来提高渲染性能的
- key的属性可以避免数据渲染混乱的情况出现(如果元素中包含了临时数据的元素,如果不用key就会产生数据混乱)
4、v-show 显示内容
<div v-show="bool">我就是一个盒子</div>
<div v-show="!bool">我就是两个盒子</div>
data() {
return {
bool: true // v-show 只会接收 布尔值(boolean)
}
}
5、v-if 显示与隐藏
<div id="app">
<h1 v-if='yes'>Yes!</h1>
<h1 v-if='no'>No!</h1>
</div>
<script>
export default {
data(){
return {
yes:true,
no:false,
}
}
}
</script>
v-else-if 必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误
<div id="app">
<h1 v-if='yes'>Yes!</h1>
<h1 v-else>No!</h1>
</div>
v-if和v-show的区别
1.手段:v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;
2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
3.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
4.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
6、v-on:click 给标签绑定函数
可以缩写为@,例如绑定一个点击函数 函数必须写在 methods 里面
<div class="app">
<!--正常写法-->
<button v-on:click="myclick">click me</button>
<!--简写-->
<button @click="myclick">click me</button>
</div>
<script>
methods: {
myclick() {
console.log('你点我了一下')
}
}
</script>
7、v-text和v-html、{{}} 解析文本
<div id="app">
<!--
注意:在指令中不要写插值语法 直接写对应的变量名称
在 v-text 中 赋值的时候不要在写 插值语法
一般属性中不加 {{}} 直接写 对应 的数据名
-->
<p v-text="msg"></p>
<p v-text="html"></p>
<p>
<!-- Vue 中只有在标签的 内容中 才用插值语法 -->
{{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js',
html: "<span>html标签在渲染的时候被解析</span>"
}
});
</script>
总结
v-text和{{}}表达式渲染数据,不解析标签。
v-html不仅可以渲染数据,而且可以解析标签。