vue知识点（1）

处理用户输入

v-on指令添加一个事件监听器

div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

组件化应用构建

Vue.component('todo-item',{
	//todo-item组件现在接受一个
	//"prop",类似于一个自定义特性。
	props:['todo'],
	template:'<li>{{todo.text}}</li>'
})

组件的应用模板

<div id="app">
	<app-nav></app-nav>
	<app-view>
		<app-sidebar></app-sidebar>
		<app-content></app-content>
	</app-view>
</div>

一个todo应用的组件树

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

数据与方法

Object.freeze()

• 阻止修改现有的属性，也以意味着响应系统无法再追踪变化

    var obj = {
      foo: 'bar'
    }
  
    Object.freeze(obj)
  
    new Vue({
      el: '#app',
      data: obj
    })
    <div id="app">
      <p>{{ foo }}</p>
      <!-- 这里的 `foo` 不会更新！ -->
      <button @click="foo = 'baz'">Change it</button>
    </div>
  

模板语法

插值

文本

• 数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值

Message:{{msg}}

• Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

原始HTML

• 双大括号会将解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令
  
  html

    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  

指令

v-bind修饰符

• .prop被用于绑定DOM属性（property）
• .camel (2.1.0)将kebab-case特性名转换为canmeCase(从2.1.0开始支持)
• .sync(2.3.0)语法糖，会扩展成一个更新父组件绑定值的v-on侦听器

参数

• 一些指令能够接收一个“参数”，在指令名称以后以冒号表示

• v-bind指令可以用来响应式地更新HTML属性

    <a v-bind:href="url">...</a>
    //在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
  

v-bind缩写

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

    <!-- 缩写 -->
    <a :href="url">...</a>

• v-on指令，它用于监听dom事件

    <a v-on:click="doSomething">...</a>
    //在这里参数是监听的事件名
  

v-on缩写

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

    <!-- 缩写 -->
    <a @click="doSomething">...</a>

计算属性和侦听器

计算属性

计算属性reversedMessage

• 我们提供的函数将用作属性vm.reversedMessage的getter函数

    console.log(vm.reversedMessage) // => 'olleH'
    vm.message = 'Goodbye'
    console.log(vm.reversedMessage) // => 'eybdooG'
  

• vm.reversedMessage的值始终取决于vm.message的值

计算属性的setter

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

    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

class与style绑定

绑定HTML Class

对象语法

• 三元表达式

    <div v-bind:class="[isActive ? activeClass : '',errorClass]"></div>
  

• 这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。

• 不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

    <div v-bind:class="[{ active: isActive }, errorClass]"></div>