Vue指令-内置指令

Vue指令

内置指令

v-text

• v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题

• 此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

<div id ="app">
	<p v-text = 'msg'></p>
</div>

new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
       		  }
   	   });

v-html

• 用法和v-text 相似 ,但是他可以将HTML片段填充到标签中
• 可能有安全问题, 一般只在可信任内容上使用 v-html,永不用在用户提交的内容上

<div id = "app">
    <p v-html="html"></p> //输出：html标签在渲染的时候被解析
    <p>{{message}}</p> //输出：<span>通过双括号绑定</span> 
    <p v-text="text"></p> //输出：<span>html标签在渲染的时候被源码输出</span>
</div>

const app = new Vue({
　　el: '#app',
　　data: {
　　　　message: '<span>通过双括号绑定</span>',
　　　　html: '<span>html标签在渲染的时候被解析</span>',
　　　　text: '<span>html标签在渲染的时候被源码输出</span>',
　　}
 });

v-show

• 通过改变元素的 css 属性(display)来决定元素是显示还是隐藏,因为只是给元素添加display属性来决定元素是否显示隐藏,对于性能消耗比较小,所以适合频繁切换的隐藏.

<div id = "app">
    <!-- v-show: 当条件为false时，v-show只是给我们的元素添加一个行内样式：display:none -->
    <h2 v-show = "isShow" >{{message}}</h2>
</div>

const app = new Vue({
    el:'#app',
    data:{
      msg: 'Hello Vue.js',
      isShow:true,
    }
  })

v-if,-else-if, v-else

• v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;v-if 有更高的切换开销,在运行时条件很少改变，则使用 v-if .

<div id="app">
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
</div>

const app = new Vue({
            el:'#app',
            data:{
                type: 'A'
           		 }
        	})

v-for

循环数组
v-for = “(item,index) in 数组名” ,item 代表数组中的每一项, index 代表索引

<div id="app">
    <ul id="example-1">
    	<li v-for="item in arry" :key="item.message">{{ item.message }}</li>
    </ul>
</div>

 const app = new Vue({
            el:'#app',
            data:{
                arry:[
                    {message: 'Foo'},
                    {message: 'Bar'}
                ]
            }
        })

v-bind

• v-bind 指令被用来响应地更新 HTML 属性,主要是绑定属性.
• v-bind:href,可以缩写为:href;

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">

• 绑定对象
  • 可以给v-bind:class 一个对象，以动态地切换class,：v-bind:class指令可以与普通的class特性共存,v-bind 中支持绑定一个对象,如果绑定的是一个对象则键为对应的类名,值为对应data中的数据

 <style>
        .box {
            border: 1px dashed #555;
        }

        .textColor {
            color: #333;
            background-color: #666;
        }

        .textSize {
            font-size: 30px;
            font-weight: bold;
        }
    </style>
    <div id="app">
        <!-- HTML最终渲染为 <ul class="box textColor textSize"></ul>
	注意：
		textColor，textSize  对应的渲染到页面上的CSS类名	
		isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上 
		当 isColor 和 isSize 变化时，class列表将相应的更新，
		例如，将isSize改成false，
		class列表将变为 <ul class="box textColor"></ul>
        -->
        <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
            <li>学习Vue</li>
            <li>学习Node</li>
            <li>学习React</li>
        </ul>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                isColor: true,
                isSize: true,
            }
        })

• 绑定clss样式
  • v-bind支持绑定一个数组，数组中的ClassA和ClassB对应为data中的数据

 <style>
        .box {
            border: 1px dashed #555;
        }

        .textColor {
            color: #333;
            background-color: #666;
        }

        .textSize {
            font-size: 30px;
            font-weight: bold;
        }
    </style>
    <div id="app">
        <ul class="box" :class="[classA, classB]">
            <li>学习Vue</li>
            <li>学习Node</li>
            <li>学习React</li>
        </ul>
    </div>

 const app = new Vue({
            el:'#app',
            data:{
                classA:'textColor',
                classB:'textSize'
            }
        })

• 绑定style样式
  • 需要绑定内置样式时,可以使用v-bind:style绑定属性.

对象语法

	<div id="app">
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hello,Vue</div>
	</div>

 const app = new Vue({
            el: '#app',
            data: {
                activeColor: 'red',
                fontSize: 30
            }
        })

	<div v-bind:style="styleObject"></div>

 const app = new Vue({
            el: '#app',
            data: {
               styleObject: {
    		   color: 'red',
    		   fontSize: '13px'
 						    }	
            }
        })

数组语法

<div id="app">
	<div v-bind:style="styleObject">hello,Vue</div>
</div>

 const app = new Vue({
            el: '#app',
            data: {
                styleObject1: {
                    color: 'red',
                },
                styleObject2: {
                    fontSize: '13px'
                }
            }
        })

v-on

• 给元素进行事件绑定,v-on:事件名称,简写@:事件名称;
• v-on事件名称中的事件名称是一个方法,可以写成v-on事件名称(参数),没有参数可以写成v-on事件名称,方法应该写在methods中,而不是data中.
• 参数中$event是vue里面的事件对象.

<div id="app">
	<button v-on:click="myclick">click me</button>
</div>

const app = new Vue({
      el: '#app',
      data: {

      },
      methods: {
        myclick: function () {
          alert('hello,Vue');
        }
      }
    })

方法

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

• v-on事件修饰符
  • 修饰符是由点开头的指令后缀来表示的

点击事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

键盘事件修饰符

• 在监听键盘事件时,我们经常需要检查详细的按键,Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

常见按键码

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

• 通过全局 config.keyCodes对象自定义按键修饰符别名

Vue.config.keyCodes.f1 = 112

• 案件修饰符案例:

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

v-model

在表单控件或者组件上创建双向绑定

• 负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理
• v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源.应该通过 JavaScript 在组件的 data 选项中声明初始值.
• v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用

<div id="app">
    <div>{{msg}}</div>
        <div>
        <!---当输入框中内容改变的时候,页面上的msg会自动更新-->
        <input type="text" v-model='msg'>
</div>

 new Vue({
            el: "#app",
            data:{
                msg: "Hello Vue.js",
            }
        })

v-slot

v-pre

跳过这个元素和它的子元素的编译过程.一些静态的内容不需要编辑加这个指令可以加快编辑

<div id="app">
    <h1> 不加v-pre属性 {{data}}</h1>
    <h1 v-pre> 加v-pre属性 {{data}}</h1>
</div>

const app = new Vue({
        el: '#app',
        data: {
            data: 'leechoy'
        }
    })

v-once

定义它的元素或组件只会渲染一次,包括元素或者组件的所有子节点.首次渲染后,不再随着数据的改变而重新渲染,可以理解为是静态内容

v-cloak

在vue实例结束编译时从绑定的html元素上移除

面试题

v-show 和 v-if的区别

v-if是真正的条件渲染,他会确保在切换过程中条件块内的时间和子组件被销毁和重建;
v-show不论如何,都会被渲染在DOM中,当条件为真值,将会修改条件的css样式;
v-if有更高的切换开销,v-show有更高的初始渲染开销;
v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐；
v-if是惰性的,如果初始条件为假,则什么也不做.
只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);
v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留；
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
v-if适合运营条件不大可能改变；
v-show适合频繁切换.
v-if当条件为false时,不会有对应的元素在DOM中.
v-show当条件为false时,是将元素的display属性设置为none.