笔记：Vue语法------vue指令（v-html,v-bind,v-on,v-model,v-if,v-show,v-for）

1.插值绑定

文本插值-----{{ ... }}

用双大括号将要绑定的变量，值，表达式括住就可以实现，vue将会获取计算后的值，并以文本的形式将其展示出来。

HTML插值----- v-html  (innerHTML)

var vm=new Vue({
    el:'#app'，
    data(){
        blog:'<h1>I am kobe</h1>',
    }
})


<script>
<div id="app">
    <div v-html="blog"></div>
</div>
<script>

这样子blog的值就会在<div>块中显示出来了。

2.属性绑定

控制类名对元素显示隐藏(display：none | block)，绑定标签上的属性(内容属性或者自定义属性)。

指令v-bind：

语法：v-bind:class 指令

也可以写成这样子：

:class 指令

DOM节点的属性基本都可以用指令v-bind进行绑定，类名和样式也可以用v-bind进行绑定。

看设置值的时候，赋值为false则不绑定，赋值为true则绑定且显示。

ps：当变量值为undefined，null，值为0数字，空字符串时，也会被判定为假，除一般值外，[]，{}，-1，-0.1也会被判定为真。 

例子：

<div class='box' v-bind:class="{active:!isGreen}"></div>

<style>
    .active{
        background-color:green;
    }
</style>

<script>
    new Vue({
        data(){
            return{
                isGreen:true
            }
        }
    })
</script>

上面这里例子div块不会呈现绿色，因为用v-bind绑定class样式的时候，!isGreen=false。 

3.事件绑定

指令v-on：vue使用v-on指令监听DOM事件。

语法：

v-on:原生事件名="函数名"

也可以写成

@原生事件名="函数名"

4.双向绑定

指令v-model：为可输入元素（input,textarea）创建双向数据绑定，它会根据元素类型自动选择正确的方法来更新元素。

简单例子：

<div id="app">
    <input type="text" v-model="singleText" style="width:240px;">
    <p>{{singleText}}</p>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data(){
            return {
                singleText:'',
            }
        }
    })
<script>

在上面的代码中，输入框中写入什么，<p>标签中就输出什么。

v-model体现在UI控件上面，只能应用在有value值的元素上面。

v-model是一个语法糖，它是 v-bind:value 和 v-on:input “合体”的另一种体现。

在使用v-model的时候，可以在其后缀一些修饰符来丰富用户输入时的行为。

可用于v-model的修饰符

修饰符	可用版本	说明
.lazy	所有	将用户输入的数据赋值于变量的时机由输入时延迟到数据改变时
.number	所有	自动转换用户输入为数值类型
.trim	所有	自动过滤用户输入的首尾空白字符

5.条件渲染和列表渲染

指令v-if:可以配合v-else-if和v-else一起使用，和C语言，java中的if条件语句使用方法类似。

例子：

<div id="app">
    <h2 v-if="order===0">if语句</h2>
    <h2 v-else-if="order===1">else-if语句</h2>
    <h2 v-else>else语句</h2>
</div>

<script>
    var vm =new Vue({
        el:'#app',
        data(){
            return {
                order:0
        }
    });
<script>

 上面代码输出结果为if语句，其他的语句是不输出的，即只有符合条件的语句才会输出。

 指令v-show:也可以用于实现条件渲染，不过它只是简单地切换元素的CSS属性：display。当条件判定为假时，元素的display属性将被赋值为none，反之，元素的display属性将被恢复为原有值。（display:none | block）即控制DOM元素显示隐藏display: none | block

建议使用v-show，因为v-if开销较大。(在一些情况下也是可以使用的)

相对于v-if来说，v-show并不能算作真正的条件渲染，因为挂载它的多个元素之间并没有条件上下文关系。

v-if 和 v-show 的比较：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。  v-if也是惰性的命令。如果在初始渲染时条件为假，则什么都不需要干——直到条件第一次变为真时，才会开始渲染条件块。

相比之下， v-show 不管初始条件为什么，元素总是会被渲染，即只是简单地基于CSS进行切换。

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少去改变，则使用 v-if 较好。

指令v-for:用于实现列表渲染，可以使用item in items或者item of items的语法（该语法在linux中也可以使用）。

迭代查询的语法为：

v-for="(item,index) in 数组名"

v-for可以通过一个对象的属性来迭代数据。例子如下。

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

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'Sam',
      NO: '1234',
      address: 'England'
    }
  }
})
</script>

运行结果如下：

 若上面的vue实例中，data一项中object是一个数组，有两个人的信息，则列表输出的时候则会输出两个人的信息。

当然v-for也可以用来迭代得到整数。

进一步学习vue.js基础可以点击下面网站进行学习：API — Vue.js