Vue学习笔记(2)

前言

无。

---

计算属性和侦听器

计算属性和函数都是用来处理逻辑的，其中函数每次重新渲染都会重新运行，计算属性则会缓存，只有依赖变化了才会变化，比如 App.vue ：

<h4 v-on:click="log">click here!</h4><h4 v-on:click="change">Change time!</h4>
{{ count }}
<span v-html="dead_time"></span><br/>{{ active_time() }}

然后：

computed: {
    "dead_time": function () {
    	return "<hr/>现在的时间是：" + this.time
    }  
},
methods: {
    "log": function() {
        this.count += 1;
        window.console.log('Twings')
    },
    "change": function() {
    	this.time = "<h3>" + Date() + "</h3>"
    },
    "active_time": function () {
    	return Date()
    }
}

log 函数用来改变模板中 count 的值，触发重新渲染；change 函数用来改变 time 的值，同时改变 dead_time；两个函数都会改变 active_time ：

watch 侦听好像可以用计算属性代替，不看了。

setter 暂时用不到，pass 。

侦听器的例子里包含了好多东西啊，先安装一下 lodash 和 axios，直接在 UI 界面的依赖栏里安装即可，然后引入：

import _ from "lodash"
import axios from "axios"

然后看实例代码，用的是 v-model 来绑定表单输入: https://cn.vuejs.org/v2/guide/forms.html 。

限制调用频率的函数：_.debounce 。

axios 进行异步请求，跟 Ajax 挺像的。

Class 和 Style 绑定

样式方面的，不懂，pass。

条件渲染

简单好理解，pass。

列表渲染

v-for，就是框架里的循环属性，比如遍历数组：

<div v-for="(msg, index) in msgs" v-bind:key="index">{{ index }}-{{ msg }}</div>

顺序是值-索引，不加上 key 会报错，然后：

msgs: [
	"Twings",
	"Aluvion"
]

或者使用对象也可以：

msgs: {
	"first_name": "Twings",
	"last_name": "Aluvion"
}

不过 v-for 里面的顺序是值-键-索引，跟我们平时的读法反了过来。

还有一点就是，使用 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 等函数改变数组的成员会导致视图的变化。

各种高级用法就不说了，前端菜鸡也用不上。

---

Orz