01.VueVue2基础操作

Posted 2023-01-17 Do_GH

一、Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue实例创建

2.1 Vue.js代码引用

Vue的官网提供了开发版本和生产版本两个版本的源码下载，这里需要注意的是生产版本去掉了相关错误的警告信息，对于调试程序会造成不便。所以在开发环境中需要引入开发版本的Vue.js。

同时也可以使用CDN引用Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

2.2 Vue Devtools调试工具

为了能够更好的观察Vue在页面中的作用，Vue官方推荐了Vue Devtools的调试工具。该工具为Chrome插件，可以在Chrome官方插件平台下载，也可以下载GitHub源码通过编译添加至Chrome浏览器中。

2.2.1 下载

在本地下载Vue Devtools的源码

git clone https://github.com/vuejs/devtools.git

2.2.2 编译

进入项目路径，打开cmd，执行npm install进行安装。完成后执行npm run bulid命令编译项目。完成后进入./shells/chrome/打开文件mainifest.json修改persistent属性为true。

"background": 
  "scripts": [
    "build/background.js"
  ],
  "persistent": true

2.2.3 安装

打开谷歌浏览器，打开【扩展程序】，打开【开发者模式】点击【加载已解压的扩展程序】，选择Vue Devtools项目中的shells/chrome文件夹，点击添加即可将Vue Devtools插件部署至Chrome浏览器中。

使用node编译项目比较费时也可以从网上获取编译好的内容，例如：其他博主提供的资源https://github.com/arcliang/Vue-Devtools-

2.3 创建实例

按照官网提供的示例，编写一个简单的Vue示例：

<div id="root">
  <!-- 插值语法用获取Vue对象中的数据，可以使用JS表达式作为值 -->
  <h1>Hello,name</h1>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
  // 设置Vue全局属性，禁用生产环境提示信息
  Vue.config.productionTip = false;

  // 创建Vue对象，Vue对象与容器一一对应，不能一对多或多对一
  // 在真实开发过程中只有一个Vue对象，并且会会伴随着多组件使用
  new Vue(
    // 为当前Vue对象绑定对应的容器，值通常使用选择器
    el: '#root',
    // 为该容器设置所需要的数据，值一般使用对象存储数据
    data: 
      name: 'Tom'
    
  );
</script>

三、Vue基础语法

3.1 模板语法

根据2.3的示例，我们可以看出Vue可以通过特定的语法将Vue实例中的数据代入到页面中，这种操作符合html的模板基础，可以在Vue渲染中对特别的语法位置进行解析，在Vue中被称为模板语法。

3.1.1 插值

使用 propertyName 的形式可以将Vue实例中的data的属性直接注入到HTML中。例如2.3中的示例。

在Vue中对于插值语法插入的数据是可以动态刷新的，当data中的数据发生变化时可以进行自动刷新。

可以在Vue Devtools中进行验证。

示例：

在插件中修改属性的值，可以立刻反馈到页面上。

3.1.2 指令

指令语法通常用于为DOM绑定事件或赋予属性。示例：

    <div id="root">
        <h1>插值语法</h1>
        <p>hello, name</p>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href=urlTemp.url>链接1</a>
        <a :href=urlTemp.url>urlTemp.name</a>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        Vue.config.productionTip = false;

        new Vue(
            el:'#root',
            data:
                name:'Jack',
                urlTemp:
                    url:'http://www.baidu.com',
                    name:'百度'
                
            
        )
    </script>

在Vue中的指令语法通常都以v-开头，常用的指令有v-bind，v-on等，也可以使用简写方式。v-bind可以直接省略，在属性前使用:即可，v-on可以简写为@。

插值语法主要作用于标签体的内容填充，使用js表达式

指令语法主要作用于标签（标签属性，标签体内容，绑定事件），可以调用Vue中的众多指令

3.2 数据绑定

