Vue 常用指令讲解

Vue 常用指令讲解

指令（Directives）是带有 v- 前缀的特殊属性，指令属性的值一般是单个JavaScript表达式（v-for除外）。指令的功能是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
常用的Vue指令有：

①：el挂载点
1.el是用来设置Vue实例挂载（管理）的元素
2.Vue会管理el选项 命中的元素 以及内部的 后代元素
3.可以使用其他的选择器，但是建议使用ID 选择器
4.可以使用其他的 双标签 但是不能使 html 和 body
建议使用 div 因为div没有其他的语义

<div id="app">
		{{msg}}
    <span>{{msg}}</span>
</div>
<script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: "第一个vue"
            }
        })
 </script>

②：v-on

v-on指令的作用是为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods 属性中
方法内部通过this关键字可以访问定义在data中的数据

<div id="app"> 
         <input type="button" value="v-on指令" v-on:click="doIt">
         <input type="button" value="@指令" @click="doIt">
         
         <input type="button" value="双击事件" @dblclick="doIt">
         <!-- @click  @dblclick  单击 双击事件  -->
         
         <h2 @click="changeText">{{msg}}</h2>
</div> 
  <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: "你好！",
                info:"世界" ,
                },
            methods:{
                doIt:()=>{
                    alert('我是doIT')
                },
                changeText:function(){
                    this.msg += "点击过后的文本"
                }
            },
        })
    </script>

③：v-show 和 v-if

v-if 根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）
v-show: display:none
v-show根据表达式的真假切换显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容最终会解析为布尔值
如果为true显示元素
如果为false隐藏元素
数据改变之后，数据也会同步更新

<div id="app">
    <input type="button" value="点击切换状态" @click="change()">
    <img src="./1.jpg" v-show="isShow" width="200">

    <img src="./1.jpg" v-show="age>18" width="200">
    <input type="button" value="年龄++" @click="add()">

    <!-- v-if -->
    <input type="button" value="切换" @click="toggleShow()">
    <img src="./1.jpg" v-if="isShow" width="200">
</div>
 <script>
        var app = new Vue({
            el: '#app',
            data: {
                isShow: true,
                age: 17
            },
            methods: {
                change: function () {
                    this.isShow = !this.isShow
                },
                add: function () {
                    this.age++;
                },
                toggleShow: function () {
                    this.isShow = !this.isShow
                }
            },
        })
    </script>

④：v-text 和v-html
区别
v-text="" :更新元素的 textContent 默认替换全部的内容
v-text会替换标签内全部内容
不可以解析html标签，只能解析文本
想局部替换，{{ Mustache }} 用插值
v-html可以解析html标签和文本**

v-text 和 {{}} 表达式渲染数据，不解析标签；

v-html 不仅可以渲染数据，而且可以解析标签；

<div id="app"> 
         <h2 v-text="msg + '新加'">小黑</h2>  
         <h2 v-text="info + 'new'">小黑</h2>
         <h3>{{msg}}局部更新</h3>
         <p v-html="htmlMsg"></p>
</div>
  <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: "你好！",
                info:"世界" ,
                htmlMsg:"<a href='#'>超链接</a>"
            }
        })
    </script>

⑤：v-for

v-for 根据数据生成列表结构
数组经常和v-for使用
语法是(item,index) in 数据
eg: (item,index) in arr ----> (item,index)顺序不能改变
数组长度更新会同步到页面上，是响应式的

<div id="app">
    <input type="button" value="新增" @click="add()">
    <input type="button" value="移除" @click="remove()">
    <ul>
        <li v-for="(item,index) in arr"> 
            {{index +1}} 小鼠标： {{item}}
        </li>
        <li v-for="(item,index) in objArr">
            {{item.name}}
        </li>
    </ul>
</div>
  <script>
        var app = new Vue({
            el: '#app',
            data: {
                arr: ['滴滴', '哒哒', '叮叮', '咚咚'],
                objArr: [
                    {name: "jack"},
                    {name: "tom"}
                ]
            },
            methods: {
                add:function(){
                    this.objArr.push({name:"小狗"})
                },
                remove:function(){
                    this.objArr.shift();
                }
            }
        })
    </script>

⑥：v-blid
v-bind 是用于绑定数据和元素属性的，例如：
动态增删class 建议使用对象的方式
v-bind:属性名=表达式

<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
    <!-- 简写 -->
    <!--  <img  :src="imgSrc"  :title="imgTitle+'!'" 
     :class="isActive?'active':''" @click="toggleActive()"> <br>-->
    <!-- 使用对象方式 -->
    <img :src="imgSrc" :title="imgTitle+'!'" :class="{active:isActive}" @click="toggleActive()">
</div>
 <script>
        var app = new Vue({
            el: '#app',
            data: {
                imgSrc: "./1.jpg",
                imgTitle: "晚上好",
                isActive: false,
            },
            methods: {
                toggleActive: function () {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>

双大括号的模板语法不适用于HTML属性上，如果要把数据绑定到HTML的属性上可以使用 v-bind 指令：

<div v-bind:id="idVal"></div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			idVal: 'app'
		}
	})
</script>

上面代码中，渲染后的HTML代码中，div的id属性值为app。

同一个DOM元素上可以绑定多个属性，例如：

<div class="app">
    <a v-bind:href="url" v-bind:class="class">click me</a>
    <img v-bind:src="imgsrc">
</div>  

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
        imgsrc:"https://cn.vuejs.org/images/logo.png",
        class:"btn btn-default"
    }
});

v-bind` 除了可以绑定一个简单类型的数据之外，还可以绑定一个对象，例如：

<div class="app">
    <a v-bind:class="{active:isActive}">click me</a>
</div>  

上面代码中，对象的名为 active ，表示要添加的类名， isActive 是vue中的数据，表示在什么情况下添加该类名，即在Vue实例的数据对象中对应的值（isActive的值）为真是，才为DOM元素的class中添加 active 的样式。

简写：

v-bind 指令可以简化英文的冒号 : ，示例：

<div class="app">
    <a v-bind:href="url">click me</a>
</div> 

可以简化为：

<div class="app">
    <a :href="url">click me</a>
</div>  

⑦：v- model
v-model 获取和设置表单元素的值（双向数据绑定）
便捷的获取和设置表单元素的值，
绑定的数据和表单元素的值相关，
绑定的数据和表单元素的值是双向绑定的 无论修改哪一个，另外一个跟随改变

    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>
<div id="app">
    <input type="button" value="修改msg" @click="setM()">
     <input type="text" v-model="msg" @keyup.enter="getMsg">
     <h3 >{{msg}}</h3>
</div>
 <script>
        var app = new Vue({
            el: '#app',
            data: {
               msg:"晚上好"
            },
            methods:{
                getMsg:function(){
                    alert(this.msg);
                },
                setM:function(){
                    this.msg = "修改后的值"
                }
            }
        })
    </script>

⑧：### v-cloak

作用： v-clock 指令主要是解决对插值表达式 {{}} 的渲染前闪烁问题。
简单来说，当网络比较慢时，网页还在加载vue.js，这就会导致Vue来不及渲染，这是页面就会显示Vue源代码。我们就可以使用 v-cloak 指令来解决这一问题。

HTML代码：

<div id="app"  v-cloak>
    {{context}}
</div>

JS代码：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            context:'互联网头部玩家钟爱的健身项目'
        }
    });
</script>

CSS代码：

[v-cloak]{
    display: none;
}

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令了。

⑨：内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：

    <div id="app">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>

new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

上面代码运行后，当点击两个按钮时，都会执行 say() 方法。