官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js
vue3编写有声明式和响应式。该文章仅记录声明式。vue3声明式与vue2相同。
一、生命周期
- 创建之前 beforeCreate()
- 已创建 created()
- 挂载之前 beforeMount()
- 已挂载 mounted()
- 销毁之前 beforeUnmount()
- 已销毁 unmounted()
二、模板语法
//文本插值
{{ value }}//原始html
<p v-html="value"></p>//属性绑定
<p v-bind:id="value"></p>
<p :id="value"></p>//布尔型
<button :disabled="isButtonDisabled">Button</button>//绑定多个值
const objectOfAttrs = {id: 'container',class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>//JavaScript 表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>//函数调用
<time :title="toTitleDate(date)" :datetime="date">{{ formatDate(date) }}
</time>2.1 内置指令
- v-text 更新元素的文本内容
- v-html 更新元素的innerhtml
- v-show 基于表达式值的真假性，来改变元素的可见性。页面渲染消耗多，适合频繁切换显示。
- v-if 基于表达式值的真假性，来条件性地渲染元素或者模板片段。元素切换消耗多。
- v-else 表示
v-if或v-if/v-else-if链式调用的“else 块”。 - v-else-if 表示
v-if的“else if 块”。可以进行链式调用。 - v-for 基于原始数据多次渲染元素或模板块。
- v-on 给元素绑定事件监听器。缩写@。
- v-bind 动态的绑定一个或多个 attribute，也可以是组件的 prop。缩写：
- v-model 在表单输入元素或组件上创建双向绑定。
- v-slot 用于声明具名插槽或是期望接收 props 的作用域插槽。
- v-pre 跳过该元素及其所有子元素的编译。
- v-once 仅渲染元素和组件一次，并跳过之后的更新。
- v-memo 缓存一个模板的子树。仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量
v-for列表。 - v-cloak 用于隐藏尚未完成编译的 DOM 模板。
<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]"><p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p><p>...more child nodes</p>
</div>[v-cloak] {display: none;
}template<div v-cloak>{{ message }}
</div>三、变量定义及使用
声明式定义和响应式不同，代码如下。变量是在函数中返回。
<template>
<p>{{ msg }}</p>
<div><ul><li v-for="(item,index) in list" :key="index">{{ item.value }}</li></ul>
</div>
<p ></p>
</template>
<script>
export default{name:'Test',data:function(){return{msg:"test",list:[{id:1,value:test1},{id:2,value:test2},{id:3,value:test3},]}},
}
</script>3.2 计算属性
在computed中使用变量名作为方法名，可在模板中使用。计算属性也可以定义为方法，在methods中定义，但是计算属性基于它们的响应式依赖进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
以下代码中计算属性now将不再更新，因为Date.now()不是响应式依赖。
<template>
<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>
var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')},now: function () {return Date.now()}}
})
</script>3.3 监听
通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
之前使用开源vue后台框架，相同页面不同参数的时候，使用监听处理传过来的参数，便于多个页面显示。
<template>
<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p>
</div>
</template>
<script>
var vm = new Vue({el: '#example',data: {question: '',answer:'',},watch: {// 如果 `question` 发生改变，这个函数就会运行question: function (newQuestion, oldQuestion) {this.answer = newQuestion}},
})
</script>
