国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Vue3入門指南：零基礎(chǔ)小白也能輕松理解的學習筆記

2年前作者：小蔣的技術(shù)棧記錄分類：Toy博客閱讀(52)違法舉報

這篇具有很好參考價值的文章主要介紹了Vue3入門指南：零基礎(chǔ)小白也能輕松理解的學習筆記。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

創(chuàng)建項目

配置 node.js > 15.0
命令行創(chuàng)建命令 npm init vue@latest
cd 項目名
npm install
npm run dev
cnpm下載方法，更快
設(shè)置 VSCode 自動保存
官方教程

開發(fā)環(huán)境

VSCode + Volar
格式化代碼：Shift + Alt + F

項目目錄

.vscode：VSCode工具的配置文件
node_modules：Vue項目運行的依賴文件
public：資源文件夾（瀏覽器圖標）
src：源碼文件夾
.gitignore：git忽略文件
index. html：入口HTML文件
package. json：信息描述文件
README. md：注釋文件
vite.config.js：Vue配置文件

模板語法

<template>
  <h3>模板語法</h3>
  <p>{{ msg }}</p>
</template>

<script>
export default{
  data(){
    return {
      msg:"神奇的魔法"
    }
  }
}
</script>

綁定僅支持單一表達式：簡單算數(shù)，三目運算法，鏈式調(diào)用，能寫在 return 后面
想插 HTML，需要使用 v-html

屬性綁定

<template>
  <div v-bind:id="dynamicId" v-bind:class="dynamicClass">屬性綁定</div>
</template>

<script>
export default{
  data(){
    return{
      dynamicClass:"appClass",
      dynamicId:"appId"
    }
  }
}
</script>

<style>
.appClass{
  color:red;
  font-size: 30px;
}
</style>

v-bind 可以簡寫為：
動態(tài)綁定多個值

<template>
  <div v-bind="objectOfAttrs">屬性綁定</div>
</template>

<script>
export default{
  data(){
    return{
      objectOfAttrs:{
        class:"appclass",
        id:"appid"
      }
    }
  }
}
</script>

<style>
.appclass{
  color:red;
  font-size: 30px;
}
</style>

條件渲染

<template>
  <h3>條件渲染</h3>
  <div v-if="flag">你能看見我嗎?</div>
  <div v-else>那你還是看看我吧</div>
</template>

<script>
export default{
  data(){
    return{
      flag:false
    }
  }
}
</script>

<template>
  <h3>條件渲染</h3>
  <div v-if="type==='A'">A</div>
  <div v-else-if="type==='B'">B</div>
  <div v-else-if="type==='C'">C</div>
  <div v-else>Not A/B/C</div>

</template>

<script>
export default{
  data(){
    return{
      type:'D'
    }
  }
}
</script>

v-show 和 v-if 一樣但不能配合 v-else
v-show 有較高初始開銷，v-if 有較高切換開銷

列表渲染

<template>
  <h3>列表渲染</h3>
  <p v-for="item in names">{{ item }}</p>
</template>

<script>

export default{
  data(){
      return{
          names:["百戰(zhàn)程序員","尚學堂","IT"]
      }
  }
}
</script>

<template>
  <h3>列表渲染</h3>
  <div v-for="item in result">
    <p>{{item.title}}</p>
    <img v-bind:src="item.avatar" alt="">
  </div>
</template>

<script>

export default {
  data() {
    return {
      result: [
        {
          "id": 2261677,
          "title": "鄂爾多斯|感受一座城市的璀璨夜景感受一座城市，除了白日里的車水馬龍，喧囂繁華",
          "avatar": "https://pic.qyer.com/avatar/002/25/77/30/200?v=1560226451"
        },
        {
          "id": 2261566,
          "title": "成都這家洞穴暗黑風咖啡廳酷斃了！早C晚A走起\n成都天氣這么熱\n咖啡\n人必",
          "avatar": "https://pic.qyer.com/avatar/011/07/08/69/200?v=1572185180"
        },
        {
          "id": 2261662,
          "title": "【川西新龍-措卡湖】措卡湖，意為“亂石叢中的黑色海水”，神秘小眾原汁原味。深",
          "avatar": "https://pic.qyer.com/avatar/009/88/48/58/200?v=1507386782"
        }
      ]
      
    }
  }
}
</script>

items 可以提取出更多內(nèi)容 (value,key,index)
in 可以用 of 來替換
通過 :key=“item.id” 管理狀態(tài)，保證數(shù)組變化時，不進行重新渲染

事件處理

內(nèi)聯(lián)事件處理器

<template>
  <h3>內(nèi)聯(lián)事件處理器</h3>
  <!-- <button v-on:click="count++">Add</button> -->
  <button @click="count++">Add</button>
  <p>{{count }}</p>
</template>

<script>
export default{
  data(){
    return{
      count:0
    }
  }
}
</script>

方法事件處理器（常用）

