Vue.js
作者: 尤雨溪
[官网](https://cn.vuejs.org/)
渐进式 JavaScript 框架。
易学易用,性能出色,适用场景丰富的 Web 前端框架。
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面(UI)的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
一、 MVVM
- M - Model,模型,数据
- V - View,视图,UI
- VM - ViewModel,视图模型
MVVM 是一种设计模式(软件架构方式),它通过分离数据与视图,将数据与视图分离,使得数据与视图之间存在一种依赖关系,当数据发生变化时,视图会自动更新。其典型特征: 数据双向绑定(数据驱动视图)。
Vue 是一个 MVVM 框架。
二、 安装
2.1下载独立的js文件到本地
- [开发版](https://cdn.bootcdn.net/ajax/libs/vue/3.4.38/vue.global.js)
- [生产版](https://cdn.bootcdn.net/ajax/libs/vue/3.4.38/vue.global.min.js)
2.2 CDN 引入
在html页面中使用 `<script src="CDN资源地址"></script>`,这种方式需要依赖于网络连接
2.3 npm 安装
利用 `npm install` 的方式安装 vue.js 的使用
三、 Vue框架使用
3.1 声明式渲染
Vue 基于标准 HTML 拓展了一套**模板语法**,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。如:
<div id="app">
<h2>购物车</h2>
<ul>
<li>编号</li>
<li>标题</li>
<li>价格</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
<ul v-for="goods in cart">
<li>{{goods.id}}</li>
<li>{{goods.title}}</li>
<li>{{goods.price}}</li>
<li><button>-</button>{{goods.amount}}<button>+</button></li>
<li>{{ goods.price * goods.amount }}</li>
<li><button v-on:click="removeFromCart(goods.id)">删除</button></li>
</ul>
<div>
合计: {{ cart.reduce((res, curr) => (res + curr.price * curr.amount), 0).toFixed(2) }}
</div>
<hr>
<h2>推荐商品</h2>
<ul>
<li>编号</li>
<li>标题</li>
<li>价格</li>
<li>操作</li>
</ul>
<ul v-for="prod in recommends">
<li>{{ prod.id }}</li>
<li>{{ prod.title }}</li>
<li>{{ prod.price }}</li>
<li><button v-on:click="addToCart(prod)">加入购物车</button></li>
</ul>
</div>
3.2 响应性(响应式渲染)
响应式渲染指的是 Vue 会监视到状态数据的变化,当状态数据发生变化时自动重新渲染 UI 结构。
Vue 会自动跟踪 JavaScript 状态(数据)并在其发生变化时响应式地更新 DOM。
四、 API 风格
两种 API 风格: Options API 和 Composition API
选项式 API(Options API):在进行代码编写时,以固定的配置选项的方式进行 Vue 功能配置。
组合式 API(Composition API):在代码编写时,以函数的形式进行 Vue 功能配置。
五、 创建一个应用实例
每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例:
const app = Vue.createApp({})
将传入 `createApp()` 的参数对象称作 "根组件"
应用实例必须在调用了 .mount() 方法后才会渲染出来:
app.mount('#app')
应用根组件的内容将会被渲染在容器元素里面。
.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。
六、 模板语法
Vue 使用一种基于 HTML 的模板语法。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。
6.1 文本插值
最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法 (即双大括号):
<div id="app">
<h2>标题: {{ 3 + 2 - 5 }}</h2>
</div>
注意:
- 双花括号内部所书写的是 "JS 表达式",不能是定义变量、if-else、while、do-while、for 等语句。
- 双花括号会对 html 字符串文本进行转义,避免 XSS(跨站脚本攻击) 攻击。
6.2 原始 html
要把 html 文本解析为 html 标签,而不是纯文本,可以使用 `v-html` 指令:
<div>输入框: <span v-html="html"></span></div>
注意:
- 仅在内容可信时进行 html 渲染,绝不要对用户输入的html进行渲染。
6.3 属性绑定
不能在属性绑定时使用 `{{}}` 语法,而是需要使用 `v-bind` 指令:
<h2 v-bind:title="message">标题: {{ message }}</h2>
`v-bind` 后添加 `:`,在 `:` 冒号后添加需要绑定的属性名。
6.4 指令
指令 (Directive) 是带有 `v-` 前缀的特殊属性,用于绑定 Vue 特定的功能。
- 指令名称,即 `v-` 之后的那个单词
- 指令参数,即 `v-xxx` 之后的冒号后面的内容
- 指令修饰符,即 `v-xxx.yyy` 点后面的内容,如 `v-on:click.once` 中的 `once`
- 指令值,即 `v-xxx="zzz"` 中的 `zzz`,指令值也是一个 JS 表达式
![图示](https://cn.vuejs.org/assets/directive.DtZKvoAo.png)
6.4.1 指令列表
文本处理相关:
- v-text: 渲染纯文本,但 `{{}}` 的使用更加灵活
- v-html: 渲染 html
- v-bind: 绑定属性,可以简写为 `:`
事件处理相关:
- v-on: 绑定事件,可以简写为 `@`
条件渲染相关:
- v-if:
- v-else:
- v-else-if:
- v-show:
列表渲染相关:
- v-for:
表单双向绑定相关:
- v-model:
七、 事件处理
利用 `v-on` 指令,在标签中直接绑定事件
指令值:
- 一个简洁的 JS 表达式,用于处理比较简单的业务
- 一个函数(写在选项的 `methods` 字段中),用于处理复杂的业务
- 无需额外传递参数,则直接使用函数名称引用到事件函数即可
- 如果需要额外传递参数,则使用函数名加括号显式传参即可
在使用函数名称引用事件函数时,函数中的第一个参数为事件对象 event。如果显式加括号调用了函数,则函数参数以实际传递为准,这时如果还需要事件 event 对象,可以固定传递 `$event`
八、 列表渲染
v-for 指令
语法:
<!-- 遍历迭代数组 -->
<li v-for="(hobby, index) of hobbies">{{hobby}} -- 下标: {{ index }}</li>
<!-- 遍历迭代对象 -->
<li v-for="(val, key) of stu">{{ val }} -- 属性名: {{ key }}</li>
<!-- 遍历固定次数 -->
<li v-for="n of 5">固定第{{ n }}次</li>
使用的 `of` 也可以替换为使用 `in`,最终输出结果是一样的。
[待办事项列表示例](http://todolist.com.cn/)