• 【Vue基础一】

    文章目录

    Vue基础

    1-1 vue概念

    一套用于**构建用户界面(数据驱动界面)的渐进式（自底向上逐层的应用）**javaScript框架

    Vue可以自底向上逐层的应用

    • 简单应用：只需一个轻量小巧的核心库
    • 复杂应用： 可以引入各式各样的Vue插件

    1-1-1 初识

      • 采用组件化模式，提高代码复用率，且让代码更好维护

      • 声明式编码，编码人员不需直接操作DOM，提高开发效率

        image-20220713171702445

      • 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

    2. 对比原生和vue实现虚拟DOM

      • vue： Diff算法
      • image-20220723182624392
      • ES6语法规范
      • 包管理器
      • 原型、原型链
      • 数组常用方法
      • axios
      • promise
    4. <!-- 准备好一个容器 -->
    <!-- root容器理的代码被称为【Vue模板】 -->
    <div id="root">
        <h1>Hello{{name}}。{{Date.now()}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false // 组织vue在启动时生成  生产提示

        // 创建Vue实例
        const x = new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { // data用于存储数据，数据供el所绑定的容器去使用
                name: 'aaa'
            }
        })

        // axios({
        //     url: 'http://localhost:8080'
        // })
    </script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • Vue实例和容器是一一对应的
      • 只有一个Vue实例，并且会配合着组件一起使用
      • {{xxx}}中的 xxx要写js表达式，且xxx可以读取到data中的所有属性
        • js表达式 ：
          • a
          • a+b
          • demo(1)
          • x==y?‘a’:‘b’
        • js代码
          • if(){}
          • for(){}
      • 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

    1-1-2 模板语法

    1. 插值语法： {{}}

      • XXXXXXXXXX XXXXXXXXXXXX

    2. 指令语法【用于解析标签（标签属性、标签体内容、绑定事件…）】：

      • 插值语法： 用于解析标签体内容
      • 指令语法： 解析标签

    1-1-3 单双向数据绑定

    1.     <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br/> 双向数据绑定: <input type="text" v-model:value="name">
    </div>
    <script>
        Vue.config.productionTip = false // 组织vue在启动时生成  生产提示

        // 创建Vue实例
        const x = new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { // data用于存储数据，数据供el所绑定的容器去使用
                name: 'aaa'
            }
        })
    </script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14

    2. v-model只能应用在表单类元素（输入类元素）上-----> name

      • 单项绑定： 数据只能从data流向页面

      • 双线绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

        • 双向绑定一般都应用在表单类元素上（input、select）

        • v-model:value可以简写为v-model，因为v-model默认收集的就是value值

        • 单项数据绑定：<input type="text" :value="name"><br/>
双项数据绑定：<input type="text" v-model="name"><br/>

          • 1
          • 2

    1-1-4 el和data的两种写法

    1. Vue管理的函数，不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

    2. el的两种写法

          <div id="root">
        <h1>你好{{name}}</h1>
    </div>
</body>
<script>
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示

    const v = new Vue({
        // el: '#root',
        data: {
            name: 'aaa'
        }
    })
    console.log(v);
    v.$mount('#root')
    setTimeout(() => {
        v.$mount('#root')
    }, 1000)
</script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19

    3. data的两种写法：

      const v = new Vue({
        el: '#root',
        // data的第一种写法： 对象式
        data: {
            name: 'aaa',
            address: '北京',
            a: 1
        }
    
     // data的第二种写法： 函数式
        data: function() {
            console.log(this);
            return {
                name: 'aaa'
            }
        }
    })

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17

    1-1-5 MVVM模型

      • M：模型（Model）：对应data中的数据

      • V：视图（View）：模板

      • VM：视图模型（ViewModel）：Vue实例对象

        • 数据绑定
        • DOM监听

        image-20220714090816507

      • data中所有属性，最后都出现在vm身上
      • vm身上所有属性，及Vue原型上所有属性，在Vue模板中都可以直接使用

    1-2 数据代理–双向数据绑定

    1-2-1 Object.defineProperty方法

    1. <script type="text/javascript">
       let number = 19
       let person = {
           name: '张三',
           sex: '男',
           age: number
       }
  
       Object.defineProperty(person, 'age', {
           // value: 18,
           // enumerble: true, // 控制属性是否可以枚举，默认值是false
           // writable: true, // 控制属性是否可以被修改，默认值是false
           // configurable: true, // 控制属性是否可以被删除，默认false
  
           // 当有人读取person的age属性时，get函数(getter)会被调用，且返回值就是age的值
           get: function() {
               console.log('有人读取age属性了');
               return number
           },
  
           //当有人修改person的age属性时，set函数(setter)就会被调用，且返回值就是age的值,且会收到修改的具体值
           set(value) {
               console.log('有人修改了age属性，且值是:', value);
               number = value
           }
       })
  
       console.log(person);
   </script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29

    1-2-2 数据代理概念

    1. 通过一个对象代理对另一个对象中属性的操作（读/写）

      <body>
    <!-- 数据代理： 通过一个对象代理对另一个对象中属性的操作：读/写 -->
    <script>
        let obj = {
            x: 100
        }
        let obj2 = {
            y: 200
        }

        Object.defineProperty(obj2, 'x', {
            get() {
                return obj.x
            },
            set(value) {
                obj.x = value
            }
        })
    </script>