<template>
  <h3>方法事件處理器</h3>
  <button @click="addCount">Add</button>
  <p>{{count }}</p>
</template>

<script>
export default{
  data(){
    return{
      count:0
    }
  },
  //所有的方法函數(shù)都放在這里
  methods:{
    addCount(){
      this.count++;
      console.log("點擊了")
    }
  }
}
</script>

事件參數(shù)

獲取 event 事件

<template>
  <h3>Vue 中的 event 對象就是原生的 event</h3>
  <button @click="addCount">Add</button>
  <p>{{count }}</p>
</template>

<script>
export default{
  data(){
    return{
      count:0
    }
  },
  //所有的方法函數(shù)都放在這里
  methods:{
    addCount(event){
      this.count++;
      event.target.innerHTML="Add"+this.count;
    }
  }
}
</script>

事件傳參

<template>
  <h3>事件傳參</h3>
  <p @click="getNameHandle(item, $event)" v-for="(item, index) of names" :key="index">{{ item }}</p>
</template>

<script>
export default {

  data() {
    return {
      names: ["iwen", "ime", "frank"]
    }
  },


  //所有的方法函數(shù)都放在這里
  methods: {
    getNameHandle(name, e) {
      console.log(name, e);
    }
  }
}
</script>

事件修飾符

阻止默認事件

<template>
 <h3>事件修飾符</h3>
 <a @click.prevent="clickHandle" href="https://itbaizhan.com">百戰(zhàn)程序員</a>
</template>

<script>
export default{
  data(){
    return{

    }
  },
  methods:{
    clickHandle(e){
      //阻止默認事件
      // e.preventDefault();
      console.log("點擊了");
    }
  }
}
  
</script>

阻止事件冒泡

<template>
 <h3>事件修飾符</h3>
 <div @click="clickDiv">
  <p @click.stop="clickP">測試冒泡</p>
 </div>
</template>

<script>
export default{
  data(){
    return{

    }
  },
  methods:{
    clickDiv(){
      console.log("div");
    },
    clickP(){
      console.log("P");
    }
  }
}
</script>

數(shù)組變化偵測

變更方法

push
pop
shift
unshift
splice
sort
reverse

替換一個數(shù)組

filter
concat
slice

<template>
 <h3>數(shù)組變化偵聽</h3>
 <button @click="addListHandle"></button> 
 <ul>
    <li v-for="(item,index) of names" :key="index">{{  item }}</li>
  </ul>
  <button @click="concatHandle">合并數(shù)組</button>
  <h3>數(shù)組1</h3>
  <p v-for="(item,index) of nums1" :key="index">{{ item }}</p>
  <h3>數(shù)組 2</h3>
  <p v-for="(item,index) of nums2" :key="index">{{ item }}</p>
</template>

<script>
export default{
  data(){
    return{
      names:["iwen","ime","frank"],
      nums1:[1,2,3,4,5],
      nums2:[6,7,8,9,10]
    } 
  },
  methods:{
    addListHandle(){
      //會引起 UI 自動更新
      // this.names.push("sarra")
      //不會引起 UI 自動更新
      //this.names.concat(["sarra"])
      this.names = this.names.concat(["sarra"])
    },
    concatHandle(){
      this.nums1 = this.nums1.concat(this.nums2)
    }
  }
}
</script>

計算屬性

沒引入計算屬性，不推薦

<template>
  <h3>{{  itbaizhan.name }}</h3>
  <p>{{ itbaizhan.content.length>0?'Yes':'No' }}</p>
</template>

<script>
export default{
  data(){
    return{
      itbaizhan:{
        name:"百戰(zhàn)程序員",
        content:["前端","Java","Python"]
      }
    }
  }
}
</script>

引入計算屬性

<template>
  <h3>{{  itbaizhan.name }}</h3>
  <p>{{ itbaizhanContent }}</p>
</template>

<script>
export default{
  data(){
    return{
      itbaizhan:{
        name:"百戰(zhàn)程序員",
        content:["前端","Java","Python"]
      }
    }
  },
  computed:{
    itbaizhanContent(){
        return this.itbaizhan.content.length>0?'Yes':'No'
    }
  }
}
</script>

計算屬性會基于響應(yīng)式依賴被緩存，一個計算屬性僅會在響應(yīng)式依賴更新時才會被重新計算
方法：會在重新渲染發(fā)生時再次執(zhí)行函數(shù)

class 綁定

單對象綁定

<template>
  <p :class="{ 'active':isActive,'text-danger':hasError}">Class 樣式綁定</p>
</template>

<script>
export default{
  data(){
    return{
      isActive:false
    }
  },

}
</script>

<style>
.active{
  color: red;
  font-size: 30px;
}
</style>

<template>
  <p :class="{ 'active':isActive,'text-danger':hasError}">Class 樣式綁定</p>
</template>

<script>
export default{
  data(){
    return{
      isActive:true,
      hasError:true
    }
  },

}
</script>

