因为我需要接手一个vue项目,所以学习的主要目标是能够快速使用vue输出页面。
这几天大致过了一遍官方文档,体验还不错。
下面是一些重要概念,复习时可以以此为纲要,按需查询官方文档
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
- 指令可以控制dom的渲染,可以类比到jstl中的
c:if
、c:forche
等
<p v-if="seen">现在你看到我了</p>
- 指令可以将变量绑定到dom特性(属性)
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
- 指令可以绑定事件
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
完整指令列表:
插值
·文本
<span>{{text}}</span>
我们不再需要获取span节点然后写innerTEXT,Mustache标签会把text的值填上去。而且后续text值发生了改变,插值处的内容也会更新。如果不希望text后续的变化反应到dom,可以使用 v-once 指令
<span v-once>这个将不会改变,这会影响到该节点上的其它数据绑定: {{ msg }}</span>
双大括号会将数据解释为普通文本,而非 HTML 代码。
<p><p>Using mustaches: {{ rawHtml }}</p></p>
rawHtml = '<p>Hello vue</p>'
输出
<p>Using mustaches: <p>Hello vue</p></p>
想要输出真正的html需要使用下面的指令
·原始HTML
v-html
<p><p>Using mustaches: {{ rawHtml }}</p></p>
rawHtml = '<p>Hello vue</p>'
输出
<p>Using mustaches: Hello vue</p>
注意
Mustache 语法不能作用在 HTML 特性上(节点属性:id、class、style等),遇到这种情况应该使用 v-bind 指令:
<div v-bind:id="dynamicId"></div>
计算属性
我们可以声明了一个计算属性 ,提供的函数将用作属性该的 getter 函数:
computed: {
// 计算属性的 getter
reversedMessage: function () {
//Vue 知道 vm.reversedMessage 依赖于 vm.message;因此当 vm.message 发生改变时,所有依赖
//计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
//这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,
//而不必再次执行函数。
vm.reversedMessage 的绑定也会更新
return this.message.split('').reverse().join('')
}
}
}
// 使用
<p>Reversed message: "{{ reversedMessage() }}"</p>
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
computed: {
fullName: {
// 计算属性的 getter
get: function () {
},
// 计算属性的setter会在fullName变动时更新函数内的依赖自己的变量
set: function (newValue) {
}
}
}
侦听属性
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
}
}
数据与方法
上面一直说的变量、方法是在创建Vue实例时传入的
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
var vm = new Vue({
data: {fullName: '', text: ''},
methods: {alert: function(){alert(666)}}
})
网友评论