在拉钩学习的笔记（二十六）初识Vue.js

1、 Vue.js 简介
    传统网页开发步骤： 请求数据 ==> 生成结构 ==> 监听变化
                    元素变化 ==> 发送请求 ==> 更新结构
        缺点： DOM 操作繁杂，代码繁杂； DOM 操作与逻辑代码混合，可维护性差； 不同功能区域书写在一起，可维护性低； 模块之间的依赖关系复杂
    Vue.js 是前端流行框架
    文档： https://cn.vuejs.org/
2、 Vue.js 核心特性
    — 数据驱动视图
        数据变化会自动更新到对应元素中，无需手动操作 DOM ，这种行为称作单向数据绑定。
        对于输入框等可输入元素，可设置双向数据绑定。
            双向数据绑定实在数据绑定的基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定
        Vue.js 的数据驱动视图是基于 MVVM 模型实现的
        MVVM （Model -Veiw-VeiwModel）是一种软件开发思想
            Model 层，代表数据
            View 层，代表视图模板
            ViewModel 层，代表业务逻辑处理代码
        特点： 基于 MVVM 模型实现的数据驱动视图解放了 DOM 操作；
            View 与 Model 处理分离，降低代码耦合度
            但双向绑定时的 Bug 调试难度增大
            大型项目的 View 与 Model 过多，维护成本高
    — 组件化开发
        组件化开发，允许我们将网页功能封装为自定义的 HTML 标签，复用时书写自定义标签名即可
        组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提高了开发效率与可维护性
3、 Vue.js 安装
    - 本地引入
        开发版本： 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 install vue
        指定版本： npm install vue@2.6.12
4、 Vue.js 基础语法
    - 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'});
            挂载完毕后，可以通过 vm.$el 进行访问。 console.log(vm.$el);
            未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参数形式与 el 规则相同
        data 选项：用于存储 Vue 实例需要使用的数据，值为对象类型
            data 中的数据可以通过 vm.$data.数据或 vm. 数据访问
            data 中的数据可以直接在视图中通过插值表达式访问
            data 中的数据为响应式数据，在发生改变时，视图会自动更新
            data 中存在数组时，索引操作与 length 操作无法自动更新视图，这时可以借助 Vue.set() 方法替代操作
                Vue.set(vm.arr, 0, '新的内容')
        methods 选项
            用于存储需要在 Vue 实例中使用的函数
            methods 中的方法可以通过 vm.方法名 访问
            方法中的 this 为 vm 实例，可以便捷的访问 vm 数据等功能
    - 指令
    - 其他选项
5、插值表达式
    挂载元素可以使用 Vue.js 的模板语法， 模板中可以通过插值表达式为元素进行动态内容设置，写法为 {{}}
    注意点： 插值表达式只能书写在标签内容区域，可以与其他内容混合；
        内部只能书写 Javascript 表达式，不能书写语句