<style>
.active{

  font-size: 30px;
}

.text-danger{
  color: red;
}
</style>

多對象綁定

<template>
  <p :class="classObject">Class 樣式綁定</p>
</template>

<script>
export default{
  data(){
    return{
      classObject:{
        'active':true,
        'text-danger':false
      }
    }
  },

}
</script>

<style>
.active{

  font-size: 30px;
}

.text-danger{
  color: red;
}
</style>

綁定數(shù)組

<template>
  <p :class="[arrActive,arrHasError]">Class 樣式綁定</p>
</template>

<script>
export default{
  data(){
    return{
      arrActive:"active",
      arrHasError:"text-danger"
    }
  },

}
</script>

<style>
.active{
  font-size: 30px;
}

.text-danger{
  color: red;
}
</style>

數(shù)組可以用三目運算符
數(shù)組和對象可以嵌套

Style 綁定

<template>
  <div :style="{color:activeColor,fontSize:fontSize+'px'}">Style綁定</div>
</template>

<script>
export default{
  data(){
    return{
      activeColor:'red',
      fontSize:30
    }
  }
}
</script>

<template>
  <div :style="styleObject">Style綁定</div>
</template>

<script>
export default{
  data(){
    return{
      styleObject:{
        color:'red',
        fontSize:'30px'
      }
    }
  }
}
</script>

綁定數(shù)組（多余）

偵聽器

<template>
  <h3>偵聽器</h3>
  <p>{{ message }}</p>
  <button @click="updateHandle">修改數(shù)據(jù)</button>
</template>

<script>
export default{
  data(){
    return{
      message:"Hello"
    }
  },
  methods:{
    updateHandle(){
      this.message = "World"
    }
  },
  watch:{
    message(newValue,oldValue){
      console.log(newValue,oldValue)
    }
  }

}
</script>

表單輸入綁定

單選框

<template>
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</template>

<script>
export default{
  data(){
    return{
      message:""
    }
  }
}
</script>

復(fù)選框

<template>
  <input type="checkbox" id="checkbox" v-model="checked"/>
  <label for="checkbox">{{  checked }}</label>
</template>

<script>
export default{
  data(){
    return{
      message:"",
      checked:false
    }
  }
}
</script>

修飾符

.lazy
.number
.trim
失去焦點后顯示：

<template>
  <input type="text" v-model.lazy="message">
  <p>{{ message }}</p>
</template>

<script>
export default{
  data(){
    return{
      message:""
    }
  }
}
</script>

模板引用（操作 DOM）

內(nèi)容改變：{{ 模板語法 }}
屬性改變：v-bind:指令
事件：v-on:click
如果沒有特別的需求不要操縱 DOM

<template>
  <div ref="container" class="container">{{ content }}</div>
  <button @click="getElementHandle">獲取元素</button>
  <input type="text" ref="username">
</template>

<script>
export default{
  data(){
    return{
      content:"內(nèi)容"
    }
  },
  methods:{
    getElementHandle(){
      this.$refs.container.innerHTML = "hahaha";
      console.log(this.$refs.username.value)
    }
  }
}
</script>

組件組成

Vue 會單獨定義在.Vue 中，叫單文件組件(SFL)

組成結(jié)構(gòu)

scoped讓當前樣式只在當前文件中生效，局部樣式

<template>
  <div>承載標簽</div>
</template>

<script>
export default{}
</script>

<style scoped>
</style>

案例

MyComponent.vue

<template>
  <div class="container">{{ message }}</div>
</template>

<script>
export default{
  data(){
    return{
      message:"組件基礎(chǔ)組成"
    }
  }
}
</script>

<style>
.container{
  font-size:'30px';
  color:red;
}
</style>

App.vue

<template>
  <!--3 標注組件 -->
  <MyComponent/>
</template>

<script>
//1 引入組件
import MyComponent from "./components/MyComponent.vue"

export default{
  //2 注入組件
  components:{
    MyComponent
  }
}
</script>

<style>

</style>

組件嵌套關(guān)系

Vue3入門指南：零基礎(chǔ)小白也能輕松理解的學習筆記,前端,前端

Header.vue

<template>
    <h3>Header</h3>
</template>

<style scoped>
h3{
    width:100%;
    height: 100px;
    border: 5px solid #999;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
}
</style>

Main.vue

<template>
    <div class="main">
        <h3>Main</h3>
        
    </div>
</template>

<script>
import Article from './Article.vue';
export default{
    components:{
        Article
    }
}
</script>

<style scoped>
.main{
    float: left;
    width: 70%;
    height: 400px;
    border: 5px solid #999;
    box-sizing: border-box;
    border-top: 0px;
}
</style>

Aside.vue

<template>
    <div class="aside">
        <h3>Aside</h3>
        <Item/>
        <Item/>
        <Item/>
    </div>
</template>
<script>
import Item from './Item.vue'
export default{
    components:{
        Item
    }
}
</script>

