Vue常用指令使用指南，帮助回顾复习

Vue常用指令使用指南，帮助回顾复习

v-cloak:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。简单来说就是不会在页面显示源码。
下面是例子：

<style>
        /* 不会显示源码 */
        [v-cloak]{
            display: none;
        }
    </style>

<div id="app">
 <!-- 使用模板语法的基础上添加v-cloak -->
 	<p v-cloak>{{msg}}</p> <!--页面显示 hi你好啊 -->
</div>

<script src="vue.js"></script>//引入vue
    <script>
        var vm=new Vue({
            el:"#app",
           data:{
 			   msg:"hi你好啊"            
            }
     </script>

v-text：更新元素的 textContent，如果要更新部分的 textContent，需要使用 {{ msg }} 插值。简单说就是将字符串显示到页面。
下面是例子：

<div id="app">
 <!-- 页面显示 hi你好啊 -->
 	<p v-text="msg"></p>
</div>

<script src="vue.js"></script>//引入vue
    <script>
        var vm=new Vue({
            el:"#app",
           data:{
 			   msg:"hi你好啊"            
            }
     </script>

v-html:更新元素的 innerHTML。可以将HTML标签也渲染到页面，不过不可以用在用户提交的内容上，以免网页遭受攻击。
下面是例子：

<div id="app">
 <!-- 页面显示h1标签的大字 少时诵诗书 -->
 	<p v-html="msg"></p>
</div>

<script src="vue.js"></script>//引入vue
    <script>
        var vm=new Vue({
            el:"#app",
           data:{
 			   msg:"<h1>少时诵诗书<h1>"            
            }
     </script>

v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
下面是例子：

<div id="app">
 <!-- 页面显示 这个不会改变吧 后面写的 不会的 则不会被显示到页面-->
 	 <p v-once>{{msg}}</p>
</div>

 <script src="vue.js"></script>//引入vue
    <script>
        var vm=new Vue({
            el:"#app",
           data:{
           
            msg:"这个不会改变吧"
           
            },
            mounted(){
                this.msg="不会的"
            
            },
           
           
        })
    </script>

v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。也就是说这个代码不会被编译，显示原本的代码标签。

<div id="app">
 <!-- 不会被编译 页面显示 {{msg}} -->
      <p v-pre>{{msg}}</p>
</div>

 <script src="vue.js"></script>//引入vue
    <script>
        var vm=new Vue({
            el:"#app",
           data:{
           
            msg:"这个不会改变吧"
           
            }
     
        })
    </script>

v-model：在表单控件或者组件上创建双向绑定。
下面是例子：

<div id="app">
<!-- 数据的双向绑定 -->
      <input type="text" value="" v-model="msg">
      <!-- text里输入的内容会显示在p标签内 -->
      <p> {{msg}}</p>
</div>

<script src="vue.js"></script>//引入vue
    <script>
        var vm=new Vue({
            el:"#app",
           data:{
           
            msg:"这个不会改变吧"
           
            }
     
        })
    </script>

v-on：绑定事件监听器。缩写：@
下面是例子：点击按钮可以实现+1，-1，并实时显示在input标签上

<div id="app">
 	  <input type="text" v-model="num">
      <input type="button" v-on:click="add" value="+1">
      <input type="button" @click="sub()" value="-1">
</div>

<script src="vue.js"></script>//引入vue
    <script>
        var vm=new Vue({
            el:"#app",
           data:{
           
           num:1
           
            },
             // methods用来写页面需要的方法的配置项
            methods:{
                add:function(){
                    this.num+=1
                },
                sub(){
                    this.num-=1
                }
            }
     
        })
    </script>

v-bind：绑定属性，动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。缩写：:
下面是例子：实现更换图片

<div id="app">
 	  <img v-bind:src="srcUrl" alt="" srcset="">
</div>

<script src="vue.js"></script>//引入vue
    <script>
        var vm=new Vue({
            el:"#app",
           data:{
           //这是原图片
          srcUrl:"./img/QQ图片20190313133705.jpg"
           
            },
             mounted(){
              //这是更换的图片
               this. srcUrl="./img/QQ图片20190309181137.jpg"
            },
     
        })
    </script>

v-if：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ，将提出它的内容作为条件块。
v-else：为 v-if 或者 v-else-if 添加“else 块”
下面是例子：点击切换按钮，会来回切换账号密码标签

<div id="d1">
			<template v-if="flag"><!--模板-->
				<input type="text" placeholder="请输入账号" key="nn"/><!--key="nn"追踪元素-->
			</template>
			<template v-else><!--模板标签-->
				<input type="password" placeholder="请输入密码" key="pp"/>
			</template>
			<div id="">
				<button @click="change">切换</button>
			</div>
		</div>

<script src="vue.js"></script>//引入vue
<script type="text/javascript">
		var vm=new Vue({
			el:"#d1",
			data:{
				flag:true
			},
			methods:{//方法
				change:function(){
					this.flag=!this.flag;
				}
			}
		})
	</script>

v-show：根据表达式之真假值，切换元素的 display CSS property。它和v-if不同的是，它是使用display：none隐藏标签。
下面是例子：

<div id="d1">
				<input type="text" v-show="flag" placeholder="请输入账号" key="nn"/><!--key="nn"追踪元素-->
				<input type="password" v-show="!flag" placeholder="请输入密码" key="pp"/>		
			<div id="">
				<button @click="change">切换</button>
			</div>
		</div>

<script src="vue.js"></script>//引入vue
<script type="text/javascript">
		var vm=new Vue({
			el:"#d1",
			data:{
				flag:true
			},
			methods:{//方法
				change:function(){
					this.flag=!this.flag;
				}
			}
		})
	</script>

如果有什么错误，欢迎指正。