1.1.1. 官网
1）英文官网: https://vuejs.org/
2）中文官网: 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 插件或其它第三方库开发项目
使用 vue-cli 创建模板项目：
先安装node.js,这里安装的是12.14.1
http://nodejs.cn/
使用vue创建项目：
npm install -g vue-cli
node -v
npm -v
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/
Vue的基本使用
代码格式：
Hello, {{username}}
new Vue({
el: '#app',
data: {
username: 'vue'
}
})
1.3. 模板语法
1.3.1. 模板的理解
1）动态的 html 页面
2）包含了一些 JS 语法代码
a.双大括号表达式
b.指令(以 v-开头的自定义标签属性)
文本
Message:{{msg}}
原始HTML
Using mustaches:{{rawHtml}}
Using v-html directive:
1.3.2. 双大括号表达式
1）语法: {{exp}}
2）功能: 向页面输出数据
3）可以调用对象的方法
表达式
{{number + 1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
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 计算
1.5. class 与 style 绑定
1.5.1. 理解
1）在应用界面中, 某个(些)元素的样式是变化的
2）class/style 绑定就是专门用来实现动态样式效果的技术
1.5.2. class 绑定
1）:class='xxx'
2）表达式是字符串: 'classA'
3）表达式是对象: {classA:isA, classB: isB}
4）表达式是数组: ['classA', 'classB']
1.5.3. style 绑定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 属性
1.6. 条件渲染
1.6.1. 条件渲染指令
1）v-if 与 v-else
2）v-show
1.6.2. 比较 v-if 与 v-show
3）如果需要频繁切换 v-show 较好
4）当条件不成立时, v-if 的所有子节点不会解析
1.7. 列表渲染
1.7.1. 列表显示指令
数组: v-for / index
对象: v-for / key
1.7.2. 列表的更新显示
删除 item
替换 item
1.7.3. 列表的高级处理
列表过滤
列表排序
1.8. 事件处理
1.8.1. 绑定监听:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(参数)"
4）默认事件形参: event
5）隐含属性对象: $event
1.8.2. 事件修饰符
1）.prevent : 阻止事件的默认行为 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
1.8.3. 按键修饰符
1）.keycode : 操作的是某个 keycode 值的键
2）.keyName : 操作的某个按键名的键(少部分)
1.9. 表单输入绑定
1.9.1. 使用 v-model 对表单数据自动收集
1）text/textarea
2）checkbox
3）radio
4）select
实例：
1.13.1. 常用内置指令
1）v-text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果为 true, 当前标签才会输出到页面
4）v-else: 如果为 false, 当前标签才会输出到页面
5）v-show : 通过控制 display 样式来控制显示/隐藏
6）v-for : 遍历数组/对象
7）v-on : 绑定事件监听, 一般简写为@
8）v-bind : 强制绑定解析表达式, 可以省略 v-bind 简写为:
9）v-model : 双向数据绑定
10）ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象
11）v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
1.13.2. 自定义指令
1）注册全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
或
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
2）注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3）使用指令
v-my-directive='xxx'
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
钩子函数参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
例子：