Vue基础知识「持续更新中」

Posted 2021-09-10 良雨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础知识「持续更新中」相关的知识，希望对你有一定的参考价值。

文章目录

- 第一章、Vue核心

第一章、Vue核心

1.1、初始Vue

<div id="root"></div> 是一个容器，容器中写的不是原始的html代码，而是Vue的模板代码
所谓的模板代码，就是html+js的结合体
{{xxx}} xxx会自动读取data中的xxx属性
一个Vue实例只能服务于一个容器

<body>
    <!-- 
        1. <div id="root"></div> 是一个容器，容器中写的不是原始的html代码，而是Vue的模板代码
        2. 所谓的模板代码，类似于React中的jsx，是html+js的结合体
        3. {{xxx}} xxx会自动读取data中的xxx属性
        4. 一个Vue实例只能服务于一个容器
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>{{school.message}}</h1>
        <h1>我就读于{{school.name}}</h1>
        <h1>这所学校位于{{school.address}}</h1>
        <!-- 如果是函数，需要加小括号执行 -->
        <h1>我学习的专业是{{school.subject()}}</h1>

        <hr>
        <!-- 显示的是name  "家里蹲大学"-->
        <h1>{{school.name,school.subject}}</h1>
        <!-- 显示的地址 "中国家里蹲省"-->
        <h1>{{school.message && school.address}}</h1>
    </div>

    <!-- IMPORT JS -->
    <script src="../js/vue.js"></script>
    <script>
        // 创建一个Vue实例，并且传入配置对象
        new Vue({
            el: '#root', //el 用于指定当前Vue实例为哪个容器服务，值是选择器字符串 
            data: { // data 是存储数据的地方 为容器root提供数据，值为一个对象，类似于React中的state 
                school: {
                    message: '大家好，我叫even',
                    name: '家里蹲大学',
                    address: '中国家里蹲省',
                    subject: () => '网络编程',
                }
            }
        });
    </script>
</body>

1.2、Vue中的模板语法

插值语法
- 功能：用于解析标签体内的内容
- 语法：{{xxx}}会作为表达式去解析，且可以自动读取到data里面的xxx属性
指令语法
- 功能：用于解析标签「包括：标签属性、标签内容、事件绑定…」
- 举例：v-bind:href=“xxx” 或简写为：:

<body>
  <!-- 
    vue模板语法有两大类：
      + 插值语法
          功能：用于解析标签体内的内容
          语法：{{xxx}}会作为表达式去解析，且可以自动读取到data里面的xxx属性
      + 指令语法
          功能：用于解析标签「包括：标签属性、标签内容、事件绑定......」
          举例：v-bind:href="xxx" 或简写为：:
   -->
   
  <!-- 准备一个容器 -->
  <div id="root">
    <h1>{{message}}</h1>
    <h1>{{message.toUpperCase()}}</h1>

    <hr>
    <h2>指令语法</h2>
    <a v-bind:href="url">百度一下哦</a>
    <a :href="url">点我看猫猫</a>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: '#root',
      data: {
        message: 'kele',
        url: 'http://www.baidu.com'
      }
    });
  </script>
</body>

1.3、Vue中的数据绑定

单向数据绑定(v-bind): 数据只能从data流向页面
双向数据绑定(v-model): 数据不仅可以从data流向页面，也可以从页面流向data
注意：
- 双向数据绑定一般都是针对有value属性且可以输入内容的，例如： <input><select><textarea>等
- v-model:value 可以简写为v-model 因为v-model默认收集的就是value值

<body>
  <!-- 
    1. 单向数据绑定(v-bind): 数据只能从data流向页面
    2. 双向数据绑定(v-model): 数据不仅可以从data流向页面，也可以从页面流向data
    备注: 
      1. 双向数据绑定一般都是针对表单类元素
      2. v-model:value 可以简写为v-model 因为v-model默认收集的就是value值
   -->

  <!-- 准备一个容器 -->
  <div id="root">
    <!-- 单项数据绑定（v-bind）：<input type="text" v-bind:value='message'>
    双向数据绑定（v-model）：<input type="text" v-model:vlue='message'> -->

    <p>
      单项数据绑定（v-bind）：<input type="text" v-bind:value='message'>
    </p>
    <p>
      双向数据绑定（v-model）：<input type="text" v-model='message'>
    </p>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: '#root',
      data: {
        message: '数据绑定'
      }
    });
  </script>
</body>

1.4、初始MVVM

注意：MVVM采用的是双向数据绑定（data-binding）所有数据之间的通信都是双向的

M：模型 Model，对应data中的数据
V：视图 View，对应模板代码
VM：视图模型ViewModel，对应Vue实例对象。它是 View 层和 Model 层沟通的桥梁，一方面实现了数据绑定（Data Binding），将 Model 层的数据改变实时的反应到 View 层中。另一方面它实现了对文档对象模型的监听（DOM Listener），当DOM发生一些事件（点击，滚动，touch等）时，可以监听，并在需要的情况下改变对应的 Model 层的数据。

