Vue2 學(xué)習(xí)第一天

1. 什么是 vue?

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。

2. vue 歷史

vue 是在 2013 年創(chuàng)建的，vue3 是 2020 出現(xiàn)的，現(xiàn)在主要是用 vue2，創(chuàng)新公司用的是 vue3

vue 的作者是尤雨溪，vue 的搜索熱度比 react 更高，國內(nèi) vue 用的人更多，國外的用 react 多。

3. vue 學(xué)習(xí)的內(nèi)容

注：標(biāo)黃是學(xué)習(xí)的內(nèi)容

今天學(xué)習(xí)：常用指令，事件，生命周期，計(jì)算屬性，watch

4. Vite 構(gòu)建 Vue 項(xiàng)目

• 在 cmd 中輸入以下代碼，構(gòu)建 vue 項(xiàng)目。

pnpm create vue@2

cd vue_demo //進(jìn)入vue_demo文件夾
pnpm install //下載相關(guān)的依賴包（下載別人寫的代碼）
pnpm dev //打開終端，進(jìn)入網(wǎng)頁

小 tips：如果下載很慢，可以用 ctrl+c 進(jìn)行中斷，重下；也可以切換淘寶源來下載。

• 在終端輸入**pnpm dev**打開終端

• 以下是 vue 的目錄結(jié)構(gòu)介紹

可以下載vetur插件，可以進(jìn)行代碼提示。

5. Vite 配置文件說明

import legacy from "@vitejs/plugin-legacy";
import vue2 from "@vitejs/plugin-vue2";

@的含義：@這里是代替了src路徑。

6. main.js 文件說明

// import 就是引入文件
import Vue from "vue";
// App是我們的根組件
import App from "./App.vue";
import "./assets/main.css";// h函數(shù)就是幫助我們渲染頁面的函數(shù)
new Vue({el: "#app",render: (h) => h(App),
});

7. Vue 文件總結(jié)

vue 文件主要由template、script和style組成。

<template><div></div>
</template><script>
export default {name: "",
};
</script><style scoped></style>

• template 模板用法

  template 是我們的視圖，可以在里面寫 html

  <template><div></div>
  </template>
  

• 綁定事件

  @click叫做指令 v-on:click ，@是 v-on 的簡寫 v-on的意思就是觸發(fā)一個(gè)事件 ，使用**v-on:xxx**或 **@xxx**綁定事件，其中 xxx 是事件名；addNum就是具體的事件函數(shù)。

  <button @click="addNum">+1</button>
  

• 大胡子語法

  {{ }}大胡子語法，大胡子里面可以放我們data中的變量

  <span>{{ num }}</span>
  

• data 數(shù)據(jù)源

  • data 是我們的數(shù)據(jù)源，vue 會對 data添加監(jiān)聽，能夠監(jiān)聽到 data 中數(shù)據(jù)的變化，然后觸發(fā)視圖更新
  • data 寫法比較奇怪，是一個(gè)函數(shù)，函數(shù)返回一個(gè)對象，對象中的數(shù)據(jù)才是我們的數(shù)據(jù)源

  export default {data() {return {num: 0,};},
  

• methods 配置函數(shù)

  • methods 就是我們的事件處理中心，所有的函數(shù)都放在里面
  • methods 中配置的函數(shù)，不要用箭頭函數(shù)！否則 this 就不是 vm 了
  • methods 中配置的函數(shù)，都是被 Vue 所管理的函數(shù)，this 的指向是vm或組件實(shí)例對象

    methods: {addNum() {console.log(this);this.num++;},},
  

• 整體 vue 文件

  <template><div id="test"><button @click="addNum">+1</button><span>{{ num }}</span></div>
  </template><script>
  export default {data() {return {num: 0,};},methods: {addNum() {console.log(this);this.num++;},},
  };
  </script><style>
  #test {margin: auto;
  }
  </style>
  

8. v-if 條件渲染

• v-if

  • 寫法：

    • v-if="表達(dá)式"

    • v-else-if="表達(dá)式"

    • v-else="表達(dá)式"

  • 適用于：切換頻率較低的場景。

  • 特點(diǎn)：直接通過刪除 DOM 元素來控制顯隱。

  • 注意：v-if可以和v-else-if、v-else一起使用，但要求結(jié)構(gòu)不能被“打斷”。

• v-show

  • 寫法：v-show="表達(dá)式"
  • 適用于：切換頻率較高的場景。
  • 特點(diǎn)：不展示的 DOM 元素未被移除，僅僅是使用樣式**display:none**隱藏掉

v-if 和 v-show 的區(qū)別：

1. 需要頻繁操作 DOM 元素顯隱的時(shí)候，用 v-show 性能會更好
2. 使用v-if的時(shí)，元素可能無法獲取到，而使用v-show一定可以獲取到。

<template><div id="wrapper"><button v-on:click="toggle">toggle</button><p v-if="isShow">hello world</p></div>
</template><script>
export default {data() {return {isShow: true,};},methods: {toggle() {this.isShow = !this.isShow;},},
};
</script><style></style>