當前位置：首頁 > news >正文

租個網站服務器多少錢高端網站建設案例

news 2025/7/12 17:36:16

租個網站服務器多少錢,高端網站建設案例,百度網站地圖生成器,wordpress 用戶儀表盤目錄 0 前言 1 準備工作 1.1 創(chuàng)建vue實例 1.2 vue開發(fā)者工具 2 插值表達式 2.1 基本用法 3 常用指令 3.1 內容渲染指令 3.1.1 v-text 3.1.2 v-html 3.2 條件渲染指令 3.2.1 v-show 3.2.2 v-if 3.2.3 v-else 和 v-else-if 3.3 事件綁定指令 3.3.1 內聯(lián)語句 3.3…

0 前言

黑馬程序員視頻地址：前端最新Vue2+Vue3基礎入門到實戰(zhàn)項目全套教程

本章從vue2學起，vue3內容將在后期專門用一章來講述

本篇只記錄大綱及要點，具體請看黑馬程序員視頻及其提供的md筆記

vue2官網：Vue.js

vue3官網：Vue.js - 漸進式 JavaScript 框架 | Vue.js

1 準備工作

1.1?創(chuàng)建vue實例

? 1. 準備容器 (Vue所管理的范圍)
? 2. 引包 (開發(fā)版本包 / 生產版本包) 官網
? 3. 創(chuàng)建實例
? 4. 添加配置項 => 完成渲染?

