Vue.js笔记

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

本教程基于 Vue 2.1.8 版本测试。

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

Webpack 入门教程：http://www.runoob.com/w3cnote/webpack-tutorial.html

官方文档：http://vuejs.org/v2/guide/syntax.html

中文文档: https://cn.vuejs.org/v2/guide/syntax.html

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值，使用 v-html 指令用于输出 html 代码：

<div id="app">
    <div v-html="message"></div>
    <div >{{message2}}</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程2</h1>',
    message2: '<h1>菜鸟教程2</h1>'
  }
})
</script>

结果：

菜鸟教程2

<h1>菜鸟教程2</h1>

属性

HTML 属性中的值应使用 v-bind 指令。

<style>
.class1{
background: #444;
color: #eee;
}
</style>

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
    directiva v-bind:class
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      class1: false
  }
});
</script>

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

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

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">