vue学习小记-vue指令

vue常用v-指令用法及作用

v-cloak

v-cloak作用：
通常v-cloak用于解决当网速较慢时,页面加载值出现闪烁现象,比如你使用的时script引入的vue.js文件,在vue.js还未加载完成时,那么下面的代码在页面显示就是{{ msg }},然后vue.js加载完成,{{ msg }}就会跳转为实际的数据,所以会出现闪烁.

v-cloak用法：

<style>
    [v-cloak]{
    	display:none;
   }
</style>

<p v-cloak>{{ msg }}</p>

如上使用在vue.js还未加载完成时,该标签就是隐藏的,加载完成后v-cloak会自动从标签上移除.

v-text

v-text用法：

<p v-text='msg'></p>
效果等于
<p>{{ msg }}</p>

两者区别:
1、使用v-text不会有闪烁问题，在网速较慢情况下，显示为空白，加载完显示出来
2、v-text会覆盖标签里书写的内容，而{{ msg }}这种表达式，会保留额外内容，如：

<p>1111111{{ msg }}111111111</p>

这串代码在页面显示的时候数字1会保留下来

v-html

v-html用法：
v-html的用法和v-text一致。区别在于v-html会自动识别数据里的标签，而v-text不会识别:

假如数据msg='<h1>vue学习</h1>''
<p v-text='msg'></p>
页面输出为文本:<h1>vue学习</h1>
<p v-html='msg'></p>
页面输出为标题:vue学习

v-bind

v-bind含义：
v-bind是提供用于绑定属性的指令

v-bind用法

<img src=""  v-bind:alt="msg">
当图片加载失败时候就会显示msg的数据,可以简写为
<img src=""  :alt="msg">

大概意思就是v-bind指令会告诉浏览器在解析时,把引号里的内容看成是变量,所以解析的时候就是解析的变量保存的内容

v-on

v-on含义：
v-on通常用来绑定事件

v-on用法：

<button v-on:click='show'>按钮</button>
可以缩写为
<button @click='show'>按钮</button>
点击按钮,就会调用show函数

v-for

v-for含义：
v-for用于数据循环渲染

v-for用法：

<!-- 循环数组 -->
     <p v-for="(itme,i) in msg">
         <span>{{ itme }}</span>---
         <span>{{ i }}</span>
         msg是data里面的数组数据,item是数组里的每一项值,i是索引
     </p>
 
    <!-- 循环对象 -->
     <p v-for="(val,key,i) in msg1">
         <span>值:{{ val }}</span>---
         <span>键:{{ key }}</span>---
         <span>索引:{{ i }}</span>
         msg1是data里面的对象数据,val是键值对里的值,key是键值对里的键,i是索引
     </p>

     <!-- 迭代数字 -->
     <p v-for="(itme,i) in 10">
         <span>这是循环第 {{ itme }} 次</span>
         数字代表循环多少次,item从1开始,i是索引
     </p>

v-if和v-show

两者含义：
都是用于节点的显示或者隐藏

两者区别：
v-if:直接删除了节点,每次显示都需要重新创建节点,消耗性能
v-show:只是隐藏了节点,只是在节点上添加了display:none,每次显示,不需要重新创造节点,节约性能

用法：

 	<!-- v-if:直接删除了节点 -->
     <p v-if="true">这是v-if</p>

     <!-- v-show:只是隐藏了节点 -->
     <p v-show="true">这是v-show</p>