[JavaScript知识库]第四十三周总结——Vue

Vue2

Vue Devtools

????Vue Devtools是一个浏览器插件，可以让你更好的调试Vue应用。但是当我打开B站的个人中心时，Vue Devtools插件亮起了，但是在控制台却没办法打开Vue Devtools。因为Vue Devtools是否开启，取决于Vue.config.devtools，如果设置Vue.config.devtools = false，则不开启Vue Devtools，设置Vue.config.devtools = true，则开启Vue Devtools。

Vue.js的基本了解

1. 可以下载并使用script引入
   • 开发版本
   • 生产版本
2. 可以使用CDN的形式
   • 学习时使用的CDN

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

   • 生产环境的CDN

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

   • 原生的ES Modules

         <script type="module">
             import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
         </script>
     

3. 可以npm

    npm install vue

4. 命令行工具-CLI
   ????官方提供了Vue CLI来创建Vue项目的脚手架，脚手架的基本创建如下：

5. npm install -g @vue/cli 安装

6. vue create vue_text 创建脚手架

7. vue inspect > output.js（建议不使用） 生成默认配置文件，这里生成的时Vue CLI脚手架默认配置文件，如果你的脚手架创建的路径有中文的话，生成的output.js里面会出现乱码的现象。output.js文件最好不要生成，如果不小心改了里面的代码，就可能使项目启动不起来，如果想要改配置可以在根目录下创建一个vue.config.js文件。

8. 开发版本
   ????如果你使用的是github上的vue这里就有个小坑，github仓库里面的/dist文件夹可能不存在，需要你自己创建。

    git clone https://github.com/vuejs/vue.git node_modules/vue
    cd node_modules/vue
    npm install

6. Bowe(Bower 只提供 UMD 版本。)
   ????看官网还介绍了Bower安装vue，这里我不太清楚Bower，就去找了找资料。
   ????Bower可用来收索、安装和卸载js、html、css之类的网络资源。Bower是Web开发中的一个前端文件包管理器，类似于Node模块的npm包管理器。bower依赖于git、node、npm。

npm install -g bower//全局安装bower
bower help//可以查看bower是否安装成功
bower init//初始化一个json文件，用来保存项目的配置
bower install jquery --save//下载最新的jquery
bower info jquery//显示jquery包的信息
bower search bootstrap//搜索bootstrap包
bower uninstall jquery//卸载jquery包

在找bower资料的时候了解了npm和bower的区别和其他的一些东西。

• npm和bower的区别
  • npm已经不局限于nodejs的模块管理了，如今前后端通吃。而bower是前端的模块安装工具，一切全部为前端考虑。
  • npm 与 bower 最大的区别就是: npm支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖,由程序员自己解决)
  • 参考文章
    • npm
    • yarn
    • pnpm
  • 参考文章
  • ni
    
    
    
    

Vue基本简单语法

• 模板语法-插值

  1. 使用“Mustache”语法 (双大括号) 的文本插值

      <div id="app"{{ message }}</div>
      var app = new Vue({
          el: '#app',
          data: {
              message: 'Hello Vue!'
          }
      })
  

  2. 使用v-once指令这个值将不会改变

      <span v-once>这个值将不会改变: {{ message }}</span>
  

  3. 使用v-html指令

      <p v-html="message"></p>
  

  4. v-bind指令为标签绑定属性