<style scoped>
.aside{
    float: right;
    width:30%;
    height: 600px;
    border: 5px solid #999;
    box-sizing: border-box;
    border-left: 10;
    border-top: 10;
}
</style>

Article.vue

<template>
    <h3>Article</h3>
</template>

<style scoped>
h3{
    width: 80%;
    margin:0 auto;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
    margin-top: 50px;
    background: #999;
}
</style>

Item

<template>
    <h3>Item</h3>
</template>

<style scoped>
h3{
    width:80%;
    margin:0 auto;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
    margin-top: 10px;
    background: #999;
}
</style>

組件注冊方式

全局注冊

最外層注冊全局都能用 Main.js 中

import { createApp } from 'vue'
import App from './App.vue'
import Header from './pages/Header.vue'

const app = createApp(App)

app.component("Header",Header)

app.mount("#app")=

局部注冊

如上節(jié)

如果沒用該組件，打包會帶上
大型項目中可維護性低

組件傳遞數(shù)據(jù)

解決方案：props

靜態(tài)傳遞數(shù)據(jù)

App.vue

<template>
  <Parent/>
</template>

<script>
import Parent from './components/parent.vue'
export default{
  components:{
    Parent
  }
}
</script>

<style>

</style>

Parent.vue

<template>
    <h3>Parent</h3>
    <Child title="parent 數(shù)據(jù)" demo="測試"/>
</template>

<script>
import Child from './child.vue'
export default{
    data(){
        return{

        }
    },
    components:{
        Child
    }
}
</script>

Child.vue

<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
    <p>{{ demo }}</p>
</template>

<script>
export default{
    data(){
        return{
            
        }
    },
    props:["title","demo"]
}
</script>

動態(tài)傳遞數(shù)據(jù)

parent.vue

<template>
    <h3>Parent</h3>
    <Child :title="message"/>
</template>

<script>
import Child from './child.vue'
export default{
    data(){
        return{
            message:"Parent 數(shù)據(jù)！"
        }
    },
    components:{
        Child
    }
}
</script>

child.vue

<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
</template>

<script>
export default{
    data(){
        return{
            
        }
    },
    props:["title"]
}
</script>

props 傳遞數(shù)據(jù)只能父級傳遞給子級，不能相反

組件傳遞多種數(shù)據(jù)類型

任何類型
parent.vue

<template>
    <h3>Parent</h3>
    <Child :title="message" :age="age" :names="names" :userInfo="userInfo"/>
</template>

<script>
import Child from './child.vue'
export default{
    data(){
        return{
            message:"Parent 數(shù)據(jù)！",
            age:10,
            names:["iwen","jixiyu"],
            userInfo:{
                name:"iwen",
                age:20
            }
        }
    },
    components:{
        Child
    }
}
</script>

child.vue

<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
    <p>{{  age }}</p>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul>
    <p>{{ userInfo.name }}</p>
    <p>{{ userInfo.age }}</p>
</template>

<script>
export default{
    data(){
        return{
            
        }
    },
    props:["title","age","names","userInfo"]
}
</script>

組件傳遞數(shù)據(jù) Props 校驗

默認值，類型校驗，必選項
Props 傳遞來的數(shù)據(jù)是只讀的

<template>
    <h3>ComponentA</h3>
    <ComponentB :title="title" :names="names"/>
</template>

<script>
import ComponentB from "./ComponentB.vue"
export default{
    data(){
        return{
            title:"title",
            names:["awin","jiangxiyu"]
        }
    },
    components:{
        ComponentB
    }
}
</script>

組件事件

子元素數(shù)據(jù)傳遞給父級數(shù)據(jù) this.$emit
父級數(shù)據(jù)傳遞給子數(shù)據(jù) props
Child.vue

<template>
    <h3>Child</h3>
    <button @click="clickEventHandle">傳遞數(shù)據(jù)</button>
</template>

<script>
export default{
    data(){
        return{
            msg:"Child 數(shù)據(jù)！"
        }
    },
    methods:{
        clickEventHandle(){
            this.$emit("someEvent",this.msg)
        }
    }
}
</script>

ComponentEvent.vue

<template>
    <h3>組件事件</h3>
    <Child @someEvent="getHandle"></Child>
    <p>父元素：{{ message }}</p>
</template>
<script>
import Child from './child.vue'
export default{
    data(){
        return {
            message:""
        } 
    },
    components:{
        Child
    },
    methods:{
        getHandle(data){
            this.message = data;
        }
    }
}
</script>

組件事件配合 V-model

子組件不斷發(fā)送數(shù)據(jù)給父組件，并且實時展示
SearComponent.vue

<template>
    搜索：<input type="text" v-model="search">
</template>

<script>
export default{
    data(){
        return{
            search:""
        }
    },
    watch:{
        search(newValue,oldValue){
            this.$emit("searchEvent",newValue)
        }
    }
}
</script>

Main.vue

