Vue中基本指令用法

指令在Vue中是个很重要的功能，在Vue项目中是必不可少的。根据官网的介绍，指令 (Directives) 是带有 v- 前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
例如：

<p v-if="seen">现在你看到我了</p>

如上所示：其中，v-是Vue的标识，if是指令ID，yes是expression。yes是MVVM中的VM即ViewModel，当它的值发生变化，就会触发指令，改变View视图的显示。
expression还可以使用内联的模式，任何依赖的属性发生变化时都会触发指令的执行。例如：

<p v-if="'seen '+ user.name + ', ' + time"></p>

下面我们就谈谈常用的指令

数据渲染 v-text、v-html、v-model、{{}}

1、v-text

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算。例如：

<div id="app">
  {{ message }}
</div>
var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'
 }
})

注：vue中有个指令叫做 v-once 可以通过v-once与v-text结合，实现仅执行一次性的插值

<span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span>

2、v-html

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<div id="app">
    <p v-html="html"></p>
</div>
var app = new Vue({
        el: "#app",
        data: {
            html: "<b style='color:red'>v-html</b>"
        }
    });

3、v-model

v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。

<div id="app">
  <input v-model="message " />
</div>
var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'
 }
})

4、{{}}

{{}}是v-text的简写形式

控制模块的显示/隐藏 v-if、v-show

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

<template>
    <div id="app">
        <div v-if="isIf">
            if
        </div>
        <div v-show="ifShow">
            show
        </div>
        <button @click="toggleShow">toggle</button>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                isIf : true,
                ifShow : true,
                loginType : "username"
            }
        },
        methods: {
            toggleShow : function(){
                this.ifShow = this.ifShow ? false : true;
                this.isIf = this.isIf ? false : true;
            }
        }
    }
</script>

渲染循环列表 v-for

v-for是一个循环指令，一般跟数组结合起来使用，例如：

<p id="wantuizhijia">
 <ol>
  <li v-for="site in sites">
   {{ site.name }}
  </li>
 </ol>
</p>

<script>
 new Vue({
  el: '#wantuizhijia',
  data: {
   sites: [
    { name: '网推之家' },
    { name: '谷歌' },
    { name: '淘宝' }
   ]
  }
 })
</script>

我们也可以在模板中使用 v-for：

<p id="wantuizhijia">
 <ul>
  <template v-for="place in places">
   <li>{{ place.name }}</li>
   <li>--------------</li>
  </template>
 </ul>
</p>

<script>
 new Vue({
  el: '#wantuizhijia',
  data: {
   places: [
    { name: '厦门' },
    { name: '漳州' },
    { name: '福州' }
   ]
  }
 })
</script>

v-for 可以通过一个对象的属性来迭代数据：

<p id="wangtuizhijia">
 <ul>
  <li v-for="value in object">
   {{ value }}
  </li>
 </ul>
</p>

<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
    name: '汇票盟',
    url: 'http://www.pjmeng.com',
    slogan: '美好生活，等待你的开创！'
   }
  }
 })
</script>

v-for 通过一个对象的属性来迭代数据，可以提供第二个的参数为键名：

<p id="wangtuizhijia">
 <ul>
  <li v-for="(value, key) in object">
   {{ key }} : {{ value }}
  </li>

 </ul>
</p>

<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
     name: '汇票盟',
    url: 'http://www.pjmeng.com',
    slogan: '美好生活，等待你的开创！'
   }
  }
 })
</script>

v-for 通过一个对象的属性来迭代数据，以第三个参数为索引：

<p id="wangtuizhijia">
 <ul>
  <li v-for="(value, key, index) in object">
   {{ index }} {{ key }}:{{ value }}
  </li>

 </ul>
</p>

<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
    name: '脚本之家',
    url: 'www.jb51.net',
    slogan: '美好生活，等待你的开创！'
   }
  }
 })
</script>

v-for 也可以循环整数

<p id=”wangtuizhijia”>
<ul>
<li v-for=”n in 10″>
{{ n }}
</li>
</ul>
</p>
<script>
new Vue({
el: ‘#wangtuizhijia'
})
</script>
</body>

事件绑定 v-on

1、用于监听DOM事件，典型的就是v-on:click，处理的方法放在methods属性里会默认传一个参数。

<button @click="test">点击</button>  

methods: {
    test: function (evt) {
        console.log(evt);
    }
}

这里的evt，是标准的鼠标点击事件，类似jquery的click事件的回调函数中的参数。
可以通过this来找到data属性里的值，例如：

data: {
    items: "test"
},
methods: {
    test: function (evt) {
        console.log(this.items);
        console.log(evt);
    }
}

这里的this.items，就是data的items这个变量。
2、内联语句处理器
给v-on事件传一个固定参数

<button @click="test('a')">点击搜索age</button>

当这个时候，函数的第一个参数就不是鼠标点击事件了，而是字符串a

test: function (mes) {
    console.log(mes);
}

mes的值是’a’
$event
如果需要给他一个像上面一样的鼠标点击事件时，则使用$event作为参数（他和不传参数时的默认鼠标事件对象是相同的）。
使用Vue实例的变量，如果需要传一个data属性里的值，则直接放属性名
例如：

<div id="app">
    <a href="http://www.baidu.com" @click="test(items, $event)">点击搜索age</a>
</div>
<script>
    var test = {name: "test"};
    var vm = new Vue({
        el: '#app',
        data: {
            items: "test"
        },
        methods: {
            test: function (msg, evt) {
                console.log(msg);
                evt.preventDefault();//阻止默认动作，比如这里是页面跳转
            }
        }
    })
</script>

输出：test和BUTTON
以上就是Vue常用的指令用法，希望对大家有所帮助。