Vue的实用主义全解What'sinoptionsVue(options)，options包含五类属性数据：data、props、propsData、computed、methods、watchdom：el、template、render、renderError生命周期hooks:beforeCreate,created,beforeMount,mounted,beforeUpdate,Updated,activated,deactived,beforeDestroy,destroyed,errorCaptured资源：directives,filters,componentscomposition:parent,mixins,extends,provide,inject其他：暂时没看到。基本属性el-挂载点用法：newVue({el:'#app'})等同于：newVue().$mount('#app')data-内部数据用法：data:{...}/data(){return{...}}支持函数和对象形式，推荐函数写法-方法事件处理或常用函数组件-组件使用：importCpnform'./Cpn.vue'...newVue({components:{abc:Cpn}template:``...})其他组件导入方法：在页面中创建组件：//第一个参数为组件名称，第二个参数为vueinstanceoptionsVue.component("Abc",{template:"
n
"...})前两个的组合newVue({components:{Abc:{template:``,methods:{}...}}})命名规则：组件一般以大写字母开头。lifehook:created(){...}当实例出现在内存中时调用mounted(){...}//当实例出现在页面中时调用updated(){...}//当实例出现在页面中时调用实例数据更新destroyed(){...}//实例销毁时调用props:定义：自定义组件的属性使用方法：//Demo组件内部：exportdefault{props:['counter']//也可以传入回调函数}//在main.js中：template:`
`注意：如果要给自定义组件的属性赋值变量，需要添加一个冒号“：”在它之前。例如：//inmain.js...data:{n:5}template:`
`高级属性计算-计算属性语法：data:{firstName:'Oliver',lastName:'Young'}computed:{//相当于只getmethodName(){returnthis.firstName+this.lastName}}computed:{Name:{get(){returnthis.firstName+this.lastName}set(value){this.firstName=value}}}优点：简化代码，避免重复，方便修改内置缓存功能：如果依赖的属性没有变化，则不会重新计算何时使用：如果一个数据依赖在其他数据上，使用computedwatch-监听目的：当数据改变时，调用一个函数语法：1.```watch:{o1:function(newVal,oldVal){},//newVal和oldVal是o2(){},//es6语法o3:[f1,f2]//依次执行f1和f2o4:{handler(){//处理函数},deep:true/false,//见下面解释immediate:true/false//是否第一次执行},o5:'callbackName',//回调函数ion，写在methods"obj.a":function(){}//监听obj的属性}```2.`vm.$watch('obj',fun,{deep:true})`What是“变”？简单类型：当值改变时，它就改变。复杂类型（object）：只有地址改变了，它才改变。比如：本来是obj:{num:1}，后来重新赋值给obj:{num}:1，又分配了新的内存，所以变了。当deep=true时，改变obj.a也意味着obj改变了。computedV.Swatchcomputed：计算属性；看：听。computed：调用时不需要加括号()，会自动缓存。如果依赖项未更改，则不会重新计算。watch：如果被监控的属性发生变化，执行回调。Vue框架会传递两个参数给回调，分别是newValue,oldValueimmediate：第一次渲染时是否监听。deep:监听一个对象时是否监听对象中属性的变化{{n}}
//main.jsconstvm=newVue({el:'#app',data(){return{n:0}},methods:{add(){this.n+=1}}})写在选项中（vue完整版）//index.html
