废话不多说,直接上干货
vue的核心:修改数据(model),html节点就会自动更新
(1)绑定数据:
Js代码
- 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代码:
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)动态更新数据
Js代码
- var updateData2= function () {
- vm.$data.message="更新后的数据"+(count++);
- vm.$data.ok=false;
- };
如何获取vue的data?
注意:data前面要加$
(3)vue表达式
Html代码
- {{ number + 1 }}<br>
- {{ ok ? 'YES' : 'NO' }}<br>
- {{ message.split('').reverse().join('') }}<br>
- {{ name | uppercase }}
动态修改样式:
Html代码
- <input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >
在js方法中修改ok的值即可
(4)vue计算属性
Js代码
- 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代码:
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
