查看 - 基础知识 - code前端网

Vue.js 核心功能

1。数据驱动视图

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

2。组件开发

组件化开发让我们可以将网站功能封装在自定义的HTML标签中，复用时只需要写上自定义的标签名称即可。
组件不仅可以封装结构，还可以封装样式和逻辑代码，大大提高开发效率和可维护性。

Vue.js安装

三种安装方式：

本地导入：本地下载并导入vue.js文件即可使用vue
cdn介绍：建议使用：加载速度更快，使用script:src标签引入，版本更新时会自动应用更新的版本
npm install：使用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 元素作为视图实例的目标。
只有mounted元素的内部才会被视图处理，外部将是普通的HTML元素。
表示MVVM中的视图层（View）。

如何挂载数据：

可以是格式为 CSS 选择器 或 HTMLElement 实例 的字符串，但不能是
HTML 或正文。

        /**
         * 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的视图实例没有设置，也可以通过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>

插值表达式

Montage 元素可以使用 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 中的数据可以通过 vm.$data.data 或 vm.data 访问。

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

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

如果

data中有数组，则索引操作和长度操作无法自动更新视图。这种情况下，可以使用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>

方法选项

方法：函数、方法

函数：用于存储视图实例中需要使用的函数。

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

this方法中的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>

查看 - 基础知识