Vue的的Options用法说明用法说明
主要介绍了Vue的Options用法说明，具有很好的参考价值，希望对大家有所
el：挂载点：挂载点
与$mount有替换关系
new Vue({
el: "#app"
});
new Vue({}).$mount('#app')
注：被你选为挂载点的那个元素，如果在index.html里那个元素里面本来就有内容，在渲染时会消失（网速慢可以看到），被
这个vue实例的对应内容所覆盖。
data：内部数据：内部数据
支持对象和函数，优先用函数
new Vue({
//优先使用函数
data() {
return {
n: 0,
}
}
}).$mount("#app");
注：能写函数尽量写函数，否则有可能有BUG；
methods：方法：方法
事件处理函数
new Vue({
data (){
return{
n:0
}
},
template:`
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
`,
//add必须写到methods里面
methods:{
add(){
this.n+=1
}
}
}).$mount('#app')
普通函数：methods代替filter
import Vue from "vue";
Vue.config.productionTip = false;
new Vue({
data() {
return {
n: 0,
array: [1, 2, 3, 4, 5, 6, 7, 8]
};
},
template: `
<div class=red>
{{n}}
<button @click="add">+1</button> //事件处理函数
<hr>
{{filter()}} //普通函数(JS的filter直接在视图里调用，每一次更新渲染都会调用一次)
</div>
`,//主动在模板里面调用
methods: {
评论0