Vue.js 简介
传统网页开发步骤
- 请求数据
- 生成结构
- 监听变化
- 元素变化
- 发送请求
- 更新结构
传统网页开发弊端
- DOM 操作频繁，代码繁杂
- DOM 操作与逻辑代码混合，可维护性差
- 不同功能区域书写在一起，可维护性低
- 模块之间的依赖关系复杂
Vue.js 是什么
前端流行框架
Vue.js 核心特性
- 数据驱动视图
- 组件化开发
数据驱动视图
- 数据变化会自动更新到对于元素中，无需手动操作 DOM，这种行为称做单向数据绑定
- 对于输入框等可输入元素，可设置双向数据绑定
- 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定
- Vue.js 的数据驱动视图是基于 MVVM 模型实现的
- MVVM(Model - View - ViewModel)是一种软件开发思想
- Model 层：代表数据
- View 层：代表视图模板
- ViewModel 层：代表业务逻辑处理代码
- 优
- 基于 MVVM 模型实现的数据驱动视图解放了 DOM 操作
- View 与 Model 处理分离，降低代码耦合度
- 缺
- 但双向绑定时的 Bug 调试难度增大
- 大型项目的 View 与 Model 过多，维护成本高
组件化开发
- 组件化开发，允许我们将网页功能封装为自定义 HTML 标签，复用时书写自定义标签名即可
- 组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提高了开发效率与可维护性
Vue.js 安装
- 本地引入
- cdn 引入
- npm 引入
本地引入
- 开发版本：
https://cn.vuejs.org/js/vue.js - 生产版本：
https://cn.vuejs.org/js/vue.min.js
cdn 引入
- 最新稳定版：
https://cdn.jsdelivr.net/npm/vue - 指定版本：
https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
npm 安装
- 最新稳定版：
- npm i vue
- 指定版本：
- npm i [email protected]
Vue.js 基础语法
- Vue 实例
- 基础选项
- 指令
- 其它选项
Vue 实例
- Vue 实例是通过 Vue 函数创建的对象，是使用 Vue 功能的基础
var vm = new Vue({
// 选项对象
})
el 选项
- 用于选取一个 DOM 元素作为 Vue 实例的挂在目标
- 只有挂在元素内部才会被 Vue 进行处理，外部为普通 HTML 元素
- 代表 MVVM 中的 View 层（视图）
可以为 CSS 选择器格式的字符串或 HTMLElement 实例，但不能为 html 或 body
var vm = new Vue({
el: '#app'
});
// 或
var app = document.querySelector('#app');
var vm = new Vue({
el: app
})
挂在完毕后，可以通过 vm.$el 进行访问
var vm = new Vue({
el: '#app'
});
console.log(vm.$el);
未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参数形式与 el 规则相同
var vm = new Vue({
});
vm.$mount('#app');
插值表达式
挂在元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为{
{}}
<div id="app">
<ul>
<li>计算结果为：{
{ 1 + 2 + 3 }} </li>
<li>比较结果为：{
{ 2 > 1 ? 2 : 1 }} </li>
</ul>
</div>
- 注意点
- 插值表达式只能书写在标签内容区域，可以与其他内容混合
- 内部只能书写 JS 表达式，不能书写语句
data 选项
用于存储 Vue 实例需要使用的数据，值为对象类型
new Vue({
el: "#app",
data: {
title: "标题内容"
}
})
data 中的数据可以通过 vm.$data.数据 或 vm.数据 访问
new Vue({
el: "#app",
data: {
title: "标题内容"
}
})
console.log(vm.$data.title);
console.log(vm.title);
data 中的数据可以直接在视图中通过插值表达式访问
<div id="app">
<p> {
{
title}} </p>
</div>
data 中的数据为响应式数据，在发生改变时，视图会自动更新
new Vue({
el: "#app",
data: {
title: "标题内容"
}
})
vm.title = "新的标题内容"
data 中存在数组时，索引操作与 length 操作无法自动更新视图，这时可以借助 Vue.set() 方法操作
new Vue({
el: "#app",
data: {
contentArr: ["内容1", "内容2", "内容3"]
}
})
Vue.set(vm.contentArr, 0, "生效的新内容")
methods 选项
用于存储需要在 Vue 实例中使用的函数
<div id="app">
<p> {
{ fn(value1) }} </p>
<p> {
{ fn(value2) }} </p>
</div>
<!-- ================================== -->
<script>
var vm = new Vue({
el: "#app",
data: {
value1: 'a-b-c',
value2: 'd-e-f'
},
method: {
fn (value) {
return value.split("-").join("");
}
}
})
</script>
method 中的方法可以通过 vm.方法名 访问
方法中的 this 为 vm 实例，可以便捷的访问 vm 数据等功能
var vm = new Vue({
el: "#app",
data: {
title: "标题",
content: "文本"
},
method: {
output () {
console.log(this.title, this.content)
}
}
})