• 模板语法-指令(v-on和v-bind存在缩写)

  1. v-bind指令为标签绑定属性，例：id,class,url,src……(v-bind:url=“url”)
     • 缩写:href=“url”/:[key]=“url”
     • 动态参数v-bind:[urls]=“url”
  2. v-on指令监听事件(v-on:click=“click”)(@click=“click”)
     • 缩写@click=“click”/@[event]=“click”
     • 动态参数v-on:[click]=“click”

      <div id="app-5"><button v-on:click="reverseMessage">反转消息</button></div>
      var app5 = new Vue({
          el: '#app-5',
          data: {
              message: 'Hello Vue.js!'
          },
          methods: {
              reverseMessage: function () {
                  this.message = this.message.split('').reverse().join('')
              }
          }
      })
  

  1. 有时候需要访问原始的DOM事件，可以用特殊变量$event把它传入方法。
  ```
    <button v-on:click="event('message', $event)">
      Submit
    </button>
  ```
  

  3. v-model实现表单输入和应用状态之间的双向绑定
  4. ※动态参数注意事项
     1. 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写

• 条件渲染

  1. v-if
  2. v-else
  3. v-if-else
  4. v-show:与v-if不同的是v-show的DOM还是保留在页面中的，只是通过切换css的display来使元素隐藏和显示
     • ※注意:v-show 不支持 元素，也不支持 v-else。

• 列表渲染

  1. v-for
     
     
     
     

Vue组件

????子父组件之间的相互传值

• 父组件

<template>
    <Code :email="email" :changeMsg="handleChangeMsg" />
</template>
<script>
import Code from "./Code.vue";
export default {
  name: "Sign",
  data() {
    return {
      email: "",
      codes: "",
    };
  },
  methods: {
    handleChangeMsg(values) {
      this.codes = values;
    },
  },
  components: {
    Code,//注册子组件
  },
};
</script>

• 子组件

<template>
  <div class="verificationC">
    <input
      v-model="code"
      type="text"
      placeholder="请输入……"
    />
  </div>
</template>
<script>
export default {
  name: "Code",
  props: ["email", "changeMsg"],//接收父组件传来的参数，this.email和this.changeMsg()使用参数。
  data() {
    return {
      code: "",
      delayCode: true,
    };
  },
  watch: {
    code() {
      this.handleChangeMsg(this.code);
    },
  },
  methods: {
    //将输入框中的值给父组件
    handleChangeMsg(values) {
      this.changeMsg(values);
    },
  },
};
</script>

生命周期函数

初始化阶段

初始化阶段流程

1. new Vue(),Vue实例
2. init Events & Lifecycle 初始化生命周期函数和事件
3. beforeCreate - beforeCreate()生命周期函数执行
4. Init injections&reactivity - Vue内部添加data和methods等
5. created - created()生命周期函数执行
6. Has el option? – 是否有el选项 – 检查要挂到哪里
   • 没有el，调用$mount()方法有，继续检查template选项
   • 有el，检查template选项

beforeCreate(初始化界面前)

created(初始化界面后)

挂载阶段

挂载阶段流程

1. template选项检查
   • 有，编译template返回render渲染函数
   • 无，编译el选项对应标签作为template(要渲染的模板)
2. 虚拟DOM挂载成真实DOM之前
3. beforeMount - beforeMount()生命周期函数被执行
4. 把虚拟DOM和渲染的数据一并挂到真实DOM上
5. 真实DOM挂载完毕
6. mounted - mounted()生命周期钩子函数被执行

beforeMount(渲染DOM前)

mounted(渲染DOM后)

更新阶段

更新阶段流程

1. 当data里数据改变, 更新DOM之前
2. beforeUpdate - beforeUpdate()生命周期函数被执行
3. 虚拟DOM重新渲染, 打补丁到真实DOM
4. updated - updated()生命周期钩子函数被执行

beforeUpdate(更新数据前)

updated(更新数据后)

销毁阶段

销毁阶段流程

1. $destroy()被调用 - 组件DOM被移除(例v-if)
2. beforeDestroy - beforeDestroy()生命周期函数被执行
3. 拆卸数据监视器、子组件和事件侦听器
4. 实例销毁后, 最后触发一个钩子函数
5. destroyed - destroyed()生命周期钩子函数被执行

beforeDestroy(卸载组件前)

destroyed(卸载组件后)

计算属性和侦听器

计算属性(computed)

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