在Vue实例中创建的数据可以通过插值语法与v-bind在页面进行渲染，这里需要注意的是v-bind只能将data中的数据赋予页面中。如果需要实现页面上修改的值同步至Vue实例的data中，可以使用v-model指令，因此v-model是可以为DOM的数据进行双向绑定。

    <div id="root">
        单向绑定：<input type="text" :value=name /><br>
        双向绑定：<input type="text" v-model=name />
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue(
            el:'#root',
            data:
                name:'Tom'
            
        )
    </script>

只有带有value值的表单元素才能够使用双向绑定

3.3 el和data的两种写法

在Vue实例中，示例：

<div id="root1">
        <h1>Hello, name</h1>
    </div>
    
    <div id="root2">
        <h1>Hello, name</h1>
    </div>

    <div id="root3">
        <h1>Hello, name</h1>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;

        // 绑定容器
        // 1. el直接在创建Vue实例时绑定
        new Vue(
            el: '#root1',
            data: 
                name: 'Tom'
            
        );

        // 2. 将Vue实例挂载在容器上
        const vm = new Vue(
            data: 
                name: 'Jack'
            
        );
        vm.$mount('#root2');

        // 绑定数据
        // 1. 对象式（直接使用对象，示例略）

        /* 2. 函数式(只能使用普通函数形式，箭头式函数形式获取的对象是全局对象不能够使用
            data: () => 
                console.log(this)
                return 
                    name: 'Mary'
                
            
        */
        new Vue(
            el: '#root3',
            data: function () 
                console.log(this)
                return 
                    name: 'Mary'
                
            
        )

    </script>

在Vue实例中this是指定的当前Vue对象，如果使用箭头函数，此时的this为全局对象，不再特指当前Vue对象

四、数据代理

Vue对数据的绑定核心就是数据代理，我们虽然在Vue对象中创建了属性data，但是在页面获取data中的属性值时是以代理的形式获取。

    <div id="root">
        <h1>Hello,  name </h1>
        <h1>Hello,  address </h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        /**
         * 1. Vue实例中的data属性，会处理为_data，使用数据劫持实现当数据发生改变时动态刷新页面的功能
         * 2. Vue实例中的data属性，Vue会自动对其进行代理，当调用vm.name时则调用_data的getter方法
         */
        const vm = new Vue(
            el: '#root',
            data: 
                name:'Tom',
                address:'三里屯'
            
        )
    </script>

可以在页面控制台中输出vm对象，可以直接看到data中的name和address并不是直接显示值，而是需要点击省略号才能获取它的值，这就是数据代理。只有在需要时才会去获取属性值。

在vm对象的下方也可以看到对name和address两个属性的getter和setter方法。

五、事件

5.1 事件

对DOM元素绑定事件时一般使用v-on:[event]='fun'也可以简写为@[event]='fun'，对DOM中绑定的事件方法可以写在Vue的methods属性中。

示例：

    <div id="root">
        <!-- 
            1. 点击事件，使用v-on绑定事件：v-on:click="show"，也可以简写为@click="show"
            2. show1为Vue实例中的方法，这里注意做调用的函数需要写在methods属性中，否则无效
            3. 当函数不存在参数时，默认拥有一个事件参数(Event)
            4. methods中的函数要使用普通函数的写法，不能写成箭头函数，否则this的值则会指向windows而不是vm
         -->
        <button @click="show1">Click me 1</button>
        <button @click="show2($event, 'Jack')">Click me 2</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue(
            el:'#root',
            data: 
                name:'Tom'
            ,
            methods:
                show1(event) 
                    console.log(event)
                    alert('Hello, Tom')
                ,
                show2(event, name) 
                    console.log(event)
                    alert('Hello ' + name)
                
            
        )
    </script>

这里需要注意的是调用函数的参数，如果函数没有参数可以直接在事件绑定中直接写函数名即可。如果存在参数那么默认约定第一个参数为当前事件对象。

5.2 修饰符

修饰符	描述
prevent	在事件中添加修饰符prevent可以阻止默认事件，对于链接则阻止链接的跳转
stop	当嵌套结构都有事件时，可以通过添加stop属性阻止事件的冒泡
once	当只想当前事件执行一次时，可以添加once属性，当执行一次后就不会再执行
capture	在嵌套结构中，每层的事件会由外而内依次捕获，之后再由内而外的依次冒泡，使用capture可在捕获时执行事件
self	在嵌套结构中，使用self作用于事件上，只有操作当前元素时才会执行该元素上的事件

