Vue学习记录(一)
1.兼容性:
Vue有兼容性,它不支持IE8及以下版本,因为Vue使用了IE8无法模拟的ECMAScript5特性。但Vue支持所有兼容ECMAScript5特性的浏览器。
2.NPM安装:
(1) NPM能很好地与诸如webpack或Browserify等模块打包器配合使用,指令为:npm install vue
。
(2) 使用官方提供命令行工具CLI,它可用于快速搭建大型单页应用,指令为:npm install --global vue-cli
。
(3) 创建一个基于 webpack 模板的新项目,指令为:vue init webpack 项目名称
。
(4) 安装项目所需依赖,指令为:npm install 需要安装的依赖
。
(5) 打开项目所在的文件夹,然后输入指令,指令为:cd 项目名称
。
(6) 运行项目,指令为:npm run dev
。
3.介绍:
(1) Vue是一套用于构建用户界面的渐进式框架,属于自底向上的逐层应用,它的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
(2) Vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。
(3) 指令:Vue的指令带有前缀v-,以表示它们是Vue提供的特殊特性,比如:v-bind
(响应式行为绑定)、v-if
(判断)、v-for
(绑定数组来渲染数据)、v-on
(事件监听器)、v-model
(表单输入和应用状态之间双向绑定)。
(4) 组件化应用构建:Vue中一个组件的本质上是一个拥有预定义选项的一个Vue实例。
4.模板语法:
(1) 文本:数据绑定文本插值使用的是“Mustache”语法(双大括号),即{{}}
。
(2) 原始HTML:在标签内使用v-html
指令。注意,站点上动态渲染的HTML可能会非常危险,因为它很容易导致XSS攻击,所以只可以对可信内容使用HTML插值,绝不要对用户提供的内容使用插值。
(3) 特性:定义HTML特性需使用v-bind
指令。
(4) 使用JavaScript表达式:每个绑定都只能包含单个表达式,不是语句也不是方法。
(5) 指令:带有v-前缀的特殊属性。指令属性的值预期是单个JavaScript表达式,其职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。一些指令能够接收一个“参数”,在指令名称之后以冒号表示,比如:<a v-bind:href="地址链接"></a>
、<a v-on:click="事件名"></a>
。
(6) 缩写:v-bind缩写为:
,如:<a v-bind:href="地址链接"></a>
可以写为<a :href="地址链接"></a>
。
v-on缩写为@
,如:<a v-on:click="事件名"></a>
可以写为<a @click="事件名"></a>
。