脚本宝典收集整理的这篇文章主要介绍了初写vue的构造器和属性与方法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<div id="app"></div>
<script>
// 创建构造器
var aa = Vue.extend({
template: '<p>{{firstName}} {{lastName}} 学习 {{alias}}</p>',
data: function () {
return {
firstName: '我正在',
lastName: '努力',
alias: 'Vue'
}
}
})
// 创建 aa 实例,并挂载到一个元素上。$mount()方法手动挂在
new aa().$mount('#app')
</script>
打印结果为:我正在 努力 学习 Vue
<div id="example">{{a}}</div>
<script>
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data:data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
</script>
<div id="watch">
firstName:<input type="text" name="li" v-model="firstName">
<br>
lastName:<input type="text" name="fei" v-model="lastName">
<p>fullName: {{fullName}}</p>
</div>
<script>
//方法
// $watch 是一个实例方法 说白了就是观察一个值得变化(实时监听)
var vm = new Vue({
el: '#watch',
data: {
firstName: 'a',
lastName: 'fei',
fullName: 'a fei'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
</script>
https://github.com/wujian1994...
https://wujian1994.github.io/...
以上是脚本宝典为你收集整理的初写vue的构造器和属性与方法全部内容,希望文章能够帮你解决初写vue的构造器和属性与方法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。