vue学习过程总结（03） - 菜鸟教程归纳

1.模板语法

　　1.1.文本插值，数据绑定。{{}}，如：

 <p>{{ message }}</p>

　　1.2.输出HTML代码。v-html，如：

 <div v-html="message"></div>

　　1.3.HTML属性值绑定。 v-bind，如：

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

　　缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

　　1.4.判断指令。v-if，如：

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

　　1.5.监听DOM事件。 v-on，如：

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

　　1.6.双向数据绑定。v-model，用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。如：

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

　　1.7.if else指令：v-if, v-else；　else if指令：v-if, v-else-if, v-else;

　　1.8.使用 v-show 指令来根据条件展示元素。如：

<h1 v-show="ok">Hello!</h1>

　　1.9.循环使用 v-for 指令。可以用来迭代数组，对象，整数如：

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

　　1.10.计算属性。computed，如：

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

computed与methods的区别：我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

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

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';

　　1.11.v-bind:class= 与 v-bind:style=　　https://www.runoob.com/vue2/vue-class-style.html

2.修饰符

　　2.1.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。. （半角句号）。如：

<!--event.preventDefault() 阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。-->
<form v-on:submit.prevent="onSubmit"></form>

　　2.2.事件修饰符。

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。如：.stop/.prevent/.capture/.self/.once

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

　　2.3.按键修饰符。

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

.enter/.tab/.delete(捕获 "删除" 和 "退格" 键)/.esc/.up/.down/.left/.right/.ctrl/.alt/.shift/.meta

3.过滤器

　　3.1.过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

<div id="app">
  {{ message | capitalize }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

 4.监听属性。

　　4.1.Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。如：

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(newval, oldval) {
    alert('计数器值的变化 :' + oldval + ' 变为 ' + newval + '!');
});
</script>

Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，监听数值counter，如果发生改变则弹出提示框。