浅聊vue指令

浅聊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
		},
	}