<body>
  <!-- 
  MVVM的理解：
    + M：模型(Model) 对应data中的数据
    + V：视图(View) 对应模板代码
    + VM：视图模型(ViewModel) 对应Vue实例对象
 -->
  <div id="root">
    <h2>{{message}}，天天向上</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // data的第一种写法，data是一个对象
    const vm = new Vue({
      el: '#root',
      data: {
        message: '好好学习',
      }
    });

    // 观察发现：通过vm可以看到data中的属性「注意不是看到data」
    setTimeout(function () {
      console.log(vm.message); //通过vm可以读取到data中的属性
      vm.message = '天天向上'; //通过vm还可以修改data中的数据，而且修改后页面中的数据会自动更新
    }, 1000);

  </script>
</body>

1.5 data和el的两种写法

el有两种写法

new Vue的时候直接传递el属性「常用」
先new Vue 然后再通过 vm.$mount(’#root’) 指定el的属性「不常用」

data有两种写法

对象式：非组件编码是可以写对象，也可以写函数
函数式：组件编码时data必须写成函数式，且要返回一个对象

Vue中一个最最重要的原则：由Vue所调用的函数，都不要写成箭头函数，一旦写了箭头函数，this的指向就不对了「或许是undefined、或许是window」

<body>
  <!-- 
    data与el的两种写法
      1. el有两种写法：
          (1) new Vue的时候直接传递el属性「常用」
          (2)先new Vue 然后再通过 vm.$mount('#root') 指定el的属性 「不常用」
      2. data有两种写法
          (1) 对象式：非组件编码是可以写对象，也可以写函数
          (2) 函数式：组建编码时data必须写成函数式
      Vue中一个最最重要的原则：
          由Vue所调用的函数，都不要写成箭头函数，一旦写了箭头函数，this的指向就不对了「或许是undefined、或许是window」
 -->
  <div id="root">
    <h2>{{message}}，天天向上</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    /*  el的第一种写法（常用）
     new Vue({
       el: '#root',
       data: {
         message: '好好学习',
       }
     });
     */

    /*el的第二种写法（不常用）
        const vm = new Vue({
          el: '#root',
          data: {
            message: '好好学习',
          }
        });
        vm.$mount('#root');
    */

    // data的第一种写法，data是一个对象
    new Vue({
      el: '#root',
      data: {
        message: '好好学习',
      }
    });

    // data的第二种写法，data是一个函数，且要返回一个对象（组件中必须用函数式data）
    new Vue({
      el: '#root',
      /* 
        特别注意：
          1. data不要写成箭头函数，要写成普通函数，否则this的指向就是window，而不是Vue实例了
          2. 若使用函数式data，Vue会帮助我们调用data函数，Vue就会得到返回的数据对象，从而使用，this是Vue的实例对象 
       */
      data: function () { //
        console.log(this); //Vue实例本身
        return {
          message: '好好学习',
        }
      }
    });

  </script>
</body>

1.6、数据代理

在vue2.x版本中，数据劫持是用过Object.defineProperty这个API来实现

Object.defineProperty(obj, prop, desc)

obj 需要定义属性的当前对象
prop 当前需要定义的属性名
desc 属性描述符

<body>
  <script>
    let person = {};
    // set和get中的this都是当前对象
    Object.defineProperty(person, 'name', {
      set(value) { //当修改person.name的时候，set会被调用，set会收到新的值
        console.log("我是set我被调用了", value);
      },
      get() { //当读取person.name的时候，get会被调用，
        console.log("我是get我被调用了");
      },
    });
    person.name = 'kele';
    console.log(person.name);

    // =============================================================

    // 模拟数据代理
    let _data = { message: "好好学习" };
    let vm = {};
    Object.defineProperty(vm, 'message', {
      set(value) {
        _data.message = value;
      },
      get() {
        return _data.message;
      },
    })
    console.log(vm);
  </script>
</body>

关于Vue中的数据代理

什么是数据代理？
- 配置对象中的data数据，会被收集到vm._data中，然后通过 Object.defineProperty 让vm上拥有data中所有的属性
- 当访问vm中的name时，返回的是_data中同名属性的值
- 当修改vm中的name时，修改的是_data中同名属性的值
为什么要数据代理？
- 为了更方便的读取和修改_data中的数据，不做数据代理，就要通过：vm._data.xxx 来访问数据
扩展思考：为什么要将数据先收集到_data中，然后再代理出去呢？
- 为了更高效的监控数据「直接收集到vm上效率太低了」

<body>
  <!-- 
    关于Vue中的数据代理
      1. 什么是数据代理？
        (1). 配置对象中的data数据，会被收集到vm._data中，然后通过 Object.defineProperty 让vm上拥有data中所有的属性
        (2). 当访问vm中的name时，返回的是_data中同名属性的值
        (3). 当修改vm中的name时，修改的是_data中同名属性的值

      2. 为什么要数据代理
        为了更方便的读取和修改_data中的数据，不做数据代理，就要通过：vm._data.xxx 来访问数据

      3. 扩展思考：为什么要将数据先收集到_data中，然后再代理出去呢？
        为了更高效的监控数据「直接收集到vm上效率太低了」
   -->

  <!-- 准备一个容器 -->
  <div id="root">
    <h2>公司名称：{{name}}</h2>
    <h2>公司地址：{{address}}</h2>
    <h2>招聘岗位：{{job}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: '中关村科技有限公司',
        address: '北京市中关村',
        job: '前端开发工程师'
      }
    });
    console.log(vm);

  </script>
