学习Vue框架第一天心得

1.Vue是什么？

Vue是渐进式的js框架，也是一个MVVM的js框架 。
	所谓渐进式就是他的使用方式，用到什么功能，只需要引入声明功能模块就可以了。这些功能是相互独立的。		
下图为vue的所有部件

2.vue能干什么？

• 管理数据，简化操作
• 摒弃到DOM操作

3.vue的特点？

• 易用(使用成本低)
• 灵活(生态系统完善)
• 高效（体积小 性能高 优化好）

4.mvc设计模式和mvvm设计模式

• mvc的设计模式 设计项目逻辑
  • m:model 数据模型层
  • v:view 视图层
  • c:controller 控制器 业务逻辑
  • controller作用：调用m层的数据，在v层显示
• 下图是他们的通信方式
  

• 视图层传达指令到controller
• controller完成业务逻辑之后，要求model改变状态
• model将新的数据，发送到视图层，用户的到反馈

• 什么是mvvm设计模式呢？
  • m：model
  • v：view
  • vm：viewmodel
• 下图他们的通信方式
  

• 在ViewModel当中会有一个叫 Binder的东西，当ViewModel对Model进行更新的时候，Binder会自动把数据更新到View上 去；当用户对View进行操作（例如表单输入），Binder也会自动的把数据更新到Model上去。这种方式称为：Two-way data-binding，双向数据绑定。

问题：model层数据变化的时候，为什么vm就可以知道数据发送了变化啊？

• 即让你回答：vue的双向数据绑定的原理?
• vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineproperty的方法，为数据动态添加getter和setter方法，当获取数据的时候，会触发getter方法，当设置数据的时候，会触发setter方法，当setter方法触发完成时，会进一步触发watcher，当数据改变，视图更新完毕。
• 他的底层逻辑就是.：
  • 先设置一个全局变量，当他获取对象属性的时候走get方法，get方法返回这个全局变量，当他设置对象属性的时候走set方法，set方法接收一个val值，将val赋值给全局变量，当他再次获取对象属性的时候调用get，get返回全局变量，值就改变了

• 下面是这个底层逻辑实现的代码

let obj = {}
    let middel = 100
    Object.defineProperty(obj,"msg",{  //给那个对象添加，添加什么属性，配置项 写方法
        get(){
            console.log("get方法执行")
            return middel
        },
        set(val){
            console.log("set方法执行",val)
            middel = val
        }
    })
    console.log(obj.msg);// 获取对象属性的时候，调用get   100
    obj.msg = 1111// 设置对象属性的时候，调用set     //set执行了，1111
    console.log(obj.msg);	//1111

5.如何创建一个Vue实例？

var vm = new Vue({
	el:"#app",//是一个挂载点 将vue实例具体运用到哪一个DOM元素上
	data:{ //我们需要vue帮我们管理的数据
		msg:"hello world"
	}
})

6.v-for v-on 和 修饰符

• v-for
  • 实例data里面的数据可以是任意类型
  • undefinde，null在{{ }}里面是没有办法渲染出来的
  • {{ }} 这个里面只能写表达式 不能写if之类的语句 可以写三元表达式 {{ 3>2? “大于”:“小于” }}
  • v-for 不仅可以遍历数组，还可以遍历对象
    • 遍历数组 一个值为数组里的每一项 一个是索引
    • 遍历对象 一个值是value 一个是key 一个是索引
  • v-开头的称之为vue的指令 指令的作用是用来操作DOM
  • 如果要进行多标签循环，不想形成新的标签，外面套template
• v-on
  • v-on可以用来绑定事件
  • v-on:click/keyup ===> @click/@keyup 简写格式
• 事件修饰符
  • .stop 阻止事件冒泡
  • .prevent 阻止浏览器默认行为
  • .once 只会触发以从
  • .self 只会自身触发
• 按键修饰符
  • .enter 回车
  • .tab
  • .delete
  • .esc
  • .space
  • .up
• html代码展示

<div id="app">
    <ul @click="clickul">        <!-- clickul是一个函数方法，要写在methods配置项里面  -->
        <li @click.stop="clickli">11111</li>		 <!-- 绑定了点击事件，后面跟的是事件修饰符，阻止冒泡  -->
    </ul>
</div>

//首先创建一个vue实例
var vm = new Vue({
	el:"#app",
	data:{
		
	},
	method:{
		clickul(){
			alert("这个ul被点击了")
		},
		clickli(){
			alert("这个li被点击了")
		}
	}
})

7.数组更新检测

• 变异方法 =>在原生js中对原数组产生影响的
• vue将被侦听的数组的变异方法进行了包裹，所以他们也会触发视图的更新，这些方法有：
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

• 由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
  • 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
    • vue.set(目标,索引,新的值)
    • vm.items.splice(索引,替换/删除的长度,新的值)
  • 当你修改数组的长度时，例如：vm.items.length = newLength
    • vm.items.splice(newLength)

• 下面html代码演示

div id="app">
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <p>{{user}}</p>
    </div>

//创建一个实例
var vm = new Vue({
        el:"#app",//挂载
        data:{
            arr:[1,2,3],
            user:{
                name:"张三"
            }
        }
    })
     vm.arr.push(4)//我们更改的数据以后，视图会自动更新 在页面中显示1.2.3.4

     vm.arr[2] = 30  //这样根据下标改值不可以
     Vue.set(vm.arr,2,30)   //1-1
    
     vm.arr.splice(2,1,300)  //1-2

     vm.arr.length = 2 //这样修改数组长度不可以
     vm.arr.splice(2)  //这样可以 ，当这个方法传一个值表示数组的长度

    //后续给一个对象添加一个新的属性。如果视图也想同时渲染最新的属性。那么要通过vue.set()方法
     Vue.set(vm.user,"gander","男")//可以直接动态添加   参数1：目标 参数2：要添加的key 参数三：要添加的value

8.vue版购物车思路

给添加按钮绑定一个方法，方法写在methods里面，方法里一个对象，获取到我们输入的值，然后将他push到data里面，然后通过个体tbody里的tr绑定 v-for="(product,index) in products" ，在通过product.属性，将他添加到表格中， 给按钮绑定点击事件，等于一个方法，方法里面写逻辑。
v-bind:class="{red:!product.is_shelf} 改变他的类名 当他不是true的时候为red这个类名