初识Vue-一一网

传统的网页开发需要解决的问题

DOM操作繁琐
DOM操作与逻辑代码混合
功能区域可维护性低
模块依赖关系复杂

Vue的核心特性

数据驱动视图

数据变化会自动更新到对应的元素中，无需手动操作DOM，这种行为称作单向数据绑定。
对于输入框等可输入元素，可设置双向数据绑定。
- 双向数据绑定是在数据绑定基础上，可自动将元素输入内容更新给数据，实现数据与元素内容的双向绑定。
Vue.js的数据驱动视图是基于MVVM模型实现的。
MVVM(Model – view – ViewModel)是一种软件开发思想
- Model层，代表数据
- View层，代表视图模板
- ViewModel层，代表业务逻辑处理代码

总结

基于MVVM模型实现的数据驱动视图解放了DOM操作
View与Model处理分离，降低代码耦合度
但双向绑定时的Bug调试难度增大
大型项目的View与Model过多，维护成本高

组件化开发

组件化开发，允许我们将网页功能封装为自定义HTML标签，复用时书写自定义标签名即可。
组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提高了开发效率与可维护性。
- 原因：我们可以直接查找组件的封装代码，对组件进行修改

Vue.js安装

本地引入
- 开发版本：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

el选项

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

注意

el选项设置的元素必须是单个元素，通常通过id进行操作
el选项设置的元素不能是html或者body元素

使用

挂载完毕后，可以通过vm.$el进行访问。
一开始没有进行挂载的元素，可以再通过vm.$mount()进行挂载，参数形式与el规则相同。

插值表达式

为元素进行动态内容设置
用两个大括号{{}}，内部书写插值表达式

注意

插值表达式只能用在内容区域使用
插值表达式中不能书写javaScript语句

data选项

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

使用

data中的数据可以通过vm.$data.数据或 vm.数据访问。
data中的数据可以直接在视图中通过插值表达式访问。
data中的数据为响应式数据，在发生改变时，试图会自动更新。

注意

索引操作和 length操作无法更新视图数据
解决方法：使用Vue.set(vm.contentArr,0,’生效的新内容’)
数组的其他操作是可以正常使用的
- pop : 从数组的最后删除一个元素
- push : 在数组的最后压入一个元素

methods选项

用于存储需要在Vue实例中使用的函数。
书写大功能，将大功能中可以复用的方法，再封装成小方法

使用

methods中的方法可以通过vm.方法名访问。
方法中的this为vm的实例，可以便捷的访问vm数据等功能。

案例代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
</head>
<body>
    <!-- view: 视图层 -->
    <div id="app">
        <p>{{title}}</p>
        <p>{{arr[0]}}</p>
        <p>{{arr[1]}}</p>
        <p>{{arr[2]}}</p>
        <p>{{fn(title)}}</p>
    </div>
    <!-- <script src="https://juejin.cn/post/lib/vue.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // model:模型层、数据层
        var vm = new Vue({
            // 挂载元素
            el: '#app',
            // 单向绑定
            data: {
                title: '标题文本',
                arr: [
                    '第一行内容','第二行内容','第三行内容'
                ]
            },
            methods: {
                // 自定义函数
                fn(value){
                    // this就是Vue
                    console.log(this);
                    this.fn1();
                    this.fn2();
                    return value + "Hello";
                },
                fn1(){
                    console.log('执行了fn1');
                },
                fn2(){
                    console.log('执行了fn2');
                }
            }
        });
        // 使用data数据
        console.log(vm.$el);
        // 可以直接作为vm的属性，打点进行调用
        console.log(vm.title);
        console.log(vm.arr);

    </script>
</body>
</html>
复制代码