<body><div id="app"><!-- 這里將來會編寫一些用于渲染的代碼邏輯 --><h1>{{ msg }}</h1><a href="#">{{ count }}</a>
</div><!-- 引入的是開發(fā)版本包 - 包含完整的注釋和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 一旦引入 VueJS核心包，在全局環(huán)境，就有了 Vue 構造函數const app = new Vue({// 通過 el 配置選擇器，指定 Vue 管理的是哪個盒子el: '#app',// 通過 data 提供數據data: {msg: 'Hello World！',count: 666}})</script></body>

1.2 vue開發(fā)者工具

安裝網站：極簡插件官網_Chrome插件下載_Chrome瀏覽器應用商店

注意查看插件是否支持vue2

安裝之后可以F12后看到多一個Vue的調試面板

2 插值表達式

2.1 基本用法

{{表達式}}

表達式：

money + 100
money - 100
money * 10
money / 10?
price >= 100 ? '真貴':'還行'
obj.name
arr[0]
fn()
obj.fn()

示例：

<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>

2.2 注意事項

1.在插值表達式中使用的數據 必須在data中進行了提供
<p>{{hobby}}</p>  //如果在data中不存在 則會報錯2.支持的是表達式，而非語句，比如：if   for ...
<p>{{if}}</p>3.不能在標簽屬性中使用 {{  }} 插值 (插值表達式只能標簽中間使用)
<p title="{{username}}">我是P標簽</p>

3 常用指令

vue 中的指令按照不同的用途可以分為如下 6 大類：

內容渲染指令（v-html、v-text）

條件渲染指令（v-show、v-if、v-else、v-else-if）

事件綁定指令（v-on）

屬性綁定指令（v-bind）

列表渲染指令（v-for）

雙向綁定指令（v-model）

3.1?內容渲染指令

3.1.1 v-text

使用語法：<p v-text="uname">hello</p>，意思是將 uame 值渲染到 p 標簽中

類似 innerText，使用該語法，會覆蓋 p 標簽原有內容

3.1.2?v-html

使用語法：<p v-html="intro">hello</p>，意思是將 intro 值渲染到 p 標簽中

類似 innerHTML，使用該語法，會覆蓋 p 標簽原有內容

類似 innerHTML，使用該語法，能夠將HTML標簽的樣式呈現(xiàn)出來。

3.2?條件渲染指令

3.2.1?v-show

作用：控制元素顯示隱藏

語法： v-show = "表達式" 表達式值為 true 顯示， false 隱藏

原理：切換 display:none 控制顯示隱藏

場景：頻繁切換顯示隱藏的場景

3.2.2?v-if

作用：控制元素顯示隱藏（條件渲染）

語法： v-if= "表達式" 表達式值 true顯示， false 隱藏

原理：基于條件判斷，是否創(chuàng)建或移除元素節(jié)點

場景：要么顯示，要么隱藏，不頻繁切換的場景

3.2.3?v-else 和 v-else-if

作用：輔助v-if進行判斷渲染

語法：v-else v-else-if="表達式"

需要緊接著v-if使用

3.3?事件綁定指令

<button v-on:事件名="內聯(lián)語句">按鈕</button>

<button v-on:事件名="處理函數">按鈕</button>

<button v-on:事件名="處理函數(實參)">按鈕</button>

v-on: 簡寫為 @

3.3.1 內聯(lián)語句

<div id="app"><button @click="count--">-</button><span>{{ count }}</span><button v-on:click="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100}})</script>

3.3.2?事件處理函數

注意：

事件處理函數應該寫到一個跟data同級的配置項（methods）中

methods中的函數內部的this都指向Vue實例

3.3.3?給事件處理函數傳參

如果不傳遞任何參數，則方法無需加小括號；methods方法中可以直接使用 e 當做事件對象

<body><div id="app"><!-- 綁定事件處理函數，不加小括號 --><button @click="handleClick">點擊我</button></div><script>new Vue({el: '#app',methods: {handleClick(e) {// e 就是事件對象console.log('事件對象:', e);console.log('點擊的元素:', e.target);}}});</script>
</body>

?如果傳遞了參數，則需額外傳一個實參 $event 表示事件對象

<body><div id="app"><!-- 傳遞額外參數，同時使用 $event 表示事件對象 --><button @click="handleClickWithParams('額外參數', $event)">點擊我</button></div><script>new Vue({el: '#app',methods: {handleClickWithParams(param, e) {// param 是傳遞的額外參數console.log('傳遞的額外參數:', param);// e 是事件對象console.log('事件對象:', e);console.log('點擊的元素:', e.target);}}});</script>
</body>

注意：如果在內聯(lián)事件處理中只傳遞一個參數而不使用?$event?來顯式傳遞事件對象，那么在?methods?中定義的方法里第二個形參將無法接收到事件對象

3.4?屬性綁定指令

作用：動態(tài)設置html的標簽屬性比如：src、url、title

語法：v-bind:屬性名=“表達式”

v-bind:可以簡寫成 => :

比如，有一個圖片，它的 src 屬性值，是一個圖片地址。這個地址在數據 data 中存儲。則可以這樣設置屬性值：- <img v-bind:src="url" />
- <img :src="url" />   （v-bind可以省略）

3.5?列表渲染指令

v-for 指令需要使用 (item, index) in arr 形式的特殊語法，其中：

item 是數組中的每一項

index 是每一項的索引，不需要可以省略

arr 是被遍歷的數組

此語法也可以遍歷對象和數字

//遍歷對象
<div v-for="(value, key, index) in object">{{value}}</div>
value:對象中的值
key:對象中的鍵
index:遍歷索引從0開始//遍歷數字
<p v-for="item in 10">{{item}}</p>
item從1 開始

3.5.1 key

語法： key="唯一值"

作用：給列表項添加的唯一標識。便于Vue進行列表項的正確排序復用。

為什么加key：Vue 的默認行為會嘗試原地修改元素（就地復用）

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">刪除</button></li>
</ul>

注意：

key 的值只能是字符串或數字類型
key 的值必須具有唯一性
推薦使用 id 作為 key（唯一），不推薦使用 index 作為 key（會變化，不對應） ?

3.6?雙向綁定指令（v-model）

作用： 給表單元素（input、radio、select）使用，雙向綁定數據，可以快速獲取或設置表單元素內容

語法：v-model="變量

如：

輸入框 ?input:text ? ——> value
文本域 ?textarea?? ? ——> value
復選框 ?input:checkbox ?——> checked
單選框 ?input:radio ? ——> checked
下拉菜單 select ? ?——> value
...?

<body><div id="app"><h3>小黑學習網</h3>姓名：<input type="text" v-model="username"> <br><br>是否單身：<input type="checkbox" v-model="isSingle"> <br><br><!-- 前置理解：1. name:  給單選框加上 name 屬性 可以分組 → 同一組互相會互斥2. value: 給單選框加上 value 屬性，用于提交給后臺的數據結合 Vue 使用 → v-model-->性別: <input v-model="gender" type="radio" name="gender" value="1">男<input v-model="gender" type="radio" name="gender" value="2">女<br><br><!-- 前置理解：1. option 需要設置 value 值，提交給后臺2. select 的 value 值，關聯(lián)了選中的 option 的 value 值結合 Vue 使用 → v-model-->所在城市:<select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">成都</option><option value="104">南京</option></select><br><br>自我描述：<textarea v-model="desc"></textarea> <button>立即注冊</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',isSingle: false,gender: "2",cityId: '102',desc: ""}})</script>
</body>

4 指令修飾符

指令修飾符就是通過“.”指明一些指令后綴不同的后綴封裝了不同的處理操作 —> 簡化代碼

4.1 按鍵修飾符

類似：@keyup.enter —>當點擊enter鍵的時候才觸發(fā)

除了enter，其他的也可以?

4.2?v-model修飾符

v-model.trim —>去除首位空格

v-model.number —>轉數字

4.3 事件修飾符

@事件名.stop —> 阻止冒泡

@事件名.prevent —>阻止默認行為

@事件名.stop.prevent —>可以連用即阻止事件冒泡也阻止默認行為

注意：不一定嚴格按照上述分類使用，如果能有相應效果，也可以自由搭配使用

5 屬性綁定指令操控樣式

為了方便開發(fā)者進行樣式控制， Vue 擴展了 v-bind 的語法，可以針對 class 類名 和 style 行內樣式 進行控制

5.1 :class

語法：?

<div> :class = "對象/數組">這是一個div</div>

5.1.1 對象

當class動態(tài)綁定的是對象時，鍵就是類名，值就是布爾值，如果值是true，就有這個類，否則沒有這個類

<div class="box" :class="{ 類名1: 布爾值, 類名2: 布爾值 }"></div>

適用場景：一個類名，來回切換

示例：

<div id="app"><ul><li v-for="(item, index) in list" :key="item.id" @click="activeIndex = index"><a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {activeIndex: 2, // 記錄高亮list: [{ id: 1, name: '京東秒殺' },{ id: 2, name: '每日特價' },{ id: 3, name: '品類秒殺' }]}})</script>
</body>

5.1.2 數組

當class動態(tài)綁定的是數組時 → 數組中所有的類，都會添加到盒子上，本質就是一個 class 列表

<div class="box" :class="[ 類名1, 類名2, 類名3 ]"></div>

使用場景:批量添加或刪除類

5.2 :style

語法：?

<div class="box" :style="{ CSS屬性名1: CSS屬性值, CSS屬性名2: CSS屬性值 }"></div>

示例：操作進度條

<body><div id="app"><!-- 外層盒子底色 （黑色） --><div class="progress"><!-- 內層盒子 - 進度（藍色） --><div class="inner" :style="{ width: percent + '%' }"><span>{{ percent }}%</span></div></div><button @click="percent = 25">設置25%</button><button @click="percent = 50">設置50%</button><button @click="percent = 75">設置75%</button><button @click="percent = 100">設置100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 30}})</script>
</body>

6 computed 計算屬性

基于現(xiàn)有的數據，計算出來的新屬性。依賴的數據變化，自動重新計算

語法：

聲明在 computed 配置項中，一個計算屬性對應一個函數

使用起來和普通屬性一樣使用 {{ 計算屬性名}}

注意：

computed配置項和data配置項是同級的

computed中的計算屬性雖然是函數的寫法，但他依然是個屬性

computed中的計算屬性不能和data中的屬性同名

使用computed中的計算屬性和使用data中的屬性是一樣的用法

computed中計算屬性內部的this依然指向的是Vue實例

示例：

<body><div id="app"><h3>小黑的禮物清單</h3><table><tr><th>名字</th><th>數量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}個</td></tr></table><!-- 目標：統(tǒng)計求和，求得禮物總數 --><p>禮物總數：{{ totalCount }} 個</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 現(xiàn)有的數據list: [{ id: 1, name: '籃球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '鉛筆', num: 5 },]},computed: {totalCount () {// 基于現(xiàn)有的數據，編寫求值邏輯// 計算屬性函數內部，可以直接通過 this 訪問到 app 實例// console.log(this.list)// 需求：對 this.list 數組里面的 num 進行求和 → reducelet total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>
</body>

6.1 完整寫法

6.2?computed計算屬性 VS methods方法

6.2.1 computed計算屬性

作用：封裝了一段對于數據的處理，求得一個結果

語法：

1.寫在computed配置項中

2.作為屬性，直接使用

js中使用計算屬性： this.計算屬性

模板中使用計算屬性：{{計算屬性}}

6.2.2 methonds方法

作用：給Vue實例提供一個方法，調用以處理業(yè)務邏輯

語法：

1.寫在methods配置項中

2.作為方法調用

js中調用：this.方法名()

模板中調用 {{方法名()}} 或者 @事件名=“方法名”

6.2.3 計算屬性的優(yōu)勢

緩存特性（提升性能）

計算屬性會對計算出來的結果緩存，再次使用直接讀取緩存，

依賴項變化了，會自動重新計算 → 并再次緩存

methods沒有緩存特性

6.2.4 總結

1.computed有緩存特性，methods沒有緩存

2.當一個結果依賴其他多個值時，推薦使用計算屬性

3.當處理業(yè)務邏輯時，推薦使用methods方法，比如事件的處理函

7 watch監(jiān)視器

監(jiān)視數據變化，執(zhí)行一些業(yè)務邏輯或異步操作

watch同樣聲明在跟data同級的配置項中

7.1 簡單寫法

data: { words: '蘋果',obj: {words: '蘋果'}
},watch: {// 該方法會在數據變化時，觸發(fā)執(zhí)行數據屬性名 (newValue, oldValue) {一些業(yè)務邏輯 或 異步操作。 },'對象.屬性名' (newValue, oldValue) {一些業(yè)務邏輯 或 異步操作。 }
}

示例：

  <body><div id="app"><!-- 條件選擇框 --><div class="query"><span>翻譯成的語言：</span><select><option value="italy">意大利</option><option value="english">英語</option><option value="german">德語</option></select></div><!-- 翻譯框 --><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span><i>??</i>文檔翻譯</span></div><div class="output-wrap"><div class="transbox">mela</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：https://applet-base-api-t.itheima.net/api/translate// 請求方式：get// 請求參數：// （1）words：需要被翻譯的文本（必傳）// （2）lang： 需要被翻譯成的語言（可選）默認值-意大利// -----------------------------------------------const app = new Vue({el: '#app',data: {// words: ''obj: {words: ''}},// 具體講解：(1) watch語法 (2) 具體業(yè)務實現(xiàn)watch: {// 該方法會在數據變化時調用執(zhí)行// newValue新值, oldValue老值（一般不用）// words (newValue) {//   console.log('變化了', newValue)// }'obj.words' (newValue) {console.log('變化了', newValue)}}})</script></body>

7.2 完整寫法

添加額外配置：

deep:true 對復雜類型進行深度監(jiān)聽

immdiate:true 初始化，立刻執(zhí)行一次

data: {obj: {words: '蘋果',lang: 'italy'},
},watch: {// watch 完整寫法對象: {deep: true, // 深度監(jiān)視immdiate:true,//立即執(zhí)行handler函數handler (newValue) {console.log(newValue)}}
}

示例：

  <body><div id="app"><!-- 條件選擇框 --><div class="query"><span>翻譯成的語言：</span><select v-model="obj.lang"><option value="italy">意大利</option><option value="english">英語</option><option value="german">德語</option></select></div><!-- 翻譯框 --><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span><i>??</i>文檔翻譯</span></div><div class="output-wrap"><div class="transbox">{{ result }}</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 需求：輸入內容，修改語言，都實時翻譯// 接口地址：https://applet-base-api-t.itheima.net/api/translate// 請求方式：get// 請求參數：// （1）words：需要被翻譯的文本（必傳）// （2）lang： 需要被翻譯成的語言（可選）默認值-意大利// -----------------------------------------------const app = new Vue({el: '#app',data: {obj: {words: '小黑',lang: 'italy'},result: '', // 翻譯結果},watch: {obj: {deep: true, // 深度監(jiān)視immediate: true, // 立刻執(zhí)行，一進入頁面handler就立刻執(zhí)行一次handler (newValue) {clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue})this.result = res.data.dataconsole.log(res.data.data)}, 300)}}}})</script></body>

查看全文

http://www.risenshineclean.com/news/59116.html