<template>
    <h3>Main</h3>
    <p>搜索內(nèi)容為：{{ search }}</p>
    <SearchCompoent @searchEvent="getSearch"/>
</template>

<script>
import SearchCompoent from './SearchCompoent.vue';
export default{
    components:{
        SearchCompoent
    },
    data(){
        return{
            search:""
        }
    },  
    methods:{
        getSearch(data){
            this.search = data;
        }
    }
}
</script>

組件數(shù)據(jù)傳遞

props 額外操作方式子傳父，函數(shù)回調(diào)
ComponentA.vue

<template>
    <h3>ComponentA</h3>
    <p>父元素：{{ message }}</p>
    <ComponentB title="標題" :onEvent="dataFn"/>
</template>

<script>
import ComponentB from './ComponentB.vue'
export default{
    data(){
        return {
            message:""
        }
    },
    components:{
        ComponentB,
    },
    methods:{
        dataFn(data){
            this.message = data
        }
    }
}
</script>

ComponentB.vue

<template>
    <h3>ComponentB</h3>
    <p>{{ title }}</p>
    <p>{{  onEvent('傳遞數(shù)據(jù)') }}</p>
</template>

<script>
export default{
    data(){
        return {

        }
    },
    props:{
        title:String,
        onEvent:Function
    }
}
</script>

透傳 Attributes

使用率低，了解
“透傳attribute＂指的是傳遞給一個組件卻沒有被該組件聲為props或emits的attribute或者 v-on事件
監(jiān)聽器。最常見的例子就是class、style和id
當一個組件以單個元素為根作渲染時，透傳的attribute會自動被添加到根元素上
父組件

<template>
  <AttrComponents class="attr-containder"/>
</template>

<script>
import AttrComponents from './components/AttrComponents.vue'

export default{
  components:{
    AttrComponents
  }
}
</script>

<style>

</style>

子組件

<template>
    <!-- 透傳屬性必須唯一根元素 -->
    <h3>透傳屬性</h3>
</template>

<script>
export default{
    inheritAttrs:false
}
</script>

<style>
.attr-containder{
    color:red
}
</style>

插槽

傳遞模板，子組件渲染
slot 插槽出口
App.vue

<template>
  <SlotsBase>
    <div>
      <h3>插槽標題</h3>
      <p>插槽內(nèi)容</p>
    </div>
  </SlotsBase>
</template>

<script>
import SlotsBase from './components/SlotsBase.vue'
export default{
  components:{
    SlotsBase
  }
}
</script>

<style>

</style>

SlotsBase.vue

<template>
    <slot></slot>
    <h3>插槽基礎(chǔ)知識</h3>
</template>

插槽 Slots

插槽中的數(shù)據(jù)應(yīng)該在父元素內(nèi)容
插槽默認值，在 slot 中直接寫
具名插槽
- v-slot間寫為#
App.vue

<template>
  <SlotsTow>
    <template v-slot:header>
      <h3>{{ message }}</h3>
    </template>
    <template v-slot:main>
      <p>內(nèi)容</p>
    </template>
  </SlotsTow>
</template>

<script>
import SlotsTow from './components/SlotsTow.vue'
export default{
  components:{
    SlotsTow
  },
  data(){
    return{
      message:"插槽內(nèi)容續(xù)集"
    }
  }
}
</script>

<style>

</style>

SlotsTow.vue

<template>
    <h3>Slots插槽續(xù)集</h3>
    <slot name="header">插槽默認值</slot>
    <hr>
    <slot name="main">插槽默認值</slot>
</template>

插槽 Slots

子元素數(shù)據(jù)傳給父插槽

Vue3入門指南：零基礎(chǔ)小白也能輕松理解的學習筆記,前端,前端

<template>
  <SlotsAttr v-slot="slotProps">
    <h3>{{  currentTest }} - {{  slotProps.msg }}</h3>
  </SlotsAttr>
</template>

<script>
import SlotsAttr from './components/SlotsAttr.vue'
export default{
  data(){
    return{
      currentTest:"測試內(nèi)容"
    }
  },
  components:{
    SlotsAttr
  }
}
</script>

<style>

</style>

<template>
    <h3>Slots 再續(xù)集</h3>
    <slot :msg="childMessage"></slot>
</template>

<script>
export default{
    data(){
        return{
            childMessage:"子組件數(shù)據(jù)"
        }
    }
}
</script>

具名插槽傳遞數(shù)據(jù)

Vue3入門指南：零基礎(chǔ)小白也能輕松理解的學習筆記,前端,前端

<template>
  <SlotsAttr>
    <template #header="slotProps">
      <h3>{{ currentTest }}-{{ slotProps.msg }}</h3>
    </template>
    <template #main="slotProps">
      <p>{{ slotProps.job }}</p>
    </template>
  </SlotsAttr>
</template>

<script>
import SlotsAttr from './components/SlotsAttr.vue'
export default{
  data(){
    return{
      currentTest:"測試內(nèi)容"
    }
  },
  components:{
    SlotsAttr
  }
}
</script>

