vue.js 入门精要
废话不多说,直接上干货
vue的核心:修改数据(model),html节点就会自动更新
(1)绑定数据:
var vm; var count=1; $(function () { vm=new Vue({ el: '#demo', data: { message: 'Hello World!', number: 2, ok:true, name:'whuang' } }); vm.$watch('data', function (newVal, oldVal) { console.log('$watch'); }) });
html代码:
<div id="demo">
{{ message }}<br>
{{ number + 1 }}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}<br>
{{ name | uppercase }}
<hr>
<input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >
</div>
(2)动态更新数据
var updateData2= function () { vm.$data.message="更新后的数据"+(count++); vm.$data.ok=false; };
如何获取vue的data?
注意:data前面要加$
(3)vue表达式
{{ number + 1 }}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}<br>
{{ name | uppercase }}
动态修改样式:
<input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >
在js方法中修改ok的值即可
(4)vue计算属性
var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // 一个计算属性的 getter b: function () { // `this` 指向 vm 实例 return this.a + 1 }, upper: function () { return "<span style='color:red' >school</span>".toUpperCase(); }, haha: function () { return 'iloveyou'.split(''); } } })
html代码:
<div id="example">
a={{ a }}, b={{ b }}<br>
{{{ upper }}}<br>
{{ haha }}<br>
</div>
(5)监听数据的变化
执行结果:
new:更新后的数据1;old:Hello World!
(6)如何获取vue的节点和数据
节点:vm.$el
数据:vm.$data
(7)