事件的修饰符可以叠加使用

stop和self都可以有效阻住嵌套结构中的事件冒泡

示例：

    <div id="root">
        <h1>事件修饰符</h1>
        <hr>

        <!-- 01.在事件中添加修饰符prevent可以阻止默认事件，对于链接则阻止链接的跳转 -->
        <a :href=url @click.prevent="showInfo">点我跳转至百度</a>
        <hr>

        <!-- 02.当嵌套结构都有事件时，可以通过添加stop属性阻止事件的冒泡 -->
        <div class="demo" @click="showMsg(1)">
            <button @click.stop="showMsg(2)">点击我实现冒泡</button>
        </div>
        <hr>

        <!-- 03.当只想当前事件执行一次时，可以添加once属性，当执行一次后就不会再执行 -->
        <button @click.once="showInfo">点我打开弹窗</button>
        <hr>

        <!-- 04.在嵌套结构中，每层的事件会由外而内依次捕获，之后再由内而外的依次冒泡，使用capture可在捕获时执行事件 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
        <hr>

        <!-- 05.在嵌套结构中，使用self作用于事件上，只有操作当前元素时才会执行该元素上的事件 -->
        <!-- 注意：stop和self都可以有效阻住嵌套结构中的事件冒泡 -->
        <div class="box1" @click.self="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
        <hr>

        <!-- 06. passive属性事件默认执行，无需等待事件的回调执行完毕（已失效） -->
        <div class="scroll" @scroll="scroll">
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>

        <!-- 注意：事件修饰符可以叠加使用 -->
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue(
            el:'#root',
            data:
                url:'http://www.baidu.com'
            ,
            methods:
                showInfo(event) 
                    alert('正在打开百度搜索')
                ,
                showMsg(msg) 
                    console.log(msg)
                    alert('正在执行点击操作')
                ,
                scroll() 
                    for(let i = 1; i < 10000; i++) 
                        console.log('#')
                    
                    console.log("over")
                
            
        )
    </script>

5.3 键盘事件

示例：

    <!-- 
        1. 键盘捕获事件主要分为两类：keyup和keydown，分别为键盘弹起事件和键盘按下事件
        2. 如果需要通过某个按键触发事件，可以使用特定的键值修饰符
            回车=>enter
            删除=>delete(包括delete键和Backspace键)
            退出=>esc
            空格=>space
            制表符=>tab
            上=>up
            下=>down
            左=>left
            右=>right
        3. 对于Vue未提供别名的按键，可以使用键的原始Key值进行绑定，需要注意多单词需要使用kebab-case
        4. 系统修饰键，ctrl,shift,alt,meta这些系统按键需要特殊使用
            4.1 使用keyup时，系统修饰键可以搭配其他按键触发
            4.2 使用keydown，可以直接触发
        5. 也可以直接使用键值替代（不推荐）
        6. 使用Vue.config.keyCodes.自定义键名 = 键值可以实现自定义键值

        注意：可以使用组合键限制条件
     -->
    <div id="root">
        <h1>键盘捕获事件</h1>
        <hr>
        <input type="text" name="" id="" @keyup.enter="outputInfo"/>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        Vue.config.keyCodes.huiche = 13
        const vm = new Vue(
            el:'#root',
            methods:
                outputInfo(event) 
                    console.log(event.target.value)
                
            
        )
    </script>

六、计算属性与侦听

6.1 计算属性

如果需要根据其他数据，经过逻辑处理后获取最后的结果，一是可以使用插值语法，使用JS表达式，这样做会使得页面臃肿，不好维护与复用。二是使用方法，在每次渲染页面的时候就会加载该方法，如果处理逻辑复杂的话会影响加载速度。以上两种方法虽然可以实现预期但是还并不简洁。

Vue提供了<