<style>

</style>

<template>
    <h3>Slots 再續(xù)集</h3>
    <slot name="header" :msg="childMessage"></slot>
    <slot name="main" :job="jobMessage"></slot>
</template>

<script>
export default{
    data(){
        return{
            childMessage:"子組件數(shù)據(jù)",
            jobMessage:"itbaizhan"
        }
    }
}
</script>

組件的聲明周期

Vue3入門指南：零基礎(chǔ)小白也能輕松理解的學習筆記,前端,前端文章來源地址http://www.zghlxwxcb.cn/news/detail-740285.html

創(chuàng)建：創(chuàng)建后系統(tǒng)才開始初始化數(shù)據(jù)
渲染：顯示
更新：用戶操作導(dǎo)致改變，渲染和顯示
銷毀

<template>
  <h3>組件的聲明周期</h3>
  <p>{{ message }}</p>
  <button @click="updateHandle"></button>
</template>

<script>
export default{
  methods:{
    updateHandle(){
      this.message = "更新之后"
    }
  },
  data(){
    return{
      message:"更新之前"
    }
  },
  beforeCreate(){
    console.log("組件創(chuàng)建之前")
  },
  created(){
    console.log("組件創(chuàng)建之后")
  },
  beforeMount(){
    console.log("組件渲染之前")
  },
  mounted(){
    console.log("組件渲染之后")
  },
  beforeUpdate(){
    console.log("組件更新之前")
  },
  updated(){
    console.log("組件更新之后")
  },
  beforeUnmount(){
    console.log("組件銷毀之前")
  },
  unmounted(){
    console.log("組件銷毀之后")
  }
}
</script>
<style>

</style>

聲明周期的應(yīng)用

模擬網(wǎng)絡(luò)請求渲染數(shù)據(jù)
通過 ref 獲取 dom 結(jié)構(gòu)

<template>
  <UserComponent/>
</template>

<script>
import UserComponent from './components/UserComponent.vue'
export default{
  components:{
    UserComponent
  }
}
</script>
<style>

</style>

<template>
    <h3>組件聲明周期函數(shù)應(yīng)用</h3>
    <p ref="name">百戰(zhàn)程序員</p>
  </template>
  
  <script>
  export default{
    beforeMount(){
      console.log(this.$refs.name);
    },
    mounted(){
      console.log(this.$refs.name)
    }
  }
  </script>
  <style>
  
  </style>

讀取 HTML 的過程放到頁面渲染之后
并且在渲染頁面后再渲染數(shù)據(jù)

<template>
    <h3>組件聲明周期函數(shù)應(yīng)用</h3>
    <p ref="name">百戰(zhàn)程序員</p>
    <ul>
        <li v-for="(item, index) of banner" :key ="index">
            <h3>{{ item.title }}</h3>
            <p>{{ item.content }}</p>
        </li>
    </ul>
</template>
  
<script>
export default {
    data() {
        return {
            banner: []
        }
    },
    mounted() {
        //網(wǎng)絡(luò)請求
        this.banner = [
            {
                "title": "我在愛爾蘭",
                "content": "愛爾蘭（愛爾蘭語： Poblacht na hEireann；英語： Republic of Ireland），是一個..."
            },
            {
                "title": "一個人的東京",
                "content": "東京（Tokyo）是日本國的首都，是亞洲第一大城市，世界第二大城市。全球最的經(jīng)濟中心..."
            },
            {
                "title": "普羅旺斯的夢",
                "content": "普羅旺斯（Provence）位于法國東南部，毗鄰地中海和意大利，從地中海沿岸延伸到內(nèi)陸..."
            }
        ]
    },
}
</script>
<style></style>

動態(tài)組件

<template>
  <ComponentA/>
  <ComponentB/>
  <component :is="tabComponent"></component>
  <button @click="changeHandle">切換組件</button>
</template>

<script>
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
export default{
  data(){
    return{
      tabComponent: "ComponentA"
    }
  },
  components:{
    ComponentA,
    ComponentB
  },
  methods:{
    changeHandle(){
      this.tabComponent = this.tabComponent == "ComponentA"?"ComponentB":"ComponentA"
    }
  }
}
</script>
<style>

</style>

組件保持存活

切換時會卸載組件

<template>
  <KeepAlive>
    <component :is="tabComponent"></component>
  </KeepAlive>
  
  <button @click="changeHandle">切換組件</button>
</template>

<script>
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
export default{
  data(){
    return{
      tabComponent: "ComponentA"
    }
  },
  components:{
    ComponentA,
    ComponentB
  },
  methods:{
    changeHandle(){
      this.tabComponent = this.tabComponent == "ComponentA"?"ComponentB":"ComponentA"
    }
  }
}
</script>
<style>

</style>

<template>
    <h3>ComponentA</h3>
    <p>{{ message }}</p>
    <button @click="updateHandle">更新數(shù)據(jù)</button>
