Vue 是什么?
Vue (读音 /vjuː/, 类似于 view)
Vue是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。
另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用提供驱动。
- Vue 有很多特点和 Web 开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟 DOM
Vue 实例
new Vue(options)
options = {
el: "value" // "value - 元素选择器" 进行数据绑定(实际上调用了$mount())
data: {
// 数据
// 实例对象可直接使用Object的方式定义数据
// 组件必须通过return一个Object的方式来定义数据
},
computed: {
// 计算属性
// 优点:
// 在template中调用时可省略"()", 即调用get函数
// 当不发生set时, 每次get都不会重新计算, 效率提高
attr: {
set: function(newValue) {}
get: function() {}
}
}
methods: {
// 方法
// 在template中使用时需要"()"来调用
attr: function() {}
},
filters: {
// 过滤器方法:
// 使用时: data | function, 会自动把 data 作为参数传入 function 中
attr: function(data) {}
},
components: {
// 局部组件:
// "组件标签名": 组件构造器
},
watch: {
// 监听Vue中数据发生改变的事件
attr(newValue, oldValue) {
}
},
/** 以下均为 生命周期函数 **/
created() {
// 当组件被创建后回调该函数
// 注意: 组件被创建后DOM并不一定创建完成, 即不能在created中操作DOM元素
},
mounted() {
// 当组件的template挂载到DOM之后回调该函数
},
updated() {
// 当页面发生更新后回调该函数
},
destroyed() {
// 组件销毁后回调
}
}
生命周期
lifecycle.png
lifecycle-hooks.png
计算属性详细
在
template中使用时不需要(), 会默认调用get函数使用时
attr即调用get方法, 为attr赋值即调用set方法计算属性一般没有
set方法, 所以计算属性也称只读属性
即可以简写:
computed: {
attr: function() {}
/** 或以下 es6 语法 **/
attr: () => {}
}
computed 和 methods 的对比
- computed 的属性如果没有变化, 则 computed 有缓存, 即 computed 只执行一次, 而 methods 没有缓存, 调用几次执行几次
- 相比之下, 如果某个元素
get比较多的话推荐使用computed - 反之, 如果逻辑比较复杂, 那么使用methods
- 相比之下, 如果某个元素
