Vue-基础

看Vue文档整理笔记，便于自己学习  

---

目录

1、模板语法 

2、计算属性和侦听器 

 计算属性：computed声明一个计算属性reversedMessage

方法：methods

侦听属性：watch有一些数据需要随着其它数据变动而变动时使用

计算属性的 setter，计算属性默认只有 getter，需要时可以提供一个 setter

侦听器：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

3、Class 与 Style 绑定

绑定 HTML Class

style绑定内联样式

4、条件渲染

v-if：指令用于条件性地渲染一块内容。

v-show：用于根据条件展示元素

v-if 和 v-show 区别

 

---

1、模板语法 

v-bind：绑定HTML 特性，<h2 v-bind:title="title"></h2>。布尔特性：<button v-bind:disabled="isButtonDisabled">Button</button>，如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。

v-if：条件，如：<p v-if="bool">是否显示</p> 

v-for：循环数据，如：<p v-for="arr in arrs">{ { arr.attr }}</p> 

v-on：事件,如：<button v-on:click="function">点击</button> 

v-model：实现表单输入和应用状态之间的双向绑定，如：<p>{ { message }}</p> <input v-model="message">

v-once：一次性的插值，当数据改变时内容不会更新，如： <span v-once>这个将不会改变: { { msg }}</span>

v-html：输出html，如：<span v-html="rawHtml"></span>---- rawHtml='<span style="color: red">This should be red.</span>'

使用 JavaScript 表达式，每个绑定都只能包含单个表达式：如：{ { number + 1 }}，{ { ok ? 'YES' : 'NO' }}，{ { message.split('').reverse().join('') }}，<div v-bind:id="'list-' + id"></div> 

动态参数：<a v-bind:[attributeName]="url"> ... </a>。attributeName 会被作为一个 JavaScript 表达式进行动态求值

<a v-on:[eventName]="doSomething"> ... </a>。当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

修饰符：修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：<form v-on:submit.prevent="onSubmit">...</form>

缩写：

v-bind 缩写：v-bind:href=""  -> :href=""

v-on 缩写：v-on:click="doSomething"  -> @click="doSomething"

2、计算属性和侦听器 

 计算属性：computed声明一个计算属性reversedMessage

<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"

 像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。

方法：methods

<p>Reversed message: "{
   { reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

 计算属性与方法的区别：计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结