</template>

<script>
export default{
    beforeUnmount(){
        console.log("組件卸載前")
    },
    unmounted(){
        console.log("組件卸載后")
    },
    data(){
        return{
            message:"老數(shù)據(jù)"
        }
    },
    methods:{
        updateHandle(){
            this.message = "新數(shù)據(jù)"
        }
    }
}
</script>

<template>
    <h3>ComponentB</h3>
</template>

異步組件

在第一次進入網(wǎng)頁時，沒顯示出來的網(wǎng)頁先不加載，等顯示出來后再加載

<template>
  <KeepAlive>
    <component :is="tabComponent"></component>
  </KeepAlive>
  
  <button @click="changeHandle">切換組件</button>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import ComponentA from './components/ComponentA.vue'
// import ComponentB from './components/ComponentB.vue'
const ComponentB = defineAsyncComponent(()=>
  import("./components/ComponentB.vue")
)
export default{
  data(){
    return{
      tabComponent: "ComponentA"
    }
  },
  components:{
    ComponentA,
    ComponentB
  },
  methods:{
    changeHandle(){
      this.tabComponent = this.tabComponent == "ComponentA"?"ComponentB":"ComponentA"
    }
  }
}
</script>
<style>

</style>

依賴注入

父組件作為依賴提供者，無論孩子有多深，都能用依賴獲取數(shù)據(jù)。
provide 和 inject
只能由上到下，不能反向
可以在整個應(yīng)用提供
爺爺

<template>
  <h3>祖宗</h3>
  <Father />
</template>

<script>
import Father from './components/Father.vue'
export default{
  // provide:{
  //   message:"爺爺?shù)呢敭a(chǎn)"
  // },
  data(){
    return{
      message:"爺爺?shù)呢敭a(chǎn)"
    }
  },
  provide(){
    return{
      message:this.message
    }
  },
  components:{
    Father
  }
}
</script>
<style>

</style>

父親

<template>
    <h3>父親</h3>
    <Son />
  </template>
  
  <script>
  import Son from './Son.vue'
  export default{
    props:{
        title:{
            type:String
        }
    },
    components:{
        Son
    }
  }
  </script>

孫子

<template>
    <h3>孩子</h3>
    <p>{{ fullMessage }}</p>
  </template>
  
  <script>
  export default{
    props:{
        title:{
            type:String
        }
    },
    inject:["message"],
    data(){
        return{
            fullMessage:this.message
        }
    }
  }
  </script>

全局數(shù)據(jù)

import { createApp } from 'vue'
import App from './App.vue'


const app = createApp(App)
app.provide("golabData","我是全局數(shù)據(jù)")
app.mount("#app")

Vue應(yīng)用

src/assets：資源文件夾

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

import { createApp } from 'vue'
import App from './App.vue'


const app = createApp(App)

app.mount("#app")

路由

cnpm install --save vue-router@4
App.vue

<template>
  <router-link to="/home">首頁</router-link>
  <router-link to="/blog">博客</router-link>
  <router-view></router-view>
</template>

<script>
export default{
  name:'App'
}
</script>
<style>

</style>

router.js

import {createRouter,createWebHashHistory} from "vue-router"
import Home from "./components/Home.vue"
import Blog from "./components/Blog.vue"
const router = createRouter({
  history:  createWebHashHistory(),
  routes:[
    {
        path:"/home",
        component:Home
    },
    {
        path:"/blog",
        component:Blog
    }
  ]
})

export default router;

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js'

const app = createApp(App)
app.use(router);
app.mount("#app")

Home.vue,Blog.vue 略

mitt 全局傳遞數(shù)據(jù)

pinia 全局狀態(tài)管理工具

到了這里，關(guān)于Vue3入門指南：零基礎(chǔ)小白也能輕松理解的學習筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔相關(guān)法律責任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

