MVVM框架
view:视图 DOM,viewmodel:通讯 观察者,Model:数据 js对象。
提供基础的架构抽象,通过AJAX数据持久化,不会造成整个页面刷新保证前端用户体验。
Vue.js
-
轻量级MVVM框架只有20kb
-
数据驱动+组件化前端开发
组件化
每个页面组件对应一个viewModel,生成的viewModel对应一个dom。
组件设计原则
页面上每个独立的可视/可交互区域视为一个组件;每个组件对应一个工程目录,组件需要的各种资源在这个目录下就近维护;组件可以嵌套自由组合形成完整的页面。
入门
Vue实例
数据与方法
- $watch(‘a’,function(newVal,oldValue)) //在a改变后记录a的新值和旧值
- Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀
$
,以便与用户定义的 property 区分开来 - 模板语法要有根标签
模板语法
- 文本,原始HTML,Attibute,js表达式
指令
- 修饰符;v-bind和v-on的缩写
计算属性和侦听器
- 和方法相比,只有message的值发生改变时才使用计算属性,否则返回原来的值不需要重新计算
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
条件渲染
v-show和v-if,如果需要频繁的切换采用前者,如果只在初始化的时候进行判断,以后不怎么判断采用v-if
实践监听
- 使用$event获得原生的dom元素