<h1 id="处理用户输入">处理用户输入
<h3 id="v-on指令添加一个事件监听器">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}}
'
})

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

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

    var obj = {
      foo: 'bar'
    }
  Object.freeze(obj)
  new Vue({
  
  el: '#app',data: obj
  
  })
  
  <div id="app">
  {{ foo }}
      
      
    

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

Message:{{msg}}

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

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

    
  Using mustaches: {{ rawHtml }}
    
  Using v-html directive: 

• .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 的值绑定。

    
    
    
  <a :href="url">...

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

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

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

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

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

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

• 计算属性默认只有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]
        }
      }
    }

• 三元表达式

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!