自然語言處理2——輕松入門情感分析 - Python實戰(zhàn)指南
情感分析是一項強大的數(shù)據(jù)分析工具，它能夠幫助我們深入理解文本背后的情感色彩。在企業(yè)和社交媒體中，情感分析被廣泛應(yīng)用，以洞察用戶的情感傾向，改善產(chǎn)品和服務(wù)，提升用戶體驗。本篇博客將帶您輕松入門情感分析，使用Python中常見的情感分析庫進行實戰(zhàn)指南。
2024年02月03日
瀏覽(39)
爬蟲入門指南(7):使用Selenium和BeautifulSoup爬取豆瓣電影Top250實例講解【爬蟲小白必看】
在本篇博客中，我們將使用 Python 的 Selenium 和 BeautifulSoup 庫來實現(xiàn)一個簡單的網(wǎng)頁爬蟲，目的是爬取豆瓣電影TOP250的數(shù)據(jù)，并將結(jié)果保存到Excel文件中。 Selenium 是一個自動化測試工具，可以模擬用戶在瀏覽器中的交互操作。我們將使用 Selenium 來打開網(wǎng)頁、獲取網(wǎng)頁源碼。 B
2024年02月12日
瀏覽(24)
Java 零基礎(chǔ)入門學習（小白也能看懂?。?/a>
??博客主頁：愛敲代碼的小楊. ?專欄：《Java SE語法》 ??感謝大家點贊????收藏?評論???，您的三連就是我持續(xù)更新的動力?? 1.1.1什么是 Java Java是一種優(yōu)秀的程序設(shè)計語言，它具有令人賞心悅目的語法和易于理解的語義。不僅如此， Java還是一個有一系列計算機軟
2024年01月19日
瀏覽(98)
Oracle 基礎(chǔ)入門指南
? Oracle是一款由美國Oracle公司開發(fā)的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。它支持SQL查詢語言，并提供了豐富的功能和工具，用于管理大規(guī)模數(shù)據(jù)存儲、處理和訪問。Oracle被廣泛應(yīng)用于企業(yè)級應(yīng)用中，包括金融、電信、零售等各行各業(yè)。要開始學習Oracle，首先需要在計算機上安裝Oracle數(shù)據(jù)
2024年02月19日
瀏覽(19)
大數(shù)據(jù)基礎(chǔ)技能入門指南
本文介紹了數(shù)據(jù)工作中數(shù)據(jù)基礎(chǔ)和復(fù)雜數(shù)據(jù)查詢兩個基礎(chǔ)技能。背景當下，不管是業(yè)務(wù)升級迭代項目，還是體驗優(yōu)化項目，對于數(shù)據(jù)的需求都越來越大。數(shù)據(jù)需求主要集中在以下幾個方面：項目數(shù)據(jù)看板搭建：特別是一些AB實驗的看板，能直觀呈現(xiàn)項目的核心數(shù)據(jù)變化數(shù)據(jù)
2024年02月05日
瀏覽(35)
計算機視覺基礎(chǔ)入門指南
? ? ? ? 計算機視覺是一門研究如何使計算機能夠“看”和理解圖像或視頻的學科。隨著人工智能的快速發(fā)展，計算機視覺在各個領(lǐng)域的應(yīng)用越來越廣泛。本文將為您介紹計算機視覺的基本概念、應(yīng)用領(lǐng)域以及學習路徑，幫助您快速入門這一領(lǐng)域。圖像處理：對圖像進行預(yù)處
2024年04月11日
瀏覽(22)
HarmonyOS云開發(fā)基礎(chǔ)認證題目記錄——包括第一期：Serverless基礎(chǔ)、第二期：快速構(gòu)建用戶認證系統(tǒng)、第三期：云函數(shù)入門指南、第四期：云數(shù)據(jù)庫入門指南、第五期：云存儲入門指南。
1. 【判斷題】? 應(yīng)用架構(gòu)的演進依次經(jīng)歷了微服務(wù)架構(gòu)、單體架構(gòu)、Serverless架構(gòu)等階段。錯誤 2. 【判斷題】? 認證服務(wù)手機號碼登錄需要填寫國家碼。正確 3. 【判斷題】? 認證服務(wù)在綁定微信賬號后就不能再綁定QQ賬號了。錯誤 4. 【判斷題】? 云函數(shù)可以根據(jù)函數(shù)的實際
2024年02月05日
瀏覽(133)
后端掃盲系列 - vue入門指南
組件化：用戶界面分解為可重用的組件，這些組件可以使開發(fā)的頁面更加模塊化和可維護= 雙向數(shù)據(jù)綁定：vue提供了一種輕松綁定數(shù)據(jù)和DOM元素之間的機制，意味著數(shù)據(jù)發(fā)送變化時，視圖會自動更新，反之亦然虛擬DOM：vue使用虛擬DOM來最小化實際DOM更新的次數(shù)，從而提高性能
2024年02月19日
瀏覽(45)
AI繪圖-Midjourney零基礎(chǔ)入門指南
Midjourney 是除 Disco Difussion 和 Dall·E 2 之外又一個比較優(yōu)秀的 AI 圖像生成器，它綜合能力全面，雖然圖像的精準度及藝術(shù)性不及 Disco Difussion，但易上手程度比 Disco Difussion 好很多，圖像生成速度極快?1 分鐘內(nèi)出 4 張圖，國外很多藝術(shù)家都使用 Midjourney 生成自己想要圖像作為創(chuàng)
2024年02月04日
瀏覽(19)
【三十天精通 Vue 3】第一天 Vue 3入門指南
?創(chuàng)作者：陳書予 ??個人主頁：陳書予的個人主頁 ??陳書予的個人社區(qū)，歡迎你的加入: 陳書予的社區(qū) ??專欄地址: 三十天精通 Vue 3
2024年02月11日
瀏覽(23)

<del id="ez27g"><form id="ez27g"></form></del>

<b id="ez27g"><s id="ez27g"></s></b>