vue笔记小结（1）之指令

1.导入vue的库

<script src="https://unpkg.com/vue"></script>

2.程序员万年不变的helloworld

下面贴一下代码（这里贴关键代码，源码见博客最后）

<div id="app">{{  msg  }}</div>

var vm=new Vue({
    el:"#app" , //id选择器
    data:{
        msg:"helloworld"
    }

});

这样一个简单的helloword就实现了，当然我们并不会仅仅满足这些

3.指令的使用

• v-if
• v-else
• v-show
• v-for
• v-model
• v-on '@'
• v-bind ':'
• v-text
• v-html
• v-cloak
• v-ref

v-if

	<div v-if="!flag">用来显示的内容</div>

	要注意的问题是v-if指令在做渲染的时候会有元素的卸载和装载的过程，也就是会添加和删除元素的操作，与之类似的有v-show指令下面会介绍到。（通过浏览器控制台查看元素）

v-else

	 <div v-if="flag">用来显示的内容</div>
     <div v-else>else</div>

与v-if配合使用

v-show

 <div v-show="!flag">用来显示show的内容</div>

用法和v-if基本一致 但实现原理有区别，v-show只是改变元素css的display属性，v-if则存在删除和添加元素的操作，根据实际情况，若判断的（如上述的flag）真假值会有很多频率的变化选择v-show为宜。

v-for

<ul>
        <li v-for="(item,index) in items">
	        {{  index  }}{{  item  }}
        </li>
 </ul>

这里的items是一个数组类型，item是遍历时的别名，index是当前元素的下标

v-model

	<div>  {{  msg  }}</div>
    <input type="text"  v-model="msg"> 

v-model用于数据的双向绑定

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。（摘自vue官网）

v-model的高级用法

    <input type="checkbox" 
     v-model="msg" value="helloworld" name="msgcheck">
    <input type="checkbox" 
     v-model="msg" value="hellovue" name="msgcheck">

注：此时的msg的类型需要时数组类型

v-on

   <div v-on:click="fn"   >用来测试v-on</div>

用来绑定事件，调用methods中的函数，其简写形式是'@'

v-bind

 <div class="div" v-bind:class="{div:!flag}">

用于绑定标签的属性

- v-text

- v-html

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

不会显示，直到编译结束。

v-ref

4. 详细代码

源码地址