这里我当时觉得，在methods中定义函数，也可以实现相同的效果，但是我看Vue官网上介绍了计算属性和在methods定义方法的不同之处是计算属性是基于它们的响应式依赖进行缓存的只在相关响应式依赖发生改变时它们才会重新求值。这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每次调用方法总会再次执行函数。

侦听器(watch)

<div id="example">
  <p>Original message: "{{ message }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  watch:{
      message(){
          //当this.message中的数据变化是，执行这里面的代码。
      }
  }
})

这里我一直有一点疑问的地方，如果data中的数据为msg:{message:‘Hellow’}或者data中的数据为数组时，在watch中怎么写才能监听message的变化呢？以下资料来源

• watch监听数组元素

//第一种方法：
created() {
  this.$watch(
    () => this.listMenu[4].value,
    function(val, old) {}
  )
}
 
//第二种方法：
computed:{
	watchInputData(){ return this.listMenu[4].value }
},
watch:{
  watchInputData() {
    //这里即可监听到
  }
}

• watch监听对象元素

/*普通watch无法监听到对象内部属性变化，只有data中数据改变时才能监听变化。
因此可添加deep属性:深层遍历，会监听对象内所有属性都变化。注意监听数组的变更不需要这么做。*/
watch: {
//第一种监听所有属性的变化,直接监听整个属性，消耗大不建议
    obj: {
      handler(newValue, oldValue) {
        console.log("对象所有属性监听", newValue, oldValue);
      },
      deep: true
    },
 
//第二种监听对象一个属性的变化
"obj.name": {
       immediate: true, //true首次加载执行，默认false
      handler(newValue, oldValue) {
        console.log("单个属性监听", newValue, oldValue);
      }
    },
}
同样也可以设置计算属性computed来监听 
omputed: {
  getName: function() {
    return this.obj.name
  }
}
watch: {
   getName: {
     handler: function() {
      //监听
     },
   }
}

修饰符

v-model修饰符

1. .lazy
   ????在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。可以使用lazy修饰符，从而转为change事件之后进行同步。

  <input v-model.lazy="msg">

2. .number
   ????如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符，当输入框失去焦点后将字符串转换成数字。

  <input v-model.number="age" type="number">

3. .trim
   ????如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

  <input v-model.trim="msg">

事件修饰符

1. .stop

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

2. .prevent

<!-- 阻止默认事件的执行，提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

3. .capture

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

4. .self

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

5. .once

<!-- 事件只触发一次 -->
<div v-on:click.once="doThat">...</div>

6. .passive

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

注意：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符(@keyup.Enter=“show”||@keyup.13=“show”)

????keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
????为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

1. Vue中常用的按键别名
   - 回车=>Enter
   - 删除=>delete
   - 退出=>esc
   - 空格=>space
   - 上=>up
   - 下=>down
   - 左=>left
   - 右=>right
   - tab=>tab(tab键不能用keyup需要用keydown,因为在按下tab的时候输入框失去了焦点,使tab无法触发)

    不同的键(系统修饰键,配合keyup使用必须按下修饰键的同时再按下其他键，然后释放其他键，事件才能触发。配合keydown使用直接触发。)
    - ctrl=>ctrl
    - alt=>alt
    - meta=>meta
    - shift=>shift
   

2. 在函数中打印e.key,e.keyCode可以得到按键的值

3. .exact 修饰符
   ????.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

  <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
  <button v-on:click.ctrl="onClick">A</button>

  <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  <button v-on:click.ctrl.exact="onCtrlClick">A</button>

  <!-- 没有任何系统修饰符被按下的时候才触发 -->
  <button v-on:click.exact="onClick">A</button>

3. 鼠标修饰符

• left
• right
• middle

自定义事件

过渡动画

过渡类名

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-to：
3. v-enter-active：
4. v-leave：
5. v-leave-to：
6. v-leave-active：

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