Vue学习总结1.0

Vue的安装
Vue.js不支持IE8及其以下版本，因为Vue.js使用了IE8不能模拟的ECMAScript 5特性。Vue.js支持所有兼容ECMAScript 5的浏览器。
直接下载并用<script>标签引入，Vue 会被注册为一个全局变量。重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告。
在用Vue.js构建大型应用时推荐使用NPM安装，NPM能很好地和诸如Webpack或Browserify模块打包器配合使用。Vue.js也提供配套工具来开发单文件组件。

最新稳定版
$ npm install vue
Vue.js提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

#全局安装vue-cli
$ npm install --global vue-cli
#创建一个基于webpack模板的新项目
$ vue init webpack my-project
#安装依赖
$ cd my-project
$ npm install
$ npm run dev

数据绑定
数据绑定最常见的就是使用“Mustache”语法（双大括号）的文本插值：
<span>Message: {{ msg }}</span>

Vue指令
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

Vue.js提供了一些常用的内置指令：

• v-if指令
• v-show指令
• v-else指令
• v-for指令
• v-bind指令
• v-on指令

指令一：v-model

表单元素绑定：

１.v-model这个指令还有几个可选的参数:
lazy,number,options,debounce

• 使用lazy参数是将双向数据同步的时间节点从input触发改到了change触发<input v-model="msg" lazy>；
• 使用number参数是通知v-model绑定的dom元素把用户输入值默认当成数字来处理，<input v-model="msg" number>；
• 使用option参数是用于渲染一个select项的列表<select v-model="selected" options="myOptions"></select>；
• 其中options的参数名指向一个数组，该数组可以包括字符串或对象，对象可以是{text:'', value:''}的形式，指定了<option>的value属性与text内容，例如：

[
  { text: 'A', value: 'a' },
  { text: 'B', value: 'b' }
]

v-model.png

Vue代码书写注意：
冒号后有一个space，必须写，不然报错。

指令二：v-for
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
v-for="item in items"

items是一个数组，item是当前被遍历的数组元素。（与angular类似）
Demo：

v-for.png json.png

指令三：v-if

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：
v-if="expression"

expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。

• 数据的yes属性为true，所以"Yes!"会被输出；
• 数据的no属性为false，所以"No!"不会被输出；
• 运算式age >= 25返回true，所以"Age: 28"会被输出；
• 运算式name.indexOf('jack') >= 0返回false，所以"Name: keepfool"不会被输出。

注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

指令四：v-show

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

指令五：v-bind

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：

v-bind:class
v-bind:argument="expression"

未完待续...