小米平板5 Pro 12.4簡評：多專多能 兼顧影音娛樂的大屏利器
疫情帶來了網(wǎng)課，網(wǎng)課盤活了安卓平板，安卓平板市場雖然中途停滯了幾年，但好的一點就是停滯的這幾年行業(yè)又有了新的發(fā)展方向，例如超窄邊框、高刷新率、多攝鏡頭組合等，這就讓安卓
在學(xué)習(xí)之前，我們先通過引入JS文件的方式快速初始化一個 Vue 項目，首先我們先打開 VsCode 編輯器，具體步驟如下：
新建一個文件夾。
新建index.html、style.css 和 index.js 文件。
新建個lib目錄，把下載好的 vue.global.js 文件放在這個目錄下（下載地址：https://unpkg.com/vue@3.2.45/dist/vue.global.js）。
完成后的目錄結(jié)構(gòu)如下：
--- index.html--- index.js--- lib ---vue.global.js--- style.css然后回到 index.html 做一些代碼編寫工作：
<!DOCTYPE html><html lang="zh-cn"> <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>Vue項目初始化</title> <script src="/lib/vue.global.js"></script> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="app"></div> <script src="index.js"></script> </body></html>接下來回到 index.js 文件初始化 vue 實例，掛載到 id 等于 app 的實例中,代碼如下：
const app = Vue.createApp();app.mount("#app");到這里一個簡單的 Vue3 項目就創(chuàng)建完了，接下來我們進(jìn)入 data() 函數(shù)的學(xué)習(xí)。
在 Vue.js 中，data 函數(shù)用于定義組件實例的狀態(tài)。組件實例中定義的數(shù)據(jù)可以在模板中使用，也可以在組件的 JavaScript 邏輯中使用。
下面是一個例子，該組件有一個名為 message 的 data 屬性：
<template> <div> {{ message }} </div></template><script>export default { data() { return { message: '你好，前端達(dá)人!' } }}</script>在上面的例子中，data 函數(shù)返回了一個對象，該對象中有一個名為 message 的屬性。在模板中，可以使用 {{ message }} 來顯示這個屬性的值。
注意，data 屬性必須是函數(shù),這是固定用法。如果 data 屬性是一個普通對象，那么所有組件實例將共享同一個數(shù)據(jù)對象，在多個組件實例中使用同一個 data 對象將會導(dǎo)致問題。
另外，組件實例中定義的數(shù)據(jù)屬性是響應(yīng)式的，這意味著如果數(shù)據(jù)屬性的值改變，那么對應(yīng)的模板中的內(nèi)容也將自動更新（響應(yīng)式機(jī)制，稍后會介紹）。
通過data函數(shù)返回的對象，組件內(nèi)部都能使用 this 訪問到，如:
<template> <button @click="changeData">Change Data</button></template><script>export default { data() { return { message: 'Hello, Vue!' } }, methods:{ changeData(){ this.message = "new data"; } }}</script>在 Vue.js 中，data 函數(shù)用于定義組件實例的狀態(tài)，返回的對象中的屬性可以是任意類型的值，包括：
例如：
data() { return { message: 'Hello, Vue!', count: 0, todos: [], user: { name: 'John Doe', age: 30 }, print: function(){ console.log("data function") } } },在上面的例子中, 定義了message,count,todos,user,print五個數(shù)據(jù)，分別是字符串，數(shù)字，數(shù)組，對象，函數(shù)。
在 Vue 3 中，可以使用 setup() 函數(shù)來定義組件的邏輯和狀態(tài)。在 setup() 函數(shù)中，可以使用 reactive() 函數(shù)來創(chuàng)建一個響應(yīng)式對象，它可以用來存儲組件的狀態(tài)。下面是一個示例：
<!DOCTYPE html><html> <head> <title>Vue 3 數(shù)據(jù)狀態(tài)示例</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr/npm/vue@3"></script> <script> const app = Vue.createApp({ setup() { const state = Vue.reactive({ message: 'Hello Vue 3' }); return { ...state } } }); app.mount('#app') </script> </body></html>當(dāng)你想要綁定一個鏈接的 href 屬性到 Vue 實例中的數(shù)據(jù)時，你可以這樣做：
<a v-bind:href="url">Link</a>這里的 v-bind:href 指令綁定了 Vue 實例中的 url 數(shù)據(jù)到鏈接的 href 屬性上。當(dāng) url 數(shù)據(jù)更新時，鏈接的 href 也會更新。
同樣也可以使用縮寫:
<a :href="url">Link</a>需要注意的是，當(dāng)你綁定一個數(shù)據(jù)到 href 時，確保你綁定的是完整的URL，不然可能會被瀏覽器理解成相對路徑。
在 Vue 中展示列表數(shù)據(jù)可以使用 v-for 指令。v-for 指令用于遍歷數(shù)組中的數(shù)據(jù)并將其渲染到頁面上。
假設(shè)你有一個名為 items 的數(shù)組，其中包含了要展示在頁面上的數(shù)據(jù)，那么你可以在模板中使用 v-for 指令來遍歷 items 數(shù)組并將每一項數(shù)據(jù)渲染到頁面上。
例如:
<template> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul></template><script>export default { data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, ], }; },};</script>當(dāng)你使用 v-for 指令來遍歷數(shù)組中的數(shù)據(jù)時，你需要在指令中指定兩個值：
在指令中你可以使用這兩個值來定義要渲染在頁面上的元素。在上面的例子中，我們使用了一個 li 標(biāo)簽來渲染每一項數(shù)據(jù)，并在里面使用了一個插值表達(dá)式來展示每一項的 name。
在遍歷數(shù)組時,為了避免vue重復(fù)渲染,你需要給每一個元素賦予一個唯一標(biāo)識符。可以使用 v-bind 指令和 key 特性來為每一項綁定一個唯一的標(biāo)識符，比如上面的例子中用了每一項的 id 來標(biāo)識。
整體來說，使用 v-for 指令可以讓你很容易地在 Vue 中遍歷數(shù)組并將數(shù)據(jù)渲染到頁面上。
在真實項目中還會經(jīng)常使用 computed 和 methods 來獲取數(shù)據(jù)進(jìn)行展示, 也可以使用vuex進(jìn)行狀態(tài)管理。（在稍后的文章里會詳細(xì)介紹）
在 Vue 中一共有 4 種方式可以基于條件展示 Data 中的數(shù)據(jù)。
v-if 指令用于根據(jù)條件判斷是否渲染元素。當(dāng)條件為 true 時，元素會被渲染，否則元素不會被渲染。
<template> <div> <p v-if="showData">{{ data }}</p> </div></template><script>export default { data() { return { data: 'This is my data', showData: true, }; },};</script>v-show 指令與 v-if 指令類似，也用于根據(jù)條件判斷是否渲染元素。唯一的區(qū)別是，v-show 指令會始終渲染元素，只是在條件為 false 時將元素隱藏。
<template> <div> <p v-show="showData">{{ data }}</p> </div></template><script>export default { data() { return { data: 'This is my data', showData: true, }; },};</script>三元運算符可以在模板中直接使用條件判斷并返回對應(yīng)的值，從而達(dá)到條件展示數(shù)據(jù)的目的.
<template> <div> <p>{{showData ? data : "loading"}}</p> </div></template><script>export default { data() { return { data: 'This is my data', showData: true, }; },};</script>可以在 computed 里面進(jìn)行條件判斷，并返回對應(yīng)的數(shù)據(jù)。
<template> <div> <p>{{computedData}}</p> </div></template><script> export default { data() { return { data: 'This is my data', showData: true, }; }, computed: { computedData() { return this.showData ? this.data : "loading" } } };</script>這四種方法都可以在 Vue 中基于條件展示數(shù)據(jù)。
你可以根據(jù)自己的需求來選擇使用哪一種方法。
v-if指令和v-show的區(qū)別在于，v-if會在第一次加載的時候，真正的去除不需要的元素，而v-show只是用CSS來控制元素的顯示和隱藏。所以v-if會在第一次加載時對性能有影響，而v-show在第一次加載時不會對性能產(chǎn)生影響。
計算屬性 computed 可以在數(shù)據(jù)發(fā)生改變時自動更新，性能會比在模板中使用三元運算符和方法好。
本文鏈接：http://www.tebozhan.com/showinfo-26-35317-0.htmlVue3 學(xué)習(xí)筆記，快速初始化 Vue 項目及 Data 函數(shù)用法學(xué)習(xí)
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號