1、内部指令 - Zikzin/vuejs2.0-study GitHub Wiki

一、v-if

用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

<div id="app">

    `<div v-if="isLogin">你好</div>`

    `<div v-else>请登录后操作</div>`

`</div>`

`<script type="text/javascript">`

    `var app=new Vue({`

        `el:'#app',`

        `data:{`

           `isLogin:false`

        `}`

    `})`

`</script>`

二、v-show

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

<div v-show="isLogin">你好</div>

v-if 和v-show的区别：

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

三、v-for

1、基本用法：

<li v-for="item in items">

    `{{item}}`

</li>

var app=new Vue({

 `el:'#app',`

 `data:{`

     `items:[20,23,18,65,32,19,54,56,41]`

 `}`

})

2、排序：

我们已经顺利的输出了我们定义的数组，但是我需要在输出之前给数组排个序，那我们就用到了Vue的computed:属性。

computed:{

`sortItems:function(){`

      `return this.items.sort();`

`}`

}

我们在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。
会报错：已存在同一个名称items。error when rendering root instance...
如果一切顺利的话，你已经看到了结果，但是这个小程序还是有个小Bug的，现在我把数组修改成这样。 items:[20,23,18,65,32,19,5,56,41]
我们把其中的54修改成了5，我们再看一下结果，发现排序结果并不是我们想要的。（18，19,20，23,32,41,5，56,65）(这是所有的js排序都有的问题。排序会按照第一位数字的大小来排序的。)
我们可以自己编写一个方法sortNumber，然后传给我们的sort函数解决这个Bug。

function sortNumber(a,b){

        `return a-b`

}

- 用法：

computed:{

`sortItems:function(){`

`return this.items.sort(sortNumber);`

`}`

}

3、对象循环输出

我们上边循环的都是数组，那我们来看一个对象类型的循环是如何输出的。我们先定义个数组，数组里边是对象数据。

students:[

{name:'jspang',age:32},

{name:'Panda',age:30},

{name:'PanPaN',age:21},

{name:'King',age:45}

]

在模板中输出

<ul>

<li v-for="student in students">

   `{{student.name}} - {{student.age}}`

</li>

</ul>

加入索引序号：

<ul>

<li v-for="(student,index) in students">

`{{index}}：{{student.name}} - {{student.age}}`

</li>

</ul>

排序，我们先加一个原生的对象形式的数组排序方法：

//数组对象方法排序:

function sortByKey(array,key){

`return array.sort(function(a,b){`

  `var x=a[key];`

  `var y=b[key];`

  `return ((x<y)?-1:((x>y)?1:0));`

});

}

有了数组的排序方法，在computed中进行调用排序

sortStudent:function(){

 `return sortByKey(this.students,'age');`

}

完整代码：

<li v-for="student in students">

{{student.name}}-{{student.age}}

</li>

或：输出序号

<li v-for="(student,index) in sortStudents">

{{index+1}}：{{student.name}}-{{student.age}}

</li>

var app = new Vue({

`el:'#app',`

`data:{`

    `students:[`

        `{name:'a',age:22},`

        `{name:'b',age:32},`

        `{name:'c',age:12},`

    `]`

`},`

computed:{

   `sortStudents:function(){`

      `return sortByKey(this.students,"age")`

   `}`

`}`

//数组对象方法排序:

`function sortByKey(array,key){`

     `return array.sort(function(a,b){`

     `var x=a[key];`

     `var y=b[key];`

    `return ((x<y)?-1:((x>y)?1:0));`

`});`

}

})

四、v-text &　v-html

1、我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。

<span>{{ message }}</span>=<span v-text="message"></span>

2、如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

<span v-html="msgHtml"></span>

五、v-on：绑定事件监听器，简写 @

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。方法要写在methods里。
- 1、使用绑定事件监听器，编写一个加分减分的程序。

<div id="app">

   `本场比赛得分： {{count}}<br/>`

   `<button v-on:click="jiafen">加分</button>`

   `<button v-on:click="jianfen">减分</button>`

`</div>`

<script type="text/javascript">

    `var app=new Vue({`

        `el:'#app',`

        `data:{`

            `count:1`

        `},`

        `methods:{`

            `jiafen:function(){`

                `this.count++;`

            `},`

            `jianfen:function(){`

                `this.count--;`

            `}`

        `}`

    `})`

