vue渐进式框架，遵守mvvm模型

vue模板语法

(1).插值语法{{}}。

<h1>{{school.name,school.address}}</h1> <!-- 最终展示的是name --> 
<h1>{{(school.name,school.address)}}</h1> <!-- 最终展示的是address --> 
<h1>{{school.name && school.address}}</h1> <!-- 最终展示的是address--> 
<h1>{{school.name ? 1 : 2}}</h1> <!-- 最终展示的是1-->

表达式:能够返回值的式子

原理：js的表达式

 var a = 1
    var b = 2
    var c = 3
    var d = a,b,c
    var e = (a, b, c)
    let f = 5
    const g = 5
    var h = f,g  //Uncaught SyntaxError: Identifier 'g' has already been declared
    console.log(a); //1
    console.log(b); //2
    console.log(c); //3
    // 取第一个值，b，c会被重新声明。但是不会改变原来的值
    console.log(d); //1
    // 取第最后一个值，a, b会被重新声明。但是不会改变原来的值
    console.log(e); //3

2. 运算符||与&&：

(2).指令语法v-。（v-bind、v-moudle、v-on）

v-bind(:)：:、v-bind='{}'
v-moudle：

1.单向数据绑定(v-bind)：数据只能从data流向页面
2.双向数据绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data
3.双向数据绑定一般都是针对表单类元素，v-model:value 可以简写为 v-model，因为v-model默认收集value值。

(3).MVVM模型

1642473115(1).png

(4).数据代理(检测vm._data比检测整个vm效率高)：data->vm_data->vm

vm与vm._data的指向引用时一样的

1. 原理：通过一个对象对另一个对象中属性的操作（读写）

Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

const object1 = {};
Object.defineProperty(object1, 'property1',{
set(nv){   //object1.property1被改变的时候会被触发
console.log(nv) //77
//object1.property1 = 77 // Error: Maximum call stack size exceeded()},
  get(){  //读取object1.property1会返回100
return 100
}});
object1.property1 = 77;
// throws an error in strict mode

2. 简单实现数据代理

关于Vue中的数据代理：配置对象data中的数据，会被收集到vm._data中，然后通过Object.defineProperty让vm上拥有data中所有的属性。
当访问vm的msg时，返回的是_data当中同名属性的值；当修改vm的msg时，修改的是_data当中同名属性的值

<script>
    let vm = {}
    let _data = {msg:'lcl'}
    Object.defineProperty(vm,"msg",{
        set(nv){
            _data.msg = nv
        },
        get(){
            return _data.msg
        }
    })
console.log(vm);   //{msg: 'lcl'}
console.log(_data);  //{msg: 'lcl'}
vm.msg = '123'
console.log(vm);  //{msg: '123'}
console.log(_data); //{msg: '123'}
</script>

3. 为什么要数据代理？

为了更加方便的读取和修改_data中的数据，不做数据代理，就要：vm._data.xxx访问数据，监听整个vm；更高效的监视数据（直接收集到vm上会导致监视效率太低）

(4).v-moudle

1.事件的基本使用：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

2.事件修饰符：可以连写@click.stop.prevent

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；

<div class="demo1" @click="showInfo">
<a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a</div>

showInfo(e){
e.preventDefault()  //阻止默认行为
e.stopPropagation()  //阻止冒泡
alert('同学你好！')

},

once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

3.键盘事件：@click.keyup

原生：

4. 绑定表单

若是：，type="text"/type="radio":则v-model收集的是value值
若是：<input type="checkbox"/>:v-model的初始值是数组，那么收集的的就是value组成的数组
若是：select标签的option标签里面有value那么收集的的就是value的值；没用就是北京标签里面的值

(4).method:直接在vm上面

(5). computed(数据是响应式的):计算属性最终会出现在vm上，直接读取使用即可

1. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 2. get函数什么时候执行？(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。 3. 当值被修改时执行 4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

(6)watch/vm.$watch

1.computed和watch之间的区别：

computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

(7)v-bind

绑定class样式:class="xxx" xxx可以是字符串、对象、数组
绑定style样式:style="{fontSize: size + 'px' }"其中size是data属性
绑定属性

    <div id="root">
        <!-- class的字符串写法，适用于：类名不确定，要动态获取 -->
        <!-- <h2 class="atguigu" :class="myStyle">{{title}}</h2> -->
        <!--class的对象写法，适用于：类名确定，但不确定用不用  -->
        <!-- <h2 class="atguigu" :class="{classB:hasB,classC:hasC}">{{title}}</h2> -->
        <!--class的三元表达式写法，适用于：类名确定，但不确定用不用  -->
        <!-- <h2 class="atguigu" :class="hasB ? 'classB' : '' ">{{title}}</h2> -->
        <!--class的数组写法，适用于：同时应用多个class  -->
        <!-- <h2 class="atguigu" :class="[a,b,c]">{{title}}</h2> -->
        <!-- 绑定style -->
        <h2 class="atguigu" :class="[a,b,c]" :style="{fontSize:size+'px'}">{{title}}</h2>
    </div>

(8)条件渲染

v-if:适用于：切换频率很低的场景。特点：不展示的DOM节点直接被删除
v-show:适用于：切换频率很高的场景。特点：不展示的DOM节点没有被删除，仅仅是使用样式隐藏掉 严重注意：使用v-if的时，DOM节点可能无法获取到，而使用v-show一定可以获取到DOM节点。

(9)列表渲染：v-for

用于展示列表数据。
语法：v-for="(item, index) in arr" :key="item.id"。
可遍历：数组、对象、字符串、数字

vue实例的生命周期(vm-》不是组件)

常用：

mounted：发送ajax,启动定时器，异步
before

尚硅谷vue笔记