vue MVVM框架
渐进式框架
框架 vue
有一定的规范规,定一些功能放置的位置,主动权在框架手里,开发者安装框架规定的地方,写代码,框架主动调用代码。
库 (jq undescore lodash)
主动权在开发者手中,库只提供一堆的函数(API)开发者主动调用API完成功能,取决于开发者组织代码
俩个核心点
1、响应式的数据定义
vue中模板 写的HTML作为模板
启动应用
new Vue({}/选项对象) 选项对象作用就是告诉Vue要做什么
new Vue({
el:
data:{},
methods:{//定义在模板中的方法或者事件,写在这里
方法名(){
this指向实例
}
}
})
data中methods中的属性会挂载到实例上
指令的作用
是把dom结构和数据结合起来
数据更新的时候dom会自动更新
不同的指令有不同的作用
指令以 v-开头vue会解析不同的作用写的位置是在行间
v-bind 在行间动态绑定数据 简写为 :
v-for 用来根据数据循环数据个DOM元素 放在需要重复生成到的标签上
语法:v-for="item in 数组" item变量随便写用来接收循环数据的每一项
v-if 控制一个元素是否渲染
语法:v-if =“表达式”如果表达式为false不渲染true渲染
v-if 和 v-else 中间不能加东西
注:如果表达式频繁的切换true和false,会频繁的把DOM元素从界面中移除和加入,消耗性能
v-show 控制元素是否隐藏,不控制显示 display:none
频繁切换一个元素显示隐藏用v-show
v-on: 绑定事件,作用在需要绑定事件的元素上 简写为 @
语法:v-on:事件=“表达式、事件处理函数(参数,$event)”
拿事件对象$event
虚拟DOM
声明式 不需要关心具体的实现,只需要告诉他做什么事情
命令式 每一步如何实现都要写出来
改变样式
1、class
2、style
属性
属性的特性:是否可改写,可遍历,
Object.defineProperty(对象,属性,描述对象)
定义对象属性,可以添加新的属性,也可以改已有的属性
描述对象{
writable 是否可以改写 false
configur
}
2、可组合的组件