初学Vue.js必读文章

Vue.js 简介

传统网页开发步骤

1. 请求数据
2. 生成结构
3. 监听变化
4. 元素变化
5. 发送请求
6. 更新结构

传统网页开发弊端

• 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/vue@2.6.12/dist/vue.js

npm 安装

• 最新稳定版：
  • npm i vue
• 指定版本：
  • npm i vue@2.6.12

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)
        }
    }
})