vue知识点（1）

处理用户输入

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

div id="app-5">

{{ message }}

逆转消息

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:'

{{todo.text}}

'
})

组件的应用模板

一个todo应用的组件树

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

数据与方法

Object.freeze()

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

  var obj = {
  foo: 'bar'
  }

  Object.freeze(obj)

  new Vue({
  el: '#app',
  data: obj
  })
  

  
  

  {{ foo }}

  
  
  <button @click="foo = 'baz'">Change it
  

模板语法

插值

文本

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

Message:{{msg}}

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

原始HTML

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

  Using mustaches: {{ rawHtml }}

  
  

  Using v-html directive:

指令

v-bind修饰符

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

参数

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

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

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

v-bind缩写

...

...

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

  ...
  //在这里参数是监听的事件名

v-on缩写

...

<a @click="doSomething">...

计算属性和侦听器

计算属性

计算属性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

对象语法

• 三元表达式

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

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