Vue v-event

v-once

绑定属性，一旦生效，属性固定不再变

v-html

绑定值为 HTML 代码

v-bind

绑定HTML 属性的值，例如

1
2
3

<div id="app">
  <p v-bind:title="title">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>

let vm = new Vue({
    el: '#app',
    data: {
        title: 'title content'
    }
});

v-on

用于监听子组件触发的事件

<div id="counter-event-example"
   <p>{{ total }}</p
 > <button-counter v-on:increment="incrementTotal"></button-counter
   <button-counter v-on:increment="incrementTotal"></button-counter
 </div>

Vue.component('button-counter', 
   template: '<button v-on:click="increment">{{ counter }}</button>'
   data: function () 
      return { counter: 0 }
   },
   methods: 
    increment: function () 
     this.counter += 1 
     this.$emit('increment') }
   },
 })
 new Vue(
  el: '#counter-event-example'
  data: { total: 0 }
  methods: 
    incrementTotal: function () 
      this.total += 1
     }
 })

this.$emit('increment')
通过这句函数可以让父组件知道子组件调用了什么函数，this.$emit(‘increment’) 即类似于子组件跟父组件说了一声“hi，爸爸我调用了我自己的increment函数”，通知父组件

v-on:increment="incrementTotal"
就是说“孩子，当你调用了increment函数的时候，我将调用incrementTotal函数来回应你”

在子组件我们已经使用emit来进行通知，所以，这样就形成父子组件间的相互呼应传递信息，其实在开发的过程中父子组件通讯也都是使用这样的方法，父组件传递信息给子组件的时候会通过props参数，通常不会直接在子组件中修改父组件传递下来的信息，而且通过这样的一个钩子去通知父组件对某些参数进行改变

v-if

绑定的参数如果是真值 truthy，就渲染，否则就不渲染.

v-else

和 v-if 一起使用

v-show

效果和 v-if=‘false’一样，不过代码层面， v-if=‘false’ 是直接不渲染，而 v-show=‘false’ 是``diplay: noneb

v-for

1	<li v-for="item in items">{{item.text}}</li>

data:{
    items:[
        {text:"第一组"}，
        {text:"第二组"}，
        {text:"第三组"}，
    ]
}

这样渲染出来的就是

第一组
第二组
第三组

<div id="todo-list-example">
   <form v-on:submit.prevent="addNewTodo">
     <label for="new-todo">Add a todo</label>
     <input 
     v-model="newTodoText" 
     id="new-todo" 
     placeholder="E.g. Feed the cat"
     >
     <button>Add</button>
   </form>
   <ul>
     <li
     is="todo-item"
     v-for="(todo, index) in todos"
     v-bind:key="todo.id"
     v-bind:title="todo.title"
     v-on:remove="todos.splice(index, 1)"
     ></li>
   </ul>
</div>

Vue.component('todo-item', {
   template: '\
   <li>\
   {{ title }}\
   <button v-on:click="$emit(\'remove\')">Remove</button>\
   </li>\
   ',
   props: ['title']
})

new Vue({
   el: '#todo-list-example',
   data: {
   newTodoText: '',
   todos: [
   {
   id: 1,
   title: 'Do the dishes',
   },
   {
   id: 2,
   title: 'Take out the trash',
   },
   {
   id: 3,
   title: 'Mow the lawn'
   }
   ],
   nextTodoId: 4
 },
   methods: {
   addNewTodo: function () {
   this.todos.push({
   id: this.nextTodoId++,
   title: this.newTodoText
   })
   this.newTodoText = ''
   }
 }
})

黄威龙的笔记

Vue 的各种 v-方法