目前版本3.2.25，官网地址 https://v3.cn.vuejs.org/guide
安装
CDN 包的形式导入 最新版本 开发使用
<script src="https://unpkg.com/vue@next"></script>
npm 安装
# 最新稳定版
$ npm install vue@next
# 单文件组件 编译插件
$ npm install -D @vue/compiler-sfc
命令行工具 (CLI)
# 全局安装最新版本的
$ npm install -g @vue/cli
# 项目升级
$ vue upgrade --next
使用 Vite 构建 (官方建议)
使用 npm：
# npm 6.x
$ npm init vite@latest <project-name> --template vue
# npm 7+，需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue
$ cd <project-name>
$ npm install
$ npm run dev
快速上手
创建一个应用实例
每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的：
# 同vue2不同的创建方法
const app = Vue.createApp({
/* 选项 */
})
插值
// 数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值
<span>Message: {{ msg }}</span>
//通过使用 v-once 指令，执行一次性地插值，
//当数据改变时，插值处的内容不会更新 影响当前及后代子节点
<span v-once>这个将不会改变: {{ msg }}</span>
# 使用原始 HTML v-html 指令：
<span v-html="rawHtml"></span>
绑定元素的指令 v-bind
指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
# v-bind 动态绑定元素 dynamicId为变量
//如果绑定的值是 null 或 undefined，
//那么该 attribute 将不会被包含在渲染的元素上。
<div v-bind:id="dynamicId"></div>
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>
使用 JavaScript 表达式
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
//每个绑定都只能包含单个表达式
<div v-bind:id="'list-' + id"></div>
绑定元素的指令 v-on
v-on为事件绑定
<div id="event-handling">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转 Message</button>
<button @click="say('what',$event)">Say what</button>
</div>
#v-on:click 绑定鼠标点击事件
const EventHandling = {
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(EventHandling).mount('#event-handling')
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>
双向绑定指令 v-model
v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />
//自动将用户的输入值转为数值类型
<input v-model.number="age" type="text" />
//自动过滤用户输入的首尾空白字符
<input v-model.trim="msg" />
条件 v-if
Vue 插入/更新/移除元素时自动应用过渡效果。
//根据表达式的值的真假来插入/移除 元素
<h1 v-if="awesome">Vue is awesome!</h1>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-show
v-show 只是简单地切换元素的 display
注意，v-show 不支持 元素，也不支持 v-else。
<h1 v-show="ok">Hello!</h1>
循环 v-for
v-if 和 v-for 一起引用 注意优先使用 v-if ,这意味着 v-if 将没有权限访问 v-for 里的变量
<div id="list-rendering">
<ol>
<li v-for="(todo, index) in todos" :key="index">
{{index}}-{{ todo.text }}
</li>
</ol>
</div>
const ListRendering = {
data() {
return {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}
}
Vue.createApp(ListRendering).mount('#list-rendering')
动态参数
指令参数中使用 JavaScript 表达式，方法是用方括号括起来：
//注意，参数表达式的写法存在一些约束
<a v-bind:[attributeName]="url"> ... </a>
//同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：
<a v-on:[eventName]="doSomething"> ... </a>
//在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
//除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
<a v-bind:[someAttr]="value"> ... </a>
对动态参数值约定 动态参数预期会求出一个字符串，null 例外。这个特殊的 null 值可以用于显式地移除绑定。
修饰符
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续冒泡 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发， -->
<!-- 而不会等待 `onScroll` 完成， -->
<!-- 以防止其中包含 `event.preventDefault()` 的情况 -->
<div @scroll.passive="onScroll">...</div>
这个 .passive 修饰符尤其能够提升移动端的性能。
不要把 .passive 和 .prevent 一起使用 .passive 会告诉浏览器你不想阻止事件的默认行为。
按键修饰符
Vue 为最常用的键提供了别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />
系统修饰键
.ctrl
.alt
.shift
.meta
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
.exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
鼠标按钮修饰符
.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
组件化应用构建
组件系统是 Vue 的另一个重要概念，几乎任意类型的应用界面都可以抽象为一个组件树：
类似使用方式
//props 传递参数
const TodoItem = {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
}
// 另一个
<div id="todo-list-app">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
const TodoItem = {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
}
const TodoList = {
data() {
return {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
},
components: {
TodoItem
}
}
const app = Vue.createApp(TodoList)
app.mount('#todo-list-app')
应用说明
组件实例 property
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
console.log(vm.count) // => 4
有各种其他的组件选项，可以将用户定义的 property 添加到组件实例中，例如 methods，props，computed，inject 和 setup。
生命周期钩子
Vue.createApp({
data() {
return { count: 1}
},
created() {//这里不要使用箭头函数()=>{}
// `this` 指向 vm 实例
console.log('count is: ' + this.count) // => "count is: 1"
}
})
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 unmounted。
生命周期图示
点击查看
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l6SOHceC-1645882038922)(https://v3.cn.vuejs.org/images/lifecycle.svg#pic_center])]
计算属性和侦听器
<div id="computed-basics">
<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>
</div>
Vue.createApp({
data() {
return {
author: {
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
}
}
},
computed: {
// 计算属性的 getter
publishedBooksMessage() {
// `this` 指向 vm 实例
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
}).mount('#computed-basics')
计算属性缓存 vs 方法
从最终结果来说，这两种实现方式确实是完全相同的。
然而，不同的是计算属性将基于它们的响应依赖关系缓存。
当触发重新渲染时，调用方法将始终会再次执行函数。
侦听器
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question" />
</p>
<p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script>
const watchExampleVM = Vue.createApp({
data() {
return {
question: '',
answer: 'Questions usually contain a question mark. ;-)'
}
},
watch: {
// 每当 question 发生变化时，该函数将会执行
question(newQuestion, oldQuestion) {
if (newQuestion.indexOf('?') > -1) {
this.getAnswer()
}
}
},
methods: {
getAnswer() {
this.answer = 'Thinking...'
axios
.get('https://yesno.wtf/api')
.then(response => {
this.answer = response.data.answer
})
.catch(error => {
this.answer = 'Error! Could not reach the API. ' + error
})
}
}
}).mount('#watch-example')
</script>
使用 watch 选项允许我们执行异步操作 (访问一个 API)，并设置一个执行该操作的条件。这些都是计算属性无法做到的。
Class 与 Style 绑定
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
对象语法
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
//变量
<div :class="classObject"></div>
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
//计算属性 绑定
<div :class="classObject"></div>
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
数组语法
<div :class="[activeClass, errorClass]"></div>
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
//使用三元表达式：
<div :class="[isActive ? activeClass : '', errorClass]"></div>
//在数组语法中也可以使用对象语法：
<div :class="[{ active: isActive }, errorClass]"></div>
绑定内联样式
对象语法
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
//直接绑定到一个样式对象通常更好
<div :style="styleObject"></div>
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
数组语法
<div :style="[baseStyles, overridingStyles]"></div>
自动添加前缀
在 :style 中使用需要一个 vendor prefix (浏览器引擎前缀) 的 CSS property 时，Vue 将自动侦测并添加相应的前缀