目录
浅聊vue指令
<div id="root">
//模板语法
<h1>Hello{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})1.为什么学vue指令
2.指令
2.1数据绑定
2.1.1 v-bind
数据只能从vue实例中的data流向页面
结构如下：
<div id="root">
单向数据绑定：<input type="text" :value="name"><br/>
<div/>
<!--js部分与前面一样-->效果就是
页面出现一个input框，里面有data中name的值。
2.1.2v-model
数据不仅能从data流向页面，还可以从页面流向data。
结构如下
<div id="root">
单向数据绑定：<input type="text" v-model:value="name"><br/>
<div/>
<!--js部分与前面一样-->
2.2列表渲染
使用指令v-for
eg:
<div id="root">
<!-- 遍历数组
<h2>人员列表（遍历数组）</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<div/>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
})
2.2.1了解在v-for中index和key的区别
diff算法
这是通过index为索引的遍历数组
通过key为索引遍历数组时。效果如下
2.3事件监听
2.3.1 v-on
绑定事件监听, 可简写为@后面添加事件
格式如下：
<button @click="showInfo1">点我提示信息</button>2.4条件渲染
2.4.1 v-if
写法：
-
v-if="表达式"
-
v-else-if="表达式"
-
.v-else="表达式"
2.4.2 v-show
写法：v-show="表达式"
使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
2.5其他指令
2.5.1 v-text
比如
<div id="root">
<!-- 遍历数组
<h2>人员列表（遍历数组）</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<div/>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
})
2.5.2 v-cloak
2.5.3 v-once
用法：
<h2 v-once>初始化的n值是:{{n}}</h2>
就比如当我们绑定一个数据增加1时的点击事件时，我们点击后，绑定v-once
的节点初次会渲染，点击后不在渲染。
2.5.4 v-pre
<h2 v-pre>Vue其实很简单</h2>
3.自定义指令
在自定义指令需要用到一个vue实例的一个属性directives
用法就是directives:{指令名:配置对象} 或 directives{指令名:回调函数}
在这些回调中会接到两个参数
element :DOM节点
binding:事件的实例
3.1实践
<div id="root">
<h2>{{name}}</h2>
<h2>当前的n值是：<span v-text="n"></span> </h2>
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
</div>
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
directives:{
//big函数何时会被调用
//1.指令与元素成功绑定时（一上来）。
//2.指令所在的模板被重新解析时。
big(element,binding){
console.log('big',this) //注意此处的this是window
console.log(element,binding)
element.innerText = binding.value * 10
},
}
在directives属性中定义指令时，this是window