</body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20

    1-2-3 Vue中的数据代理

    1. vm._data = options.data = data
      • new一个实例的时候 ：传递的是一个配置对象
    2. 数据代理图示

    ​ image-20220724091833112

    1. Vue中的数据代理：

      • 通过vm对象来代理data对象中属性的操作（读/写）
      • 好处： 方便操作data中的数据
      • 如果没有数据代理

        • 学校名称： {{_data.name}}

    2. 基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上,为每一个添加到vm上的属性,都指定一个getter/setter

      • 在getter/setter内部去操作(读/写)data中对应的属性

    1-3 事件处理

    1-3-1 事件处理

    1. 所有被vue管理的函数最好写成普通函数，否则this就不是vm了

    2. @click = "demo($event)"可以传参

    3. 事件的基本使用：

      ​ 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

      ​ 2.事件的回调需要配置在methods对象中，最终会在vm上；

      ​ 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

      ​ 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

      ​ 5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

    1-3-2 事件修饰符

    只有配置在data中的对象才会数据劫持+代理

    1-3-2-1 阻止事件的默认行为
    1. <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <a href="" @click.prevent="showInfo">点我提示信息</a>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#root',
            data: {
                name: 'aaa'
            },
            methods: {
                showInfo(e) {
                    e.preventDefault();
                    alert('同学你好')
                }
            }
        })
    </script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • @click.prevent = "showInfo()"
      • e.preventDefault()
    1-3-2-2 事件修饰符
      • prevent： 阻止默认事件（常用）
        • e.preventDefault()
      • stop： 阻止事件冒泡
        • e.stopPropagation()
      • once： 事件只触发一次
      • capture： 使用事件的捕获模式
      • self ： 只有event.target是当前操作的元素是才触发事件
        • 阻止冒泡
      • passive ： 事件的默认行为立即执行，无需等待事件回调执行完毕
        • 移动端
    2. 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>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <style>
        .box1 {
            height: 400px;
            width: 300px;
            background-color: red;
        }
        
        .box2 {
            height: 100px;
            width: 200px;
            background-color: blue;
        }
    style>
head>

<body>
    
    <div id="root">
        <h2>欢迎来到{{name}}学习h2>
        
        <a href="" @click.prevent="showInfo">点我提示信息a>
        
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息2button>
        div>
        
        <button @click.once="showInfo">事件之触发一次button>
        
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            div>
        div>
        
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息2button>
        div>
    div>
    <script type="text/javascript">
        new Vue({
            el: '#root',
            data: {
                name: 'aaa'
            },
            methods: {
                showInfo(e) {
                    e.preventDefault(); // 阻止默认事件
                    e.stopPropagation(); // 阻止冒泡
                    alert('同学你好')
                },
                showMsg(msg) {
                    console.log(msg);
                }
            }
        })
    script>
body>

html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69

    1-3-3 键盘事件

    1. Vue中常用的按键别名：

      • 回车：enter
      • 删除：delete（捕获“删除”和“退格”键）
      • 退出： esc
      • 空格： space
      • 上： up
      • 下： down
      • 左： left
      • 右： right

    2. Vue未提供别名的按键，使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

      • @keyup.caps-lock = "showInfo"

    3. 系统修饰键： ctrl/alt/shift/meta

      • 配合keyup使用： 按下修饰键的同时，再按下其他键，随后释放其他键，时间才被触发
      • 配合keydown使用：正常触发事件
    4. 	<div id="root">
       <h2>欢迎来到{{name}}学习h2>
       <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
   div>
body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

    new Vue({
        el: '#root',
        data: {
            name: 'aaa'
        },
        methods: {
            showInfo(e) {
                // console.log(e.key,e.keyCode)
                console.log(e.target.value)
            }
        },
    })
script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
  • 相关阅读:
    【批处理DOS-CMD命令-汇总和小结】-添加注释命令（rem或::）
    苹果电脑好用的剪切板管理工具 Paste激活中文版最新
    MySQL主从复制原理剖析与应用实践
    日志审计设计-结合spring-aop实现
    nginx优先级和匹配方式
    deadline用WebService提交Job
    十年老程序员的职场教训，很受用
    Docker-Compose进行容器编排的简单使用
    【ArcGIS Pro二次开发】(71)：添加图层名称和路径到字段
    一篇必读的物联网平台物模型开发指南，为你解锁未来科技趋势
  • 原文地址：https://blog.csdn.net/hannah2233/article/details/126878716