一、Vue框架
漸進(jìn)式JavaScript框架，易學(xué)易用，性能出色，適用場景豐富的Web前端框架
功能是構(gòu)建用戶界面
基于標(biāo)準(zhǔn)的HTML、CSS和JavaScript，提供了一套聲明式的、組件化的編程模型，幫助高效得開發(fā)用戶界面
1.1漸進(jìn)式框架
漸進(jìn)式框架：Vue是一個(gè)框架也是一個(gè)生態(tài)，功能覆蓋了大部分前端的常見需求，Vue的設(shè)計(jì)非常注重靈活性和可以被逐步集成的特點(diǎn)
不同方式使用Vue：
1、無需構(gòu)建步驟，漸進(jìn)式增強(qiáng)靜態(tài)的HTML
2、在任何頁面作為 Web components嵌入
3、單頁應(yīng)用（SPA）
4、全棧/服務(wù)端渲染（SSR）
5、jamstack/靜態(tài)站點(diǎn)生成（SSG）
6、開發(fā)桌面端、移動(dòng)端、WebGL，甚至是命令行終端中的界面
1.2 Vue的版本
Vue的版本：開發(fā)中Vue可以選擇兩大版本，Vue2和Vue3，老項(xiàng)目一般Vue2，新項(xiàng)目一般選擇Vue3
Vue3涵蓋了Vue2的知識(shí)體系，當(dāng)然Vue3增加了很多新的特性
官方文檔：cn.vuejs.org
二、VueAPI的風(fēng)格
主要兩種風(fēng)格：選項(xiàng)式API（Vue2）和組合式API（Vue3）
不同底層提供的兩個(gè)接口，基礎(chǔ)概念和知識(shí)是通用的
當(dāng)生產(chǎn)項(xiàng)目中：
不需要使用構(gòu)建工具或者在低復(fù)雜度的場景中用Vue的時(shí)候，推薦用選項(xiàng)式API
當(dāng)打算用Vue構(gòu)建完整的單頁應(yīng)用，推薦采用組合式API+單文件組件
三、Vue開發(fā)準(zhǔn)備工作
查看vue版本
node -v
創(chuàng)建Vue項(xiàng)目
npm init vue@latest
進(jìn)入項(xiàng)目
cd vue-base
安裝
npm install
運(yùn)行項(xiàng)目
npm run dev
vite.config.js Vue配置文件
package.json 信息描述文件
index.thml 入口html文件
node_modules Vue項(xiàng)目運(yùn)行的依賴文件
public 資源文件夾
README.md 注釋文件
四、模板語法
Vue使用的是基于HTML的模板語法，可以以聲明式的將組件實(shí)例綁定到DOM中，所有的VUE語法都是語法層面合法的HTML，可以被符合規(guī)范的瀏覽器和HTML解析器解釋
文本插值
雙大括號(hào)進(jìn)行數(shù)據(jù)綁定文本插值
每個(gè)綁定支持單一表達(dá)式
<template>
<p>{{msg}}</p>
<p>{{hello}}</p>
<p>{{num+1+2+3}}</p>
<p>{{ok?'Yes':'No'}}</p>
<p>{{message.split("").reverse().join("")}}</p>
</template>
<script>
export default {
data(){
return{
msg:"神奇的語法",
hello:"hello world",
num:10,
ok:'Yes',
message:"大家好呀"
}
}
}
</script>
屬性綁定
雙大括號(hào)不能在HTML attribute中使用 想要響應(yīng)式綁定一個(gè)attribute，應(yīng)該使用v-bind指令
<template>
<!-- 用v-bind 調(diào)整屬性 同時(shí)可以用:簡寫 undefined 那么就是消除對(duì)應(yīng)的屬性-->
<div v-bind:class="dynamicClass" v-bind:id="dynamicId" :title="dynamicTittle">{{msg}}111</div>
<!-- 一次性綁定多個(gè)-->
<div v-bind="objectOfAttrs"></div>
</template>
<script>
export default {
name: "HelloWorld",
data(){
return{
msg:"hello world",
dynamicClass:"active",
dynamicId:"APPID",
dynamicTittle:undefined,
objectOfAttrs:{
class:"appclass",
id:"appid"
}
}
}
}
</script>
條件渲染
<template>
<h3>條件渲染</h3>
<div v-if="flag">
看得見嗎？
</div>
<div v-else-if="!flag">
還是看看吧
</div>
<!-- v-show 和 v-if 一樣的
但是v-if是真實(shí)的按條件渲染 切換的時(shí)候?qū)ΡO(jiān)聽器和組件銷毀與重建 false不會(huì)做任何事 true才會(huì)去渲染
v-show簡單 無論條件如何都會(huì)渲染 只不過改變的是display的屬性
v-if 強(qiáng)調(diào)的是切換開銷 v-show 強(qiáng)調(diào)初始渲染開銷
頻繁切換用v-show 運(yùn)行時(shí)捆綁條件少用v-if
-->
<div v-show="flag">
看得見嗎？
</div>
</template>
<script>
export default {
data(){
return{
flag:false
}
}
}
</script>
<style scoped>
</style>
列表渲染
<template>
<h3>列表渲染</h3>
<p v-for="item in names" v-bind:key="item">{{item}}</p>
<!-- index 是默認(rèn)的下標(biāo)-->
<p v-for="(item,index) in names" v-bind:key="(item,index)">{{item}}-{{index}}</p>
<!-- v-for 不僅僅可以遍歷數(shù)組 也可以遍歷對(duì)象-->
<div v-for="item in result" v-bind:key="item">
<p>{{item.title}}</p>
<img :src="item.url" :alt="item.id">
</div>
<div v-for="item in result" v-bind:key="item">
<div v-for="(value,key,index) in item" v-bind:key="(value,key,index)">
<p>{{value}}-{{key}}-{{index}}</p>
</div>
</div>
<div v-for="(value,key,index) in user" v-bind:key="(value,key,index)">
<p>{{value}}-{{key}}-{{index}}</p>
</div>
</template>
<script>
export default {
name: "ForDemo",
data(){
return{
names:["a","b","c"],
result:[{
"id":101,
"title":"標(biāo)題1",
"url":"https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif"
},{
"id":102,
"title":"標(biāo)題2",
"url":"https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif"
},{
"id":103,
"title":"標(biāo)題3",
"url":"https://www.baidu.com/img/PC_wenxin_1142bc061306e094e6eddaa3d9656145.gif"
}],
user:{
name:"kewin",
age:18
}
}
}
}
</script>
key管理狀態(tài)
Vue默認(rèn)按照就地更新策略渲染元素列表
當(dāng)順序改變 vue不會(huì)移動(dòng)dom元素的順序，而是就地更新，確保原本指定的索引位置上渲染
為了給vue一個(gè)提示，方便跟蹤每個(gè)節(jié)點(diǎn)的標(biāo)識(shí)，從而重用和重新排序現(xiàn)有的元素，需要一個(gè)key唯一標(biāo)志屬性
四、事件處理
可以使用v-on指令（簡寫@）監(jiān)聽DOM事件，并且在事件觸發(fā)的時(shí)候執(zhí)行對(duì)應(yīng)的JavaScript
用法：οnclick=“methodname”或@click=“handler”
事件處理器的值可以是內(nèi)聯(lián)事件處理器也可以是方法事件處理器文章來源：http://www.zghlxwxcb.cn/news/detail-696976.html
定義事件
<template>
<button @click="count++">AddInline</button>
<button @click="addCount">AddMethod</button>
<p>{{count}}</p>
</template>
<script>
export default {
name: "ListenerDemo",
data(){
return{
count:1
}
},
//所有方法函數(shù)都放在這里
methods:{
addCount(){
this.count++
console.log(this.count)
}
}
}
</script>
事件參數(shù)
事件參數(shù)可以獲取event對(duì)象和通過事件傳遞參數(shù)
vue中event對(duì)象就是js的event對(duì)象文章來源地址http://www.zghlxwxcb.cn/news/detail-696976.html
methods:{
addCount(e){
this.count++
console.log(e.target.innerHTML="Add"+this.count)
}
<template>
<button @click="count++">AddInline</button>
<button @click="addCount('hello')">AddMethod</button>
<p>{{count}}</p>
<p @click="getNameHanlder(item)" v-for="(item,index) in names" :key="index">{{item}}</p>
</template>
<script>
export default {
name: "ListenerDemo",
data(){
return{
count:1,
names:["張三","李四","王五"]
}
},
//所有方法函數(shù)都放在這里
methods:{
addCount(msg){
this.count++
event.target.innerHTML="add"+msg
},
getNameHanlder(item){
console.log(item)
}
}
}
</script>
<template>
<button @click="count++">AddInline</button>
<!-- 可以用&event 傳event事件參數(shù) -->
<button @click="addCount('hello',$event)">AddMethod</button>
<p>{{count}}</p>
<p @click="getNameHanlder(item)" v-for="(item,index) in names" :key="index">{{item}}</p>
</template>
<script>
export default {
name: "ListenerDemo",
data(){
return{
count:1,
names:["張三","李四","王五"]
}
},
//所有方法函數(shù)都放在這里
methods:{
addCount(msg,e){
this.count++
e.target.innerHTML="add"+msg
},
getNameHanlder(item){
console.log(item)
}
}
}
</script>
事件修飾符
<template>
<h3>事件修飾符</h3>
<!-- 進(jìn)行修飾 實(shí)現(xiàn)點(diǎn)擊但是不跳轉(zhuǎn)-->
<a @click.prevent="clickHandle" href="http://www.baidu.com">點(diǎn)擊進(jìn)入連接</a>
<div @click="clickDiv">
<!-- 讓事件不冒泡到父元素-->
<p @click.stop="clickP">測試冒泡</p>
</div>
</template>
<script>
export default {
name: "ListenerDemo2",
methods:{
clickHandle(){
console.log("被點(diǎn)擊了")
},
clickDiv(){
console.log("DIV")
},
clickP(){
console.log("P")
}
}
}
</script>
<style scoped>
</style>
五、數(shù)組變化偵測
<template>
<h3>數(shù)組變化偵聽</h3>
<ul>
<li v-for="(item,index) of names" :key="index"> {{item}}</li>
</ul>
<!-- Vue可以偵聽響應(yīng)式數(shù)組的變更方法 并且在調(diào)用的時(shí)候觸發(fā)相關(guān)的更新
push() 添加
pop() 取出最上面的一個(gè)
shift()
unshift()
splice()
sort()
reverse() 逆置
-->
<button @click="addListHandle1">reverse</button>
<!--
使用替換數(shù)組的方法來更新
filter()
concat()
slice()
直接對(duì)原數(shù)組進(jìn)行變更
-->
<button @click="addListHandle2">itemupdate</button>
</template>
<script>
export default {
name: "ArrayListenerDemo",
data(){
return{
names:["張三","李四","王五"]
}
},
methods:{
addListHandle1(){
this.names.reverse()
},
addListHandle2(){
//直接this.names.concat(["123"])不會(huì)引起UI更新
this.names=this.names.concat(["123"])
}
}
}
</script>
到了這里，關(guān)于Vue前端框架08 Vue框架簡介、VueAPI風(fēng)格、模板語法、事件處理、數(shù)組變化偵測的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