`</script>`


- 2、我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。(因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。 另外，也可以根据键值表来定义键盘事件，比如这里的enter换成13。)

`<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">`

`onEnter:function(){`

     `this.count=this.count+parseInt(this.secondCount);`

 `}`

六、v-model指令(双向数据绑定常用于表单操作等)

1、最简单的双向数据绑定

<div id="app">

`<p>原始文本信息：{{message}}</p>`

`<h3>文本框</h3>`

`<p>v-model:<input type="text" v-model="message"></p>`

</div>

var app=new Vue({

`el:'#app',`

`data:{`

     `message:'hello Vue!'`

`}`

})

2、修饰符
- .lazy：取代 imput 监听 change 事件。
- .number：输入字符串转为数字。
- .trim：输入去掉首尾空格。
3、文本区域加入数据绑定
- <textarea cols="30" rows="10" v-model="message"></textarea>
4、多选按钮绑定一个值
- <h3>多选按钮绑定一个值</h3>
  
  <input type="checkbox" id="isTrue" v-model="isTrue">
  
  <label for='isTrue'>{{isTrue}}</label>

5、多选绑定一个数组（需要用value绑定）

<p>

      `<input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">`

      `<label for="JSPang">JSPang</label><br/>`

      `<input type="checkbox" id="Panda" value="Panda" v-model="web_Names">`

      `<label for="JSPang">Panda</label><br/>`

      `<input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">`

      `<label for="JSPang">PanPan</label>`

      `<p>{{web_Names}}</p>`

 `</p>`

6、单选按钮绑定数据
- <input type="radio" id="one" value="男" v-model="sex">
  
  <label for="one">男</label>
  
  <input type="radio" id="two" value="女" v-model="sex">
  
  <label for="one">女</label>
  
  <p>{{sex}}</p>
7、js部分：（vue是虚拟dom操作，渲染特别快，实现一些js的功能也特别简单。强大！）

var app = new Vue({
```
`el: '#appp',`

`data:{`

     `message:'hello',`

     `isTrue:true,`

     `web_names:[],`

     `sex:'男'`

`}`
```
})

七、v-bind 指令，简写:

1、v-bind是处理HTML中的标签属性的，例如

就是一个标签，也是一个标签，我们绑定上的src进行动态赋值。
- <div id="app">
```
`<img v-bind:src="imgSrc"  width="200px">`
```
  </div>
- 在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。
- var app=new Vue({
```
`el:'#app',`

`data:{`

      `imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'`

 `}`
```
  })
- 我们在data对象在中增加了imgSrc属性来供html调用。
2、绑定CSS样式
- 在工作中我们经常使用v-bind来绑定css样式：在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
- （1）直接绑定class样式
  
  <div :class="className">1、绑定classA</div>
- （2）绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
  
  <div :class="{classA:isOk}">2、绑定class中的判断</div>
- （3）绑定class中的数组
  
  <div :class="[classA,classB]">3、绑定class中的数组</div>
- （4）绑定class中使用三元表达式判断
  
  <div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
- （5）绑定style
  
  <div :style="{color:red,fontSize:font}">5、绑定style</div>
- （6）用对象绑定style样式
  
  <div :style="styleObject">6、用对象绑定style样式</div>

八、其他内部指令(v-pre & v-cloak & v-once)

1、v-pre指令

在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<div v-pre>{{message}}</div>

2、v-cloak指令

在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
[v-cloak] {

display: none;

}

<div v-cloak>

{{ message }}

</div>

3、v-once指令

在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。

<div v-once>第一次绑定的值：{{message}}</div>

<div><input type="text" v-model="message"></div>

1、内部指令 - Zikzin/vuejs2.0-study GitHub Wiki

一、v-if

二、v-show

v-if 和v-show的区别：

三、v-for

1、基本用法：

2、排序：

3、对象循环输出

四、v-text & v-html

五、v-on：绑定事件监听器，简写 @

六、v-model指令(双向数据绑定常用于表单操作等)

七、v-bind 指令，简写:

八、其他内部指令(v-pre & v-cloak & v-once)

1、v-pre指令

2、v-cloak指令

3、v-once指令

⚠️ **GitHub.com Fallback** ⚠️

四、v-text &　v-html

⚠️ GitHub.com Fallback ⚠️