Vue – 基础 - 码农之家

Vue.js 核心特性

1. 数据驱动视图

数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定。
对于输入框等可输入元素，可设置双向数据绑定。
- 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。
Vue.js 的数据驱动视图是基于 MVVM 模型实现的。
MVVM (Model – View – ViewModel )是一种软件开发思想
- Model 层 –> 代表数据
- View 层 –> 代表视图模板
- ViewModel 层 –> 代表业务逻辑处理代码
基于MVVM 模型实现的数据驱动视图解放了DOM操作（优）
View 与 Model 处理分离，降低代码耦合度（优）
但双向绑定时的 Bug 调试难度增大（缺）
大型项目的 View 与 Model 过多，维护成本高（缺）

2. 组件化开发

组件化开发，允许我们将网页功能封装为自定义 HTML 标签，复用时书写自定义标签名即可。
组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提交了开发效率与可维护性。

Vue.js 安装

安装的三种方式：

本地引入：本地下载，导入vue.js文件的方式使用vue
cdn 引入：建议采用：加载速度更快，使用script:src标签引入，版本更新时自动应用更新后版本
npm 安装：使用 npm 命令安装

本地引入
- 开发版本：cn.vuejs.org/js/vue.js
- 生产版本：cn.vuejs.org/js/vue.min.…
cdn 引入
- 最新稳定版： cdn.jsdelivr.net/npm/vue
- 指定版本：cdn.jsdelivr.net/npm/vue@2.6…
npm 安装
- 最新稳定版：
  - npm install vue
- 指定版本
  - npm install vue@2.6.12

EL 选项

用于选取一个 DOM 元素作为 Vue 实例的挂载目标。
只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。
代表 MVVM 中的 View 层（视图）。

挂载数据的方式：

可以为 CSS 选择器格式的字符串或 HTMLElement 实例，但不能
为 html 或 body。

        /**
         * el 选项 挂载数据 方式 1
         */
        // 创建 vue 实例
        var vm = new Vue({
            // el 选项对象
            el: '#app'
        })
        console.log(vm.$el); // <div id="app"></div>



        /**
         * el 选项 挂载数据 方式 2
         */
        var app = document.querySelector('#app')
        // 创建 vue 实例
        var vm = new Vue({
            // el 选项对象
            el: app
        })
        console.log(vm.$el); // <div id="app"></div>

挂载完毕后，可以通过 vm.$el 进行访问

        /**
         * el 选项 挂载数据 方式 3
         */
        // 创建 vue 实例
        var vm = new Vue({})
        vm.$mount('#app')
        console.log(vm.$el) // <div id="app"></div>

未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参
数形式与 el 规则相同

    /**
    * el 选项 挂载数据 方式 4
    */
    var app = document.getElementById('app')
    // 创建 vue 实例
    var vm = new Vue({})
    vm.$mount(app)
    console.log(vm.$el) // <div id="app"></div>

插值表达式

挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，语法为 {{ }}。

注：

插值表达式只能书写在标签内容区域，可以与其它内容混合。
内部只能书写 JavaScript 表达式，不能书写语句。

    <!-- 
        挂载元素
     -->
    <div id="app">
        <p> 1 + 2 + 3 = {{ 1 + 2 + 3 }}</p>
    </div>

    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app'
        });

    </script>

data 选项

用于存储 Vue 实例需要使用的数据，值为对象类型。

data 中的数据可以通过 vm.$data.数据或 vm.数据访问。

data 中的数据可以直接在视图中通过插值表达式访问。

data 中的数据为响应式数据，在发生改变时，视图会自动更新。

data 中存在数组时，索引操作与 length 操作无法自动更新视图，这时可以借助 Vue.set() 方法替代操作。

Vue.set() 语法： Vue.set(vm.数组名, 数组下标, 生效的新内容)

<!-- 挂载元素 -->
    <div id="app">
        <p> 1 + 2 + 3 = {{ 1 + 2 + 3 }}</p>
        <p>{{ title }}</p>

        <ul>
            <li>{{ arr[0] }}</li>
            <li>{{ arr[1] }}</li>
            <li>{{ arr[2] }}</li>
            <li>{{ arr[3] }}</li>
        </ul>
    </div>

    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                title: '我是标题',
                arr: ['数据1', '数据2', '数据3']
            }
        });

        console.log(vm.$data.title);  // 我是标题
        console.log(vm.title);  // 我是标题
    </script>

methods 选项

methods：函数、方法

功能：用于存储需要在 Vue 实例中使用的函数。

methods 中的方法可以通过 vm.方法名 访问。

方法中的 this 为 vm 实例（this 代表函数所在的这个实例），可以便捷的访问 vm 数据等功能。

<!-- 挂载元素 -->
    <div id="app">
        <!-- <p>{{ add(加法) }}</p> -->
        <p>{{ outPut(value1) }}</p>
        <p>{{ fn(title) }}</p>
        <p>{{ fn(content) }}</p>
    </div>

    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                // 加法: 1 + 2 + 3
                value1: '1-2-3-4-5-6',
                title: '我是标题',
                content: '我是内容'
            },
            methods: {
                outPut(value) {
                    // return this.加法;
                    // 截取 value1 字符串
                    return value.split('-').join('')
                },
                fn() {
                    console.log('title：' + this.title + '1');
                    console.log('content' + this.content + '2');
                }
            }
        });
    </script>

Vue – 基础