Vue簡(jiǎn)介
動(dòng)態(tài)構(gòu)建用戶界面的漸進(jìn)式 JavaScript 框檐晕，遵循 MVVM 模苛败。
MVVM 是Model-View-ViewModel的簡(jiǎn)寫(xiě)娘荡，Model也就是Vue中的data茸塞，而View是視圖也就是標(biāo)簽頁(yè)面碳锈，VM就是Vue中用于關(guān)聯(lián)View與data的代碼缕碎，方法，回調(diào)等等,也就是Vue
Vue特點(diǎn) --響應(yīng)式
響應(yīng)式的原理是數(shù)據(jù)代理，可以見(jiàn)文章數(shù)據(jù)代理中會(huì)詳細(xì)說(shuō)明炒瘟。
簡(jiǎn)單說(shuō)明就是：在數(shù)據(jù)變化時(shí)可以被檢測(cè)并對(duì)這種變化做出響應(yīng)的機(jī)制，網(wǎng)頁(yè)相關(guān)聯(lián)數(shù)據(jù)數(shù)據(jù)會(huì)跟著變化
Vue 簡(jiǎn)單示例
<!DOCTYPE>
<html>
<head>
<title>Vue學(xué)習(xí)測(cè)試</title>
<script src="js/v2.6.10/vue.js"></script>
</head>
<body>
<div id="root">
<p>{{tittle}}</p><br />
<p>{{studentName}}</p><br />
<button @click="clickButton()" >點(diǎn)擊</button>
</div>
<script>
const vm=new Vue({
el:"#root",
data:{
tittle:"測(cè)試Vue插值 指令 計(jì)算屬性",
studentName:"點(diǎn)擊前姓名"
},
filters: {
fnName: function(value) {
return value;
}
}
methods:{
clickButton(){
this.studentName='點(diǎn)擊后姓名'
}
},
computed: {
name() {
return this.data
}
},
watch: {
data(newValue, oldValue) {
}
},
});
</script>
</body>
</html>
el的兩種寫(xiě)法：
el的功能是
- 指定一個(gè)頁(yè)面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)第步；
- 也就是指定Vue中的方法和數(shù)據(jù)與哪個(gè)DOM元素進(jìn)行交互疮装。
寫(xiě)法1：
通過(guò)初始化 new Vue() 通過(guò)配置屬性el屬性通過(guò)CSS選擇器指定具體DOM元素 例如el:"#root",
在實(shí)例化的同時(shí)進(jìn)行掛載
寫(xiě)法2：
通過(guò)方法vm.$mount()進(jìn)行掛載，可以先初始化Vue實(shí)例然后選怎特定時(shí)機(jī)掛載到特定的DOM元素
示例： vm.$mount("#root"); 參數(shù)為CSS選擇器指定DOM元素
Vue中的data的兩種寫(xiě)法
- 對(duì)象式（不推薦）
- 函數(shù)式
示例：
const vm= new Vue({
data:function(){
return {
insertMessage:"1111",
}
},
});
模板語(yǔ)法
什么是模板粘都？廓推？？
模板是將一個(gè)事物的結(jié)構(gòu)規(guī)律予以固定化翩隧、標(biāo)準(zhǔn)化的成果樊展，它體現(xiàn)的是結(jié)構(gòu)形式的標(biāo)準(zhǔn)化。
什么是語(yǔ)法
所謂「語(yǔ)法」堆生，就是「語(yǔ)言的規(guī)律」专缠，是觀察、分析實(shí)際語(yǔ)言現(xiàn)象之后人為總結(jié)出來(lái)的規(guī)律淑仆。而不是「語(yǔ)言的法律」涝婉，不是語(yǔ)法學(xué)家指定的普通人必須遵守的語(yǔ)言的法條。
Vue模板語(yǔ)法就是Vue規(guī)定(程序支持)用戶可以使用的基本指令糯景，就是Vue已經(jīng)寫(xiě)好可以直接使用的命令或指令
Vue模板語(yǔ)法簡(jiǎn)介：
-插值語(yǔ)法
-指令語(yǔ)法
插值語(yǔ)法說(shuō)明：
語(yǔ)法示例：
<p>{{差值表達(dá)式}}</p>
采用雙大括號(hào)的形式嘁圈，用于將內(nèi)容（js表達(dá)式）插入到標(biāo)簽體內(nèi)，{{}}內(nèi)部的為JS表達(dá)式蟀淮，可以直接使用（引用）Vue實(shí)例中的屬性（data中的數(shù)據(jù)）最住，方法。
指令語(yǔ)法
指令語(yǔ)法是指已V-開(kāi)頭的怠惶，Vue定制的語(yǔ)法涨缚。寫(xiě)特定語(yǔ)法，具有特定功能，該語(yǔ)法會(huì)在Vue編譯的時(shí)候轉(zhuǎn)化為特定功能的js代碼脓魏。
內(nèi)置指令：
v-text v-html文本指令語(yǔ)法
v-text 通過(guò)綁定內(nèi)容兰吟，替換標(biāo)簽的所有標(biāo)簽體（標(biāo)簽不被解析）
v-html 綁定可以解析html文件，但是容易被XXS攻擊茂翔。
v-pre指令 跳過(guò)Vue編譯指令
-可以跳過(guò)所在節(jié)點(diǎn)的Vue的編譯過(guò)程
-可以利用它跳過(guò)：沒(méi)有使用指令的語(yǔ)法混蔼，沒(méi)有使用插值語(yǔ)法的節(jié)點(diǎn)，會(huì)加快編譯珊燎。
v-cloak 防閃爍指令
作用就是用來(lái)解決瀏覽器在加載頁(yè)面時(shí)因存在事件差而產(chǎn)生的閃動(dòng)問(wèn)題惭嚣，她的原理是先隱藏文件掛載位置，處理渲染好后在顯示最終結(jié)果悔政。這個(gè)指令需要與css規(guī)則一起使用才可以
方法：在 html 中的加載點(diǎn)加上 v-cloak
<ul v-cloak v-for="item in obj">
<li>{{ obj.name }}</li>
</ul>
//然后在css中添加
//解釋：包含 v-cloak 屬性的 html 標(biāo)簽在頁(yè)面初始化時(shí)會(huì)被隱藏晚吞。
<style>
[v-cloak] {
display: none;
}
</style>
Vue條件渲染 顯示與隱藏
標(biāo)簽的顯示與隱藏
- v-if
- v-show
v-if
寫(xiě)法
1 v-if=''表達(dá)式"
2 v-else-if="表達(dá)式"
3 v-else="表達(dá)式"
適用于切換頻率低的場(chǎng)景：
特點(diǎn)：不展示DOM元素直接被刪除
注意：v-if v-else-if v-else 一起組合使用。
v-show
寫(xiě)法 v-show="表達(dá)式"
適用于切換頻率比較高的場(chǎng)景
特點(diǎn)：不顯示DOM元素未被移除谋国，僅僅是隱藏掉槽地。
使用v-if隱藏時(shí)候無(wú)法獲取DOM元素，v-show可以芦瘾。
v-bind--數(shù)據(jù)綁定
v-bind：屬性名 (或v-model)為元素的屬性與js表達(dá)式相綁定捌蚊。
例如v-bind:scr="js表達(dá)式" 簡(jiǎn)寫(xiě)方式 :src="js表達(dá)式"
綁定class樣式：字符串寫(xiě)法
<template>
//綁定class樣式：字符串寫(xiě)法,適用于：樣式的類名不確定，需要?jiǎng)討B(tài)指定
<view class="basic" :class="mood" @click="changeMood">{{name}}</view>
//綁定class樣式：數(shù)組寫(xiě)法,適用于：要綁定的樣式個(gè)數(shù)不確定旅急，名字也不確定
<view class="basic" :class="classArr">{{name}}</view>
//綁定class樣式：對(duì)象寫(xiě)法,適用于：要綁定的樣式個(gè)數(shù)確定逢勾，名字也確定，但要?jiǎng)討B(tài)決定用不用
<view class="basic" :class="classObj">{{name}}</view>
</template>
<script>
export default {
data() {
return {
name:"class樣式綁定",
mood:'normal',
classArr:["a","b","c"],//這樣寫(xiě)便于對(duì)數(shù)組的增刪改查藐吮，動(dòng)態(tài)切換
classObj:{a:false,b:false}//這樣寫(xiě)便于動(dòng)態(tài)切換
};
},
methods: {
changeMood() {
//定義一個(gè)數(shù)組，用來(lái)改變樣式的切換,利用數(shù)組的生成隨機(jī)數(shù)函數(shù)實(shí)現(xiàn)
const arr = ['happy','sad','normal']逃贝；
this.mood = arr[Math.floor(Math.random()*3)]//Math.random()：0~1的隨機(jī)數(shù)谣辞，不包含1
}
}
}
</script>
<style>
.basic{
width:500px;
height:200px;
border:1px solid black;
}
.happy{
border:5px solid red;
background-color: rgba(255,255,0,0.644);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border:5px solid rab(2,197,2);
background-color: gray;
}
.normal{
background: #1382f8;
}
.a{
background: #8B008B;
}
.b{
font-size:30px;
text-shadow:2px 2px 10px red
}
.c{
border-radius:20px
}
</style>
綁定Sytle樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>綁定樣式</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 綁定 style 樣式 數(shù)組寫(xiě)法 -->
<div class="basic" :style="{fontSize:size+'px'}">{{name}}5</div>
<div class="basic" :style="[styleObj,styleObj2]">你好</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
styleObj: {
fontSize: '40px',
color: 'red',
},
styleObj2: {
backgroundColor: 'blue'
}
},
})
</script>
<style>
.basic {
height: 100px;
width: 100px;
}
</style>
</html>
全局自定義指令
以V-開(kāi)頭都是Vue給我們寫(xiě)好的指令，我們也可以自定義自己的指令沐扳，指令本質(zhì)是js代碼的合集代表泥从。
通過(guò) Vue.[directive]( id, [definition] )方式注冊(cè)全局指令。然后在入口文件中進(jìn)行 Vue.use() 調(diào)用
函數(shù)式
1.自定義指令 沪摄，在對(duì)應(yīng)方法內(nèi)寫(xiě)入原生JS代碼
<!DOCTYPE>
<html>
<head>
<title> vue 自定義指令</title>
<script src="js/v2.6.10/vue.min.js"></script>
</head>
<body>
<div id="root">
<!-- 自定義指令不能用大駝峰的命名方式躯嫉，要使用-進(jìn)行分割 -->
<p v-myorder='msg'>123</p>
<p v-my-text-order='msg'>123</p>
<button @click="changeMsg">點(diǎn)擊更改msg內(nèi)容</button>
</div>
<script>
const vm=new Vue({
data() {
return {
msg: "開(kāi)始測(cè)試"
}
},
methods:{
changeMsg(){
this.msg=this.msg+"123";
}
},
//自定義指令方法模式，需要以directives屬性進(jìn)行定義
directives: {
//定義方法與指令對(duì)應(yīng)
//自定義標(biāo)簽方法在：標(biāo)簽與指令綁定的時(shí)候被調(diào)用杨拐、指令說(shuō)在模板被重新解析的時(shí)候祈餐。
//如果使用-分割的時(shí)候方法要使用雙引號(hào)闊
"my-text-order"(element,msg){
element.innerText=msg.value+"自定義命名方式";
},
myorder(element,msg){
element.innerText=msg.value+"自定義指令";
}
}
});
vm.$mount("#root");
</script>
</body>
</html>
對(duì)象式
<div id="root">
<button @click="n++">點(diǎn)擊進(jìn)行自增</button>
<input type="text" v-fbind:value="n">
<!-- 自定義的一個(gè)fbind指令名 ，注意必須是小寫(xiě)-->
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el:"#root",
data:{
n:1,
},
directives:{
//directives 里面可以存放自定義指
//對(duì)象式寫(xiě)法哄陶，可以分步寫(xiě)
fbind:{
//指令與元素綁定的時(shí)候（一上來(lái)時(shí)候）
bind(element,binding){
element.value = bingding.value;
},
//指令所在元素插入頁(yè)面的時(shí)候
inserted(element,binding){
element.focus()//獲取焦點(diǎn)
},
//指令所在模板被重新解析時(shí)候（data數(shù)據(jù)發(fā)生改變帆阳，則會(huì)重新解析）
update(element,binding){
element.value = binding.value;
}
}
}
})
</script>
v-on 事件綁定
為控件綁定事件：
1.通過(guò)v-on:XX或者@XXX 綁定事件，其中XXX為事件名稱
2.事件回調(diào)需要配置在Vue配置想的methods對(duì)象中屋吨，最后會(huì)在vm上.
3.methods中配置的函數(shù)蜒谤，不要使用箭頭函數(shù)山宾，否則this就不是vm實(shí)例了。
4.methods中配置函數(shù)鳍徽，都是被Vue管理的函數(shù)资锰，this的指向是vm或組件實(shí)例對(duì)象
5.@clik="demo"和@click="demo($event)"效果一致，或者可以傳遞參數(shù)
傳參數(shù)實(shí)例：
@click="demo($event阶祭，參數(shù)1绷杜，參數(shù)2)
事件修飾符
1、prevent：阻止默認(rèn)事件
2胖翰、stop：阻止事件冒泡
3接剩、once：事件只觸發(fā)一次
5.se1f：事件觸發(fā)事件，只有event.target是元素的當(dāng)前操作：
示例：
<template>
<div @click="clickEvent('out')">
<button @click.stop="clickEvent('in')">點(diǎn)擊</button>
</div>
</template>
<script lang="ts">
export default {
methods: {
clickEvent(e) {
console.log(e);
//不使用.stop萨咳，點(diǎn)擊 button 會(huì)輸出 in 和 out
//使用.stop懊缺，點(diǎn)擊button 只會(huì)輸出 in
},
},
};
</script>
鍵盤(pán)事件監(jiān)聽(tīng)
基本使用方法：
鍵盤(pán)的基本事件：
- keydown
- keypress
- keyup
通過(guò) v-on 在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)添加按鍵修飾符
1、Vue 中的按鍵別名培他，按鍵修飾符：
回車 => enter
刪除 => delete （捕獲‘刪除’和‘退格’鍵）
退出 => esc
空格 => space
換行 => tab
上 => up
下 =>down
左 => left
右 => right
基本示例：
<input v-on:keyup.Alt="showtips" type="text">
2鹃两、Vue未提供別名的按鍵，
可以使用按鍵原始的 key 值 去綁定舀凛，但是需要注意轉(zhuǎn)換用短橫線命名（比如：鍵盤(pán)上的：CAPSLOCK 俊扳。就需要轉(zhuǎn)換為：caps-lock）
3、系統(tǒng)修飾鍵（用法特殊）：ctrl猛遍、alt馋记、shift、meta（win鍵）
（1）配合keyup使用：按下修飾鍵的同時(shí)懊烤，再按下其他鍵梯醒，隨后釋放其他鍵，事件才會(huì)被觸發(fā)
（2）配合keydown使用：正常觸發(fā)事件腌紧。
系統(tǒng)修飾鍵
可以用如下修飾符來(lái)實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器茸习。
- .ctrl
- .alt
- .shift
- .meta
Do something
與按鍵別名不同的是，修飾鍵和 keyup 事件一起用時(shí)壁肋，事件引發(fā)時(shí)必須按下正常的按鍵号胚。換一種說(shuō)法：如果要引發(fā) keyup.ctrl，必須按下 ctrl 時(shí)釋放其他的按鍵浸遗；單單釋放 ctrl 不會(huì)引發(fā)事件猫胁。
<input @keyup.alt.67="clear">
<!-- 按下Alt + 釋放任意鍵觸發(fā) -->
<input @keyup.alt="other">
<!-- 按下Ctrl + enter時(shí)觸發(fā) -->
<input @keydown.ctrl.13="submit">
對(duì)于elementUI的input，我們需要在后面加上.native, 因?yàn)閑lementUI對(duì)input進(jìn)行了封裝乙帮，原生的事件不起作用杜漠。
<input v-model="form.name" placeholder="昵稱" @keyup.enter="submit">
<el-input v-model="form.name" placeholder="昵稱" @keyup.enter.native="submit"></el-input>
.exact修飾符
.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。
<!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒(méi)有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) -->
<button v-on:click.exact="onClick">A</button>
鼠標(biāo)按鈕修飾符
.left
.right
.middle
4、也可以使用 keyCode 去指定具體的按鍵（不推薦）
自定義指令
這些修飾符會(huì)限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕驾茴。
