Vue学习记录(一)html
1.兼容性:vue
Vue有兼容性,它不支持IE8及如下版本,由于Vue使用了IE8没法模拟的ECMAScript5特性。但Vue支持全部兼容ECMAScript5特性的浏览器。webpack
2.NPM安装:web
(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
。vue-cli
3.介绍:npm
(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>
。浏览器