vue day1+2

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
}]