脚本宝典收集整理的这篇文章主要介绍了Vue笔记(二)——实例化基本属性,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
实例元素指的是Vue实例化时编译的容器元素,或者说是Vue作用的元素容器
<div id="app"></div>
let vm = new Vue({
el:'#app' // 或者是其他选择器:.app;
)
如果有多个相同的实例元素则只有第一个起效
也可以在实例化的时候不指定实例元素,后面用 $mount() 手动进行挂载
<div id="app"></div>
let vm = new Vue({
// option
})
vm.$mount('#app')
可以通过实例获取实例元素
let vm = new Vue({
el:'#app'
});
<!-- 获取实例元素 -->
console.log(vm.$el);
在MVVM模式种充当着M数据模型层,更多的体现于将M层映射到V层
let arr = [{name:'fhj',age:18}];
let vm = new Vue({
el:'#app',
data:{
dataset:arr// 数据模型层
}
})
也可以通过实例获取数据对象
let vm = new Vue({
el:'#app',
data:{}
});
<!-- 获取数据模型层-data -->
consele.log(vm.$data);
元素可以通过 v-on: 事件 || @事件 进行绑定事件,事件中的this默认指向实例vm
<div id="app">
<input type="button" v-on:click="handle" />
<span>{{count}}</span>
</div>
let vm = new Vue({
el:'#app',
data:{
count:0
},
methods:{
handle(){
this.count += 10;
}
}
});
在js的事件中默认会有个event对象,Vue在事件上对event对象进行继承二次封装,改名为$event,在事件当中默认传过去
<div id="app">
<input type="button" @click="handle(10,$event)"/>
<span>{{count}}</span>
</div>
let vm = new Vue({
el:'#app',
data:{
count:0
},
methods:{
handle(n,event){
this.count += n;
event.target.setAttribute('disabled',true);
}
}
});
computed 主要针对 data 的属性进行操作,this默认指向实例vm;
<div id="app">
<!--调用了 fullName.get()-->
<p>{{fullName}}</p>
<input type="text" v-model="newName">
<!--changeName 事件改变了 fullName 的值,所以会自动触发 fullName.set()-->
<input type="button" value="changeName" @click="changeName">
</div>
var vm = new Vue({
el: '#app',
data: {
firstName:'DK',
lastName: 'Lan',
newName: ''
},
computed: {
fullName:{
get: function(){
<!-- 获取属性值显示在V层 -->
return this.firstName + '.' + this.lastName
},
set: function(newValue){
<!-- 接收设置的值 -->
this.firstName = newValue
}
}
},
methods: {
changeName: function(){
<!-- 设置fullName的值 -->
this.fullName = this.newName;
}
}
})
自定义指令和定义组件的方式很类似,也是有全局和局部指令之分
<div id="app">
<!-- 使用指令 -->
<input type="text" v-fhj/>
</div>
注册一个全局自定义指令,v-fhj 指令名称不用加前缀
Vue.directive('fhj',function(ele){// 为宿主元素
// 默认触发钩子函数
ele.value = 'jj';
ele.focus();
});
<div id="app">
<!-- 使用局部指令 -->
<input type="text" v-prative/>
</div>
let vm = new Vue({
el:'#app',
<!-- 自定义指令属性 -->
drectives:{
privat:function(ele){
ele.style.value='fhj'
}
}
});
以上是脚本宝典为你收集整理的Vue笔记(二)——实例化基本属性全部内容,希望文章能够帮你解决Vue笔记(二)——实例化基本属性所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。