ES7
1. 指数运算符(幂): **
2. Array.prototype.includes(value) : 判断数组中是否包含指定value
1.1.1. 官网
1)英文官网: [https://vuejs.org/](https://vuejs.org/)
2)中文官网: [https://cn.vuejs.org/](https://cn.vuejs.org/)
1.1.2. 介绍描述
1)渐进式 JavaScript 框架
2)作者: 尤雨溪(一位华裔前 Google 工程师)
3)作用: 动态构建用户界面
1.1.3. Vue 的特点
1)遵循 MVVM 模式
2)编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3)它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目
1.1.4. 与其它前端 JS 框架的关联
1)借鉴 angular 的模板和数据绑定技术
2)借鉴 react 的组件化和虚拟 DOM 技术
1.1.5. Vue 扩展插件
1)vue-cli: vue 脚手架
2)vue-resource(axios): ajax 请求
3)vue-router: 路由
4)vuex: 状态管理
5)vue-lazyload: 图片懒加载
6)vue-scroller: 页面滑动相关
7)mint-ui: 基于 vue 的 UI 组件库(移动端)
8)element-ui: 基于 vue 的 UI 组件库(PC 端)
9)它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目
1.2. Vue 的基本使用
1.2.1. 编码
<div id="app">
<input type="text" v-model="username">
<p>Hello, {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
username: 'vue'
}
})
</script>
1.2.2. 使用 vue 开发者工具调试
安装vue-devtools.crx(v_4.1.3)
1.3. 模板语法
1.3.1. 模板的理解
1)动态的 html 页面
2)包含了一些 JS 语法代码
a.双大括号表达式
b.指令(以 v-开头的自定义标签属性)
1.3.2. 双大括号表达式
1)语法: {{exp}}
2)功能: 向页面输出数据
3)可以调用对象的方法
1.3.3. 指令一: 强制数据绑定
1)功能: 指定变化的属性值
2)完整写法:
v-bind:xxx='yyy' //yyy 会作为表达式解析执行
3)简洁写法:
:xxx='yyy'
1.3.4. 指令二: 绑定事件监听
1)功能: 绑定指定事件名的回调函数
2)完整写法:
v-on:keyup='xxx'
v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
3)简洁写法:
@keyup='xxx' @keyup.enter='xxx'
1.4. 计算属性和监视
1.4.1. 计算属性
1)在 computed 属性对象中定义计算属性的方法
2)在页面中使用{{方法名}}来显示计算的结果
1.4.2. 监视属性
1)通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
2)当属性变化时, 回调函数自动调用, 在函数内部进行计算
1.4.3. 计算属性高级
1)通过 getter/setter 实现对属性数据的显示和监视
2)计算属性存在缓存, 多次读取只执行一次 getter 计算