一、vue的基本指令
1.v-text和v-html
v-text 只能用在双标签中
v-text 其实就是给元素的innerText赋值
v-html 其实就是给元素的innerHTML赋值
2.v-if和v-show
v-if和v-show的区别:
v-if和v-show效果基本一致,但v-if是dom元素的添加或删除。
v-show是元素的显示或隐藏
如果遇有大量元素需要操作则优先选择v-show
可以提高浏览器的效率
如何使用:
v-if判断值是否为true,为true则保留dom元素
为false则删除dom元素
v-show是元素的显示或隐藏
3.v-for=“(item,index) in arr”
当在组件中使用 v-for 时,key 现在是必须的是为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性
循环数组
具有两个参数item(每一项的值),index(每一项的下标)
循环对象
v-for="(val, key, i) in list"
值是:val ----- 键:key ----- 索引:i
4.v-on
处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
普通使用 v-on:事件名=“表达式||函数名”
简写方式 @事件名=“表达式”
5.v-model
双向数据流(绑定)
页面改变影响内存(js)
内存(js)改变影响页面
v-bind 和 v-model 的区别?
v-model: 其的改变影响其他 v-bind: 其的改变不影响其他
v-bind就是对属性的简单赋值,当内存中值改变,还是会触发重新渲染
6.v-cloak
这个指令是用来保持在元素上直到关联实例结束时进行编译。
7.v-once
v-once关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能。
8. v-bind
v-bind用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【 :】
1.对象写法
代码如下(示例):
//进行类切换的例子
<div id="app">
<!--当data里面定义的isActive等于true时,is-active这个类才会被添加起作用-->
<!--当data里面定义的hasError等于true时,text-danger这个类才会被添加起作用-->
<div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>
渲染结果
<!--因为hasError: false,所以text-danger不被渲染-->
<div class = "is-active"></div>
2.数组语法
代码如下(示例):
<div id="app">
<!--数组语法:errorClass在data对应的类一定会添加-->
<!--is-active是对象语法,根据activeClass对应的取值决定是否添加-->
<p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
activeClass: false,
errorClass: 'text-danger'
}
})
</script>
渲染结果
<!--因为activeClass: false,所以is-active不被渲染-->
<p class = "text-danger"></p>