vue相关知识

数据双向绑定的原理

<template>
  <input type="'text'" name="" :value="msg" @input="change" id="">
    {{msg}}
</template>
<script>
 data () {
    return {
      msg:""
    }
  },
   methods: {
    change(event){
      this.msg=(event.target.value)
    }
  }
</script>

$set $delete 给一个数据追加或者删除一个响应式属性

当添加属性的时候页面也会同样的渲染

this.$set(this.person,'sex','nv')
this.$delete(this.person,'sex')
//数组还可以用splice
import Vue from 'vue'
Vue.set(this.person,'sex','nv')
Vue.delete(this.person,'sex')

watch

监听器
需要监听那个值得变化，就写那个值。

 data () {
    return {
      msg:"",
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
    }
  },
 watch: {
    firstName{
     handler(newvalue,oldvalue) {
      this.fullName = newvalue + ' ' + this.lastName
      console.log(newvalue,oldvalue);

},
	immediate:true,
	//深度监听
	deep:true

    },

深度监听，因为js的缘故 ，vue不能监听到对象的添加或删除。
注销watch，路由跳转时要添加或者删除watch。app.$watch

wepack：前端模块化打包工具

与grunt、gulp的区别
grunt/gulp更加强调前端流程自动化，模块化不是他的核心
webpack更加强调模块化开发管理，然而文件压缩合并、预处理等功能，是它附带的功能。
webpack以来node

webpack的安装

安装webpack 首先要安装node.js ,node 自带软件包管理工具npm node package manager
node 不能小于8.9（指定版本号为3.6.0，因为cli2依赖该版本）

全局安装和局部安装的区别

不论在那个终端中都是全局，
package.json 中scripts定义脚本就是局部的

vue3

ref

###使用这种方法才能实现响应式