实例

1.数据同步

// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中  ,两者数据保持同步
var vm = new Vue({
  data: data
})
// 他们引用相同的对象！
console.log(vm.a === data.a); //.a === data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
console.log(data.a) // => 2
// ... and vice-versa
data.a = 3
console.log(vm.a) // => 3

　　Vue的属性data可以引用外部对象。数据同步

实例方法：$watch  以$开头的函数

/*
 * Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：
 */
console.log('--------------')
var data2 = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data2
})
console.log(vm.$data === data2) // => true
console.log(vm.$el === document.getElementById('example')) // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
  alert(543);
})
vm.a=123;

 

 

2.实例的生命周期

 

var vue1 = new Vue({
    el:'#div1',
    data: {
      a: 1
    },
    //事件的绑定，成员发生改变
    updated : function(){
        alert('vue1 is updated')
//                        console.log('update..');
    },
    created: function () {
      // this 指向 vm 实例
      alert('vue1 is created')
      console.log('a is: ' + this.a)
    }
});
// => "a is: 1"
$('#btnUpdate').click(function(){
    vue1.a='hello world';
})

 

3.属性绑定

<div id="div2" v-bind:id="dynamicId"></div>

<div id="div1" v-html="msg"></div>     将div标签内的内容加载进去，可以解析

4.表达式解析

<div id="div1">
    {{1==1?'yes':'no' }} <br />
    {{msg}}<br /><br />
    可以使用vue的数据和JS的函数,msg.split(' '),<br />
    变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组<br />
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()<br />
    {{msg.split(' ')}}   <br />
    
</div>

 

5.指令

　　指令 (Directives) 是带有 v- 前缀的特殊属性。
　　指令属性的值预期是单个 JavaScript表达式
　　(v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，
　　将其产生的连带影响，响应式地作用于 DOM。

v-if 可预见性

<div id="div1" v-if="seen">
    指令 v-if
</div><br />

 

v-bind 属性绑定

<div id="div2">
    <a v-bind:href="link">连接到</a>
</div>

 

v-on 时间绑定

<div id="div3">
    <button v-on:click="fun">dosomething</button>
</div>

//另一个例子是 v-on 指令，它用于监听 DOM 事件：
//<a v-on:click="doSomething">
var app3=new Vue({
    el:'#div3',
    data:{
        a:1
    },
    event:{
        fun:function(){
            alert(123)
        }
    }
    
    
});

 

6.计算属性和观察者

计算属性：

　　与函数的区别：

• 不同的是计算属性是基于它们的依赖进行缓存的。
• 如果依赖数据没有改变，那么不在执行函数，直接返回该属性值
• 这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

var vm=new Vue({
    el:'#example',
    data:{
        message:'hello world'
    },
    computed:{
        reversedMessage:function(){
            console.log('setter....')
            return this.message.split('').reverse().join(',');
        }
    },
    methods:{
        //我们可以将同一函数定义为一个方法而不是一个计算属性
        //程序结束时，会被调用一次，利用栈的原理
        fun1:function(){
            console.log('methods fun 被调用了...')
            return 'hello';
        }
    }
});
//这里我们声明了一个计算属性 reversedMessage。
//我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数：
console.log('后'+vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
//如果message发生改变，那么计算属性会重新计算
console.log('后'+vm.reversedMessage) // => 'eybdooG'

 

　　计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

var vm=new Vue({
    el:'#example',
    data:{
        firstName:'bob',
        lastName:'admin'
    },
    computed:{
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
});

 

观察者：

　 watch:

　　question:function(){}

当vue data的属性变量，发生变化时，自动执行watch函数

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: '请输入用户名！'
  },
  watch: {
    // 如果 question 发生改变，这个函数就会运行
    question: function (newQuestion) {
//              this.answer = '等待输入中..'
//alert(newQuestion)
      this.getAnswer()
    }
  },
  methods: {
      getAnswer:function(){
          if(this.question.length<4||this.question.length>10){
              this.answer='用户名长度必须为5-9位';
          }
          else
          {
              this.answer='符合条件'
          }
      }

 

7.绑定class

　　三种方式：

<script>
    // al
    $(function(){
        var app1=new Vue({
            el:'#div1',
            data:{
                isActive:true,
            }
        });
        var app1=new Vue({
            el:'#div2',
            data:{
                isActive:true,
                //可以使用，比较方便
                info:{
                    red:true,
                    size:true
                }
            }
        })
    })
</script>
    </head>
    <body>
        <div id="div1" class="static" v-bind:class="{ active: isActive }"></div>
        可以使用对象
        <div id="div2" class="static" v-bind:class="info"></div>
        数组用法
        <div v-bind:class="[{ active: isActive }, errorClass]"></div>
    </body>
</html>

 

8.列表渲染

数组for

items:[
　　{message:'Foo'},
　　{message:'Bar'}
]

<ul id="ul1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

<ul id="ul2">
  <li v-for="(index,item) in items">
    {{ item.message }}--{{index}}
  </li>
</ul>

 

　　修改data:  vue.items[1]={message:'new values'}

 

对象属性：

data:{
    object:{
        a:'mon',
        b:'admin',
        c:123
    },
    users:[
    {name:'admin',age:'33'},
    {name:'bob',age:'23'}
    ]
}

 

 

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
  <li v-for="(value,key) in object">
    {{ value }} -{{key}}
  </li>
  
  <li v-for="value in users">
    {{ value.name }} -{{value.age}}
  </li>