1)Vue简介
Vue2/3
MVVM
m model
数据模型,data[数据state]
v view
视图,模板,template
数据绑定事件绑定
v-bind v-on
vm viewmodel(封装dom)
2)Vue实例
一个模块是HTML/css/js的一个完整功能单元
Vue实例代理了data中以及methods中变量的访问
vm.状态data中声明的属性
vm.方法methods中声明的方法
根组件(模块)
let options = {
data:{},
methods:{ },
created(){
this
},
...,
watch:{
msg(){
this
}
},
computed:{
students_male(){
this
}
}
}
let vm = new Vue(options)//产生实例,在方法里用vm
组件(模块)
let options = {
data:function(){
return {}
},
methods:{
},
created(){
}
}
Vue.component('my-info',options)
3)渲染
将状态显示到视图中 model–》view
1.双大括号
可以存在任意变量或者表达式
变量
{{msg}} // data:{msg:‘hello’}
方法
{{foo()}} // 方法调用 methods:{foo(){}}
表达式
{{JSON.stringify(obj)}} // data:{obj}
{{msg?msg:‘hello’}} // data:{msg:’’}
…
2.指令
v-on:eventType.事件修饰符=‘事件处理函数’ // 事件绑定
v-if=""
v-else-if
v-else
不存在于dom树中,创建节点插进去
v-show display实现隐藏
v-model双向数据绑定【通常应用在表单元素中】
1.将msg的值作为input的默认值
2.用户如果操作了表单,v-model会将表单元素中的值映射到msg中
v-bind:model=""【通常应用在form中】
v-html
将HTML输出并且解析
4)生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroyed
destroyed
5)双向数据绑定
v-model,在表单中
6)事件
v-on:click =“事件处理函数”
v-on:click.事件修饰符 =“事件处理函数”
v-on:click.事件修饰符 =“事件处理函数(传参)”
7)计算属性与监听器
1.计算属性
1)定义
{
data:{
students:[]
}
computed:{
students_male(){
// 对data数据进行计算后输出
return this.student.filter()
}
}
}
2)调用
就像属性一样被调用,不加括号
3) 特性
多次调用同一个计算属性,计算属性函数会执行一次
当被计算的属性发生变化时,计算属性函数会重新执行
2.监听器
1)定义
{
data:{
msg:’’,
obj:{}
},
watch:{
msg(newVal,oldVal){
},
obj(newVal,oldVal){
},
}
}
问题 - 选项
options:[{
id:1,
name:“hello”,
child:null
},{
id:2,
name:“hello”,
child:null
},{
id:3,
name:“hello”,
child:null
}]