Vue的Options用法说明
el：挂载点
与$mount有替换关系
newVue({
el:"#app"
});
newVue({}).$mount('#app')
注：被你选为挂载点的那个元素，如果在index.html里那个元素里面本来就有内容，在渲染时会消失（网速慢可以看到），被这个vue实例的对应内容所覆盖。
data：内部数据
支持对象和函数，优先用函数
newVue({
//优先使用函数
data(){
return{
n:0,
}
}
}).$mount("#app");
注：能写函数尽量写函数，否则有可能有BUG；
methods：方法
事件处理函数
newVue({
data(){
return{
n:0
}
},
template:`
{{n}}
+1
`,
//add必须写到methods里面
methods:{
add(){
this.n+=1
}
}
}).$mount('#app')
普通函数：methods代替filter
importVuefrom"vue";
Vue.config.productionTip=false;
newVue({
data(){
return{
n:0,
array:[1,2,3,4,5,6,7,8]
};
},
template:`
{{n}}
+1//事件处理函数
{{filter()}}//普通函数(JS的filter直接在视图里调用，每一次更新渲染都会调用一次)
`,//主动在模板里面调用
methods:{
add(){
this.n+=1;//事件处理函数
},
filter(){
returnthis.array.filter(i=>i%2===0);//普通函数
}
}
}).$mount("#app");
components：方法
使用Vue组件，注意大小写
（建议用法）模块化：
新建一个vue文件Demo.vue，这个vue文件就是一个组件
在main.js中引入这个vue文件
在vue实例的components中声明这是我要用的组件，并且命名为Demo
这样在这个Vue实例的template中就可以直接使用这个组件
importVuefrom"vue";
importDemofrom"./Demo.vue";//引入这个vue文件---文件名最好小写组件名最好大写
Vue.config.productionTip=false;
newVue({
components:{
Demo//在vue实例的components中声明这是我要用的组件，并且命名为Demo
//如果组件名就叫Demo，即Demo：Demo，那就写Demo--ES6缩写
//components:{Demo},
},
data(){
return{
n:0
};
},
template:`
{{n}}
+1
//这样在这个Vue实例的template中就可以直接使用这个组件``
`,
methods:{
add(){
this.n+=1;
},
}
}).$mount("#app");
四个钩子
created--实例出现在内存中后触发
created(){
debugger
console.log('这玩意出现在内存中')
},
mounted--实例出现在页面中（挂载了）后触发
mounted(){
debugger
console.log('这玩意儿已出现在页面中')
},
updated--实例更新了后触发
updated(){
console.log('更新了')
console.log(this.n)
},
//当你+1的时候，能证明他在更新的时候触发,还可以拿到最新的n
destroyed--实例从页面和内存中消亡了后触发
props：外部属性
外部来传值
message="n"传入字符串
:message="n"传入vue实例的this.n数据
:fn="add"传入vue实例的this.add函数
示例
补充知识：vue$options初始化
vue实例化时，对$options进行初始化
vue/src/core/instance/init.js
Vue.prototype._init=function(options?:Object){
constvm:Component=this
//auid
vm._uid=uid++
letstartTag,endTag
/*istanbulignoreif*/
if(process.env.NODE_ENV!=='production'&&config.performance&&mark){
startTag=`vue-perf-start:${vm._uid}`
endTag=`vue-perf-end:${vm._uid}`
mark(startTag)
}
//aflagtoavoidthisbeingobserved
vm._isVue=true
//mergeoptions
if(options&&options._isComponent){
//optimizeinternalcomponentinstantiation
//sincedynamicoptionsmergingisprettyslow,andnoneofthe
//internalcomponentoptionsneedsspecialtreatment.
initInternalComponent(vm,options)
}else{
//初始化$options
vm.$options=mergeOptions(
resolveConstructorOptions(vm.constructor),
options||{},
vm
)
}
/*istanbulignoreelse*/
if(process.env.NODE_ENV!=='production'){
initProxy(vm)
}else{
vm._renderProxy=vm
}
}
}
以上这篇Vue的Options用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
