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
表单元素绑定:
1.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' }
]
Vue代码书写注意:
冒号后有一个space,必须写,不然报错。
指令二:v-for
v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:
v-for="item in items"
items是一个数组,item是当前被遍历的数组元素。(与angular类似)
Demo:
指令三: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"
未完待续...