vue2.x阅读笔记

v-once

作用：
只赋值一次
注意：
包括子项都是只赋值一次

模板

1.v-text v-html
2.{}语法
3.如果是html的属性，则用v-bind绑定，简写：
注意：
1.可以使用javascript,但只能是包含单个表达式
2.模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
比如：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}

指令

作用：
当表达式的值改变时，将其产生连带影响，响应式的作用于dom中
例子：
1.v-if
2.v-bind
3.v-on
修饰符：
以.为特殊后缀，指出指令用何种特殊方式绑定

计算属性

作用：
模板中写逻辑不便于维护，代码冗杂
逻辑业务相同的话难以处理
建议写在computed里面
例子：

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// this 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})

注意：
1.模板中调用不需要写()
2.当message变化时，所有依赖reversedMessage的绑定都会更新

---

computed与methods的区别：
1.它是存在于缓存中的，计算了一次就直接调缓存的值。除非相关的依赖发生改变时了，才会重新计算。

---

坑：
computed: {
now: function () {
return Date.now()
}
}
此处的Date.now()不是响应式依赖，所以不会多次执行，但在methods里面会多次执行

---

computed与侦听属性：
例子：
1.watch的做法

{{ fullName }}

var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})

2.computed的做法

var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

html中直接用computed里面的值
只能改firstName lastName，有setter才能改fullName

---

关于computed的setter，默认情况下是只有getter，但也可以提供一个setter
例子：
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
可以改fullName

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

侦听器watch

例子：
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 question 发生改变，这个函数就会运行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
}，
methods: {
getAnswer: function(){
//..逻辑处理
}
}
在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

class和style绑定

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 值。

---

多个class的情况：

data: {
isActive: true,
hasError: false
}

结果为：

---

绑定的数据对象不必内联定义在模板里

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

---

还可以绑定在computed里面：

data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}

---

数组语法：

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

渲染为：

数组中用对象写法：
div v-bind:class="[{ active: isActive }, errorClass]">

绑定内联样式

data: {
activeColor: 'red',
fontSize: 30
}

直接绑定比较好看：

data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

---

数组语法：
作用：可以将多个样式应用到同个元素上

条件渲染

v-if v-else v-else-if v-show
1.

Yes

2.

Yes

No

3.

里面的东西全没了如果ok为false的话

---

模板的复用会高效，但存在问题。
模板复用问题，用Key解决


这里的input会复用，不会清除已输入的值


加了key之后，切换loginType，input每次都会被重新渲染

---

v-show
v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
注意:
v-show 不支持