vue的特点
1）遵循 MVVM 模式
2）编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目
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的基本使用
<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）动态的 html 页面
2）包含了一些 JS 语法代码
a.双大括号表达式
b.指令(以 v-开头的自定义标签属性)
双大括号表达式
1）语法: {{exp}}
2）功能: 向页面输出数据
3）可以调用对象的方法
强制数据绑定
1）功能: 指定变化的属性值
2）完整写法:
v-bind:xxx='yyy' //yyy 会作为表达式解析执行
3）简洁写法:
:xxx='yyy'
绑定事件监听
1）功能: 绑定指定事件名的回调函数
2）完整写法:
v-on:keyup='xxx'
v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
3）简洁写法:
@keyup='xxx' @keyup.enter='xxx'
计算属性和监视
计算属性
1）在 computed 属性对象中定义计算属性的方法
2）在页面中使用{{方法名}}来显示计算的结果
监视属性
1）通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
2）当属性变化时, 回调函数自动调用, 在函数内部进行计算
计算属性高级
1）通过 getter/setter 实现对属性数据的显示和监视
2）计算属性存在缓存, 多次读取只执行一次 getter 计算
class 与 style 绑定
1）在应用界面中, 某个(些)元素的样式是变化的
2）class/style 绑定就是专门用来实现动态样式效果的技术
class 绑定
1）:class='xxx'
2）表达式是字符串: 'classA'
3）表达式是对象: {classA:isA, classB: isB}
4）表达式是数组: ['classA', 'classB']
style 绑定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 属性
列表渲染
列表显示指令
数组: v-for / index
对象: v-for / key
列表的更新显示
删除 item
替换 item
列表的高级处理
列表过滤
列表排序
事件处理
绑定监听:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(参数)"
4）默认事件形参: event
5）隐含属性对象: $event
事件修饰符
1）.prevent : 阻止事件的默认行为 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
按键修饰符
1）.keycode : 操作的是某个 keycode 值的键
2）.keyName : 操作的某个按键名的键(少部分)
表单输入绑定
使用 v-model 对表单数据自动收集
1）text/textarea
2）checkbox
3）radio
4）select
