vue.js 学习手记

阅读量：6799 次

发布时间：2019-06-26

本文共 4153 字，大约阅读时间需要 13 分钟。

vue.js 是MVVM轻量级前端js框架，类似于reactjs ，但学习成本低很多，而且写的很详细，示例也很多，下面介绍几个核心概念

1 directive

2 instance lifecyle hooks 生命周期

3 template syntax 模板语法

4 computed properties

5 class and style binding

6 conditional rendering

7 list rendering

8 event handling

9 form input bindings

1 directive

属性绑定：

v-bind:id=“id”v-bind:todo=“todo”v-bind:href=“url”

条件判断：

v-if=“seen”v-elsev-show

循环：

v-for=“todo in todos”

事件绑定：

v-on:click=“reverseMessage” v-on:submit.prevent=“onSubmit”v-model=“message” (双向绑定 v-m m-v)

其他

v-once (属性值只变化一次)v-html(html渲染)v-cloak(用来隐藏未编译的状态，表达式{
   {}}在编译好之后，才会显示处理)，结合[v-cloak]{display:none};使用

2 instance lifecyle hooks 生命周期

根据生成，添加到DOM中，更新，销毁，分为6个状态

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

3 template syntax 模板语法

3.1 fileter:

{
   { message | capitalize }}  // message 作为capitalize第一个参数{
   { message | filterA('arg1', arg2) }}

3.2 shorthandes:

v-bind:href=“url” :href=“url”v-on:click=“doSomething”@click=“doSomething”

4 computed properties

4.1 computed vs methods

v-on:click=“doSomething” 对应 methods

属性{

{properties}}对应 computed

区别：computed 会缓存依赖的属性值，如果需要缓存，就用computed,否则，使用methods

Q: 为什么会出现computed properties?

A: 为了模板简介，易维护, cached

4.2 computed vs watch

bad code:

watch: {    firstName: function (val) {      this.fullName = val + ' ' + this.lastName    },    lastName: function (val) {      this.fullName = this.firstName + ' ' + val    }  }

good code:

computed: {    fullName: function () {      return this.firstName + ' ' + this.lastName    }  }

当值需要异步处理或是表达式比较复杂时，使用watch+method

5 class and style binding

5.1 object syntax

data: {  classObject: {    active: true,    'text-danger': false  }}

5.2 array syntax

data: {  activeClass: 'active',  errorClass: 'text-danger'}

ps: 需要注意的是，class 和 :class可以并存

6 conditional rendering

v-if vs v-show

v-show：只是toggle 了元素的display css，不支持template和v-else, 初始渲染代价高，适合元素频繁toggle显示状态

v-if: toggle 代价高，recreated and destroyed，适合元素的显示状态在运行时不变化

7 list rendering

7.1 v-for：template中使用

7.2 v-for: object 属性值遍历

    {
   {value}}
    
       {
   { index }}. {
   { key }} : {
   { value }}

data: {    object: {        FirstName: 'John',        LastName: 'Doe',        Age: 30    }}

7.3 v-for: range

{
   { n }}

7.4 v-for:component

需要将传递过来的值绑定到component上，利用属性绑定v-bind

7.5 key

一般的循环，需要加上:key属性，用来提高DOM更新效率

7.6 array methods

push(), pop(),shift(), unshift(), sort(), reverse()

7.7 array caveats

下面两种情况，vue无法检测到array变化了

vm.items[indexOfItem] = newValuevm.items.length = newLength

可以使用下面的方法代替：

Vue.set(example1.items, indexOfItem, newValue)example1.items.splice(indexOfItem, 1, newValue)example1.items.splice(newLength)

8 event handling

使用v-on指令绑定事件处理

8.1 event handler

var example1 = new Vue({        el: '#example-1',        data: {            name: 'Vue.js'        },        // define methods under the `methods` object        methods: {            greet: function (event) {                // `this` inside methods points to the Vue instance                alert('Hello ' + this.name + '!')                // `event` is the native DOM event                alert(event.target.tagName)            },            warn:function (message,event) {                if (event) event.preventDefault();                alert(message)            }        }    });

8.2 event modifier

有4个modifier，使用dot(.)和指令连接起来

stop, prevent, capture, self

8.3 key modifier

下面的代码效果是一样的，按下‘Enter’键时执行‘submit()’

9 form input bindings

9.1 示范 select


        
         
             Selected:{
   {selected}}

let app2 = new Vue({    el:'#app2',    data:{        selected:'A',        options:[            { text: 'One', value: 'A' },            { text: 'Two', value: 'B' },            { text: 'Three', value: 'C' }        ]    }});

9.2 modifier

有三种.lazy, .number, .trim

分别对应：input 事件异步响应；输入类型为转换为number； trim 输入字串

参考资料：http://rc.vuejs.org/guide/