vue中常用的指令
/*
v-model='xx':一般是用在表单元素上,input框内容发生改变,所有用到这个变量的地方都会自动更新
v-text='xx':相当于 innerText,不能识别结构
v-html='xx':相当于 innerHTML,能识别结构
v-cloak:专门用来提供解决小胡子的显示问题,需要搭配css使用
当vue编译完成之后,会把这个属性删掉,这是css样式就不起作用了
v-once:有这个指令的标签只会编译一次,后期数据再变,它也不会变
v-pre:有这个指令的标签及其后代元素,vue都不做处理(不经过vue处理),可以用来提升vue的编译效率
v-if='true/false':控制元素或者组件是否加载,有比较大的切换开销
v-else:跟 v-if 或者 v-eles-if 搭配只用,且中间不能插入其他无关标签或者组件
v-show=true/false:用来控制元素或者组件显示不显示(控制diaplay的属性),有比较大的初始加载开销
v-for='xx in yy':用来循环的,可以循环数组、数字、字符串、对象等。与v-if同时使用的时候,v-for的优先级要高于v-if的
key 对vue来说,是元素的身份标识,有利于vue的diff计算
key 在同一个for中不能重复。同一个页面或组件中想要使用相同的key值,那么key值所处的v-for不能为兄弟元素
v-bind:prop='value':用来处理行内属性的一个指令,简写是一个冒号 :
行内属性中 class 和 style 是经常操作的属性,所以vue对这两个属性专门做了加强
:class='{类名1:布尔值,类名2:布尔值,...}' 只有值为true的类才会加上
:style="{css属性名:css属性值}"
v-on:事件名='方法名':专门用来绑定事件的指令,简写是:@
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[v-cloak] {
/* 透明度设置为 0 */
opacity: 0;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1 v-once>{{name}}</h1>
<h1>{{name}}</h1>
<input type="text" v-model="name">
<!-- 有 v-pre 的标签,不经过vue编译 -->
<ul v-pre>
<li>{{name}}</li>
<li>{{name}}</li>
<li>{{name}}</li>
</ul>
<h4 v-if='1'>{{name}}</h4>
<!-- <span>我是打酱油的</span> 加了之后就会报错 -->
<h4 v-else>我没有</h4>
<div>
<p v-for="(item, index) in arr" :key="index">
<span>{{index}}: {{item}}</span>
</p>
<!-- 都想将数组的索引号作为key值,那么这两个v-for就不能是兄弟关系 -->
<!-- <p v-for="(item, index) in arr" :key="index">
<span>{{index}}: {{item}}</span>
</p> -->
</div>
<div>
<p v-for="(item, index) in arr" :key="index">
<span>{{index}}: {{item}}</span>
</p>
</div>
<!-- 这个标签的行内属性name,属性值为 '测试' -->
<p v-bind:name='name'>测试v-bind</p>
<p :name='name'>测试v-bind</p> <!-- 简写 -->
<h3 :class="{box:0, box1:1, box2:3}">测试class</h3>
<div :style="{height: he}">{{he}}</div>
<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="obj">{{name}}</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '测试',
arr: [1,2,3,4,5,6],
he: '30px',
obj: {color: 'red', id:111, 'font-size': '20px'}
},
});
</script>
</body>
</html>