vue 学习第一天

1.实例：

var vm = new Vue({
    el: '#example',
    data: {
        a:1
    },
    created: function () {
    // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
    }
})    
vm.a === data.a // -> true    
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

2.数据绑定：

1）文本

    <span>Message: {{ msg }}</span> //加载时会出现{{}}，不推荐

　　<div>{{{ raw_html }}}</div>  //raw_html是html时

　　<p v-html="msg"></p> 

　　<p v-text="msg"></p>

　　<span v-once>这个将不会改变: {{ msg }}</span>

2)指令

<button v-bind:disabled="isButtonDisabled">Button</button>
<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">...</a>    <a :href="url">...</a>//缩写
<a v-on:click="doSomething">...</a>  <a @click="doSomething">...</a>  //缩写
<form v-on:submit.prevent="onSubmit">...</form>

3.方法：

computed

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果：

Original message: "Hello"

Computed reversed message: "olleH"

vm.reversedMessage 的值始终取决于 vm.message 的值，当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

和watch区别：https://blog.csdn.net/smartdt/article/details/75557369

猜你喜欢