vue.js 学习手记

2019独角兽企业重金招聘Python工程师标准>>>

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

<div v-bind:class="classObject"></div>

data: {

  classObject: {

    active: true,

    'text-danger': false

  }

}

  5.2 array syntax

<div v-bind:class="[activeClass, errorClass]">

data: {

  activeClass: 'active',

  errorClass: 'text-danger'

}

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

6 conditional rendering

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

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中使用

<template v-for="item in items">
    <li>{{ item.message }}</li>
    <li class="divider"></li>
</template>

 

  7.2 v-for: object 属性值遍历

<li v-for="value in object">
    {{value}}
</li>



<div v-for="(value, key, index) in object">

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

</div>

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

  7.3 v-for: range

<span v-for="n in 10">{{ n }}</span>

  7.4 v-for:component

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

<my-component

  v-for="(item, index) in items"

  v-bind:item="item"

  v-bind:index="index">

</my-component>

7.5 key

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

<div v-for="item in items" :key="item.id">

  <!-- content -->

</div>

7.6 array methods

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

7.7 array caveats

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

vm.items[indexOfItem] = newValue

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

<div id="example-1">
    <button v-on:click="greet">Greet</button>
    <button v-on:click="warn('hello',$event)">Hello</button>
</div>

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

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat">

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

8.3 key modifier

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

<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

9 form input bindings

9.1 示范 select

<div id="app2">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
    </select>
    <p>
        <span>Selected:{{selected}}</span>
    </p>
</div>

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 输入字串

<input v-model.lazy="msg" >
<input v-model.number="age" type="number">
<input v-model.trim="msg">

 

 

 

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

 

 

转载于:https://my.oschina.net/u/2510955/blog/752388