目录
1.Attribute 绑定
我们知道,双大括号{{}}的写法,可以将数据解释为纯文本,但是是不能动态绑定HTML的attributes的,要想绑定attribute就需要用v-bind指令。
那HTML的attribute是什么呢?
这里有关于HTML的attribute和DOM的property的区别解读:
然后呢,v-bind:可以简写为冒号:,例如v-bind:id="top"写成:id="top"
2.动态绑定多个值
如果要动态绑定多个attribute的值,还可以通过写一个JavaScript对象的形式来绑定,不需要写带参数的v-bind:
<div v-bind="objectOfAttrs"></div>
然后在js中写:
data() { return { objectOfAttrs: { id: 'container', class: 'wrapper' } } }
3.声明响应式状态
文档里面默认介绍的是选项式API,使用了data选项来声明组件的响应式状态,它会返回一个对象的函数,此对象可以用this调用。
export default { data() { return { count: 1 } }, // `mounted` 是生命周期钩子,之后我们会讲到 mounted() { // `this` 指向当前组件实例 console.log(this.count) // => 1 // 数据属性也可以被更改 this.count = 2 } }
4.声明方法
在methods选项中写方法,他是一个包含所有方法的对象:
export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, mounted() { // 在其他方法或是生命周期中也可以调用方法 this.increment() } }
Vue 自动为
methods
中的方法绑定了永远指向组件实例的this
。不能再methods中使用箭头函数,因为箭头函数没有自己的this上下文。export default { methods: { increment: () => { // 反例:无法访问此处的 `this`! } } }
啥是箭头函数啊?
是函数的另一种写法,比起普通函数的写法,看上去要简洁一些,并且没有自己的this、arguments、super或new.target。它更适合那些本来需要匿名函数的地方(不带函数名的),并且它不能用作构造函数。
它的书写方式:
var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; elements.map(function(element) { return element.length; }); // 返回数组:[8, 6, 7, 9] // 上面的普通函数可以改写成如下的箭头函数 elements.map((element) => { return element.length; }); // [8, 6, 7, 9] // 当箭头函数只有一个参数时,可以省略参数的圆括号 elements.map(element => { return element.length; }); // [8, 6, 7, 9] // 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号 elements.map(element => element.length); // [8, 6, 7, 9] // 在这个例子中,因为我们只需要 `length` 属性,所以可以使用参数解构 // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个变量名, // 可以替换成任意合法的变量名 elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
5.计算属性
文档例推荐,将计算的复杂逻辑的函数放到computed属性中,然后通过动态绑定。
export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } } }
<p>Has published books:</p> <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
修改成:
export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }, computed: { // 一个计算属性的 getter publishedBooksMessage() { // `this` 指向当前组件实例 return this.author.books.length > 0 ? 'Yes' : 'No' } } }
<p>Has published books:</p> <span>{{ publishedBooksMessage }}</span>
6.class与style的绑定
数据的绑定在class和style的绑定上非常常见,所以我们可以使用v-bind的方式来绑定HTML的attribute,也可以使用其他的方式,绑定的表达式的值可以是字符串、对象或者数组。
当需要对一个对象的class进行动态切换时,可以写成:
<div :class="{ active: isActive }"></div>
意思时active是否存在取决于isActive的真假值。
isActive为真,则就能有active的样式,反之就没有这个样式了。
还能设置多个字段来操作class,如:
<div class="static" :class="{ active: isActive, 'text-danger': hasError }" ></div>
7.事件处理小补充
1.内联事件处理器,这种适合简单场景,比如:
data() { return { count: 0 } }
<button @click="count++">Add 1</button> <p>Count is: {{ count }}</p>
2.方法事件处理器,这种适合逻辑复杂的事件:
data() { return { name: 'Vue.js' } }, methods: { greet(event) { // 方法中的 `this` 指向当前活跃的组件实例 alert(`Hello ${this.name}!`) // `event` 是 DOM 原生事件 if (event) { alert(event.target.tagName) } } }
<!-- `greet` 是上面定义过的方法名 --> <button @click="greet">Greet</button>
8.生命周期
mounted最常见,是用来在组件完成初始渲染并创建DOM节点后运行代码。
生命周期示意图:(简单看一下即可)