</body>

1.7、事件处理

绑定监听

v-on:xxx=“fun”
@xxx=“fun”
@xxx=“fun(参数)”
默认事件形参: event
隐含属性对象: $event

事件修饰符

.prevent: 阻止事件的默认行为「对应原生JS中的：event.preventDefault()」
.stop : 停止事件冒泡「对应原生JS中的：event.stopPropagation()」
事件修饰符可以连续写，且顺序可以随意改变

按键修饰符

keycode : 操作的是某个keycode值的键
keyName : 操作的某个按键名的键(少部分)

<body>
  <!-- 准备一个容器 -->
  <div id="root">
    <h2>欢迎学习{{message}}</h2>

    <!-- 事件绑定的---标准方式 -->
    <p>
      <button v-on:click='show1'>点我显示信息 (v-on绑定)</button>
    </p>

    <!-- 事件绑定的---简写方式 -->
    <p>
      <button @click='show1'>点我显示信息 (@绑定的)</button>
    </p>

    <!-- 事件绑定的---传递参数 -->
    <p>
      <button @click='show2($event,666)'>点我显示信息 (@绑定的)</button>
    </p>

    <!-- 事件绑定的---阻止默认行为，prevent叫做事件修饰符 -->
    <p>
      <a href="https://www.baidu.com" @click.prevent='show3'>点我跳转链接 (@绑定的)</a>
    </p>

    <!-- 事件绑定的---阻止事件冒泡，stop事件修饰符-->
    <div @click='show4'>
      <button @click.stop='show4'>点我提示信息（阻止默认行为）</button>
    </div>

    <!-- 事件绑定的---阻止事件冒泡，事件修饰符可以连续写，且顺序可以随意改变-->
    <div @click='show4'>
      <a href="https://www.baidu.com" @click.stop.prevent='show4'>点我提示信息（阻止默认行为，事件修饰符可以连写）</a>
    </div>

    <hr>
    <!-- 键盘事件 -->
    <!-- <input @keyup.enter='show5' type="text" placeholder="请输入用户名"> -->
    <!-- <input @keyup.13='show5' type="text" placeholder="请输入用户名"> -->
    <input @keyup.left='show5' type="text" placeholder="请输入用户名">
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: '#root',
      data: { //用于配置数据
        message: 'web前端',
      },
      methods: { //用于配置方法
        show1(event) { //此处的show函数一定一定不要写成箭头函数，否则this就指向window了
          //  console.log(this); this是：Vue实例
          alert(event.target.innerText);
        },

        show2($event, number) {
          console.log(event);
          alert(event.target.innerText + number)
        },

        show3(event) {
          // 基于原生js阻止默认行为
          // event.preventDefault();
          alert(event.target.innerText);
        },

        show4(event) {
          // 基于原生js阻止冒泡行为
          // event.stopPropagation();
          alert('点我提示信息（阻止默认行为）');
        },
        show5(event) {
          // 靠程序员自己判断按键
          // if (event.keyCode !== 13) return; 输出按键编码        
          alert(event.target.value);
        }
      },

    });
  </script>
</body>

1.8、computed计算属性

使用场景：computed计算属性，要显示的数据不存在，需要通过计算得来
优势：与methods相比较，computed内部有缓存，效率更高
注意：计算属性是用于直接读取使用的，不要加()

<body>
  <!-- 
    1. computed计算属性，要显示的数据不存在，需要通过计算得来
    2. fullName函数底层用到的是对象的setter和getter方法
    3. 执行的时机：
      - 初始显示的时候会被执行一次
      - 当依赖的属性发生变化时会被再次调用
    4. 优势：与methods相比较，computed内部有缓存，效率更高
    5. 备注：计算属性是用于直接读取使用的，不要加()


   -->
  <div id="root">
    姓：<input type="text" v-model='firstName'><br />
    名：<input type="text" v-model='lastName'><br />
    <span>全名：{{fullName}}</span小程序各种功能代码片段整理---持续更新
 [总结]vue开发常见知识点及问题资料整理（持续更新）
 Vue最全知识点（基础到进阶，覆盖vue3.0，持续更新整理，欢迎补充讨论）
 vue基础教程总结篇，用最短的时间入门vue.js（持续更新...）
 vue基础教程总结篇，用最短的时间入门vue.js（持续更新...）
 vue基础教程总结篇，用最短的时间入门vue.js（持续更新...）