vue.js学习笔记2——基础

生命周期：参考资料https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html

计算属性computed：

侦听器watch：

Class与Style绑定：

条件渲染：

列表渲染：

为字面量添加新属性：

事件处理：

　　内联处理器中的方法：

　　　　特殊变量$event

　　事件修饰符：

　　按键修饰符：

　　系统修饰符：

组件：

　　传递事件：

<!--组件内-->
<!--无参-->
<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>
<!--有参-->
<button v-on:click="$emit('enlarge-text', 参)"> Enlarge text </button>

<!--html内-->
<blog-post

  ...
 v-on:enlarge-text="onEnlargeText"
></blog-post>

//javascript
methods: {
　　//此处只是为了演示，js并没有重载特性
    //无参
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += 0.1
  }
    //有参
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

　　通过插槽（slot）传递文本：

<!--组件样例-->
Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

<!--使用，中间的文本内容将填补在组件的<slot></slot>处-->
<alert-box> Something bad happened. </alert-box>

</router-view>：

有返回值的方法，可以充当普通data使用：

<!--template-->
<li v-for="n in even(numbers)">{{ n }}</li>

//javascript
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

一段取值范围的v-for：

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
<!--输出结果为 1 2 3 4 5 6 7 8 9 10-->

v-for与v-if同时使用：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

　　由于v-for优先级高于v-if，这里的每一循环项都会根据v-if判断一次选择显示与否，而非整个循环进行判断，若需要这种效果则写成这样：

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>

组件使用v-for：

　　2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要用 props。不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。下面是一个组件使用v-for的例子：

<!--html-->

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

注：这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与<todo-item> 相同，但是可以避开一些潜在的浏览器解析错误。查看 DOM 模板解析说明来了解更多信息。

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 = ''
    }
  }
})

v-model：

　　实质上，v-model只是语法糖

<!--非组件-->
<input v-model="searchText">

　　等价于

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

　　组件使用v-model：

<!--组件样例-->
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

<!--使用v-model-->
<custom-input v-model="searchText"></custom-input>

动态组件（v-bind:is）：

　　案例：https://jsfiddle.net/chrisvfritz/o3nycadu/

注：

在JavaScript中，Truthy(真值)指的是在Boolean上下文中转换后的值为真的值。

所有值都是真值，除非它们被定义为 falsy (即，除了false，0，“”，null，undefined和NaN 外)。

vue.js学习笔记2——基础

猜你喜欢