08.27自我總結 Vue的使用 一.掛載點 這樣設置好了後這個vue中的內容會與對應的css選擇器進行關聯 註意點: 掛載點只遍歷第一個匹配的結果 html與body標簽不可以作為掛載點 掛載點的只一般就採用id選擇器(唯一性) 二.插值表達式 :Vue中的msg變數發生變化的再沒其他約數條件下m ...
08.27自我總結
Vue的使用
一.掛載點
<!--導入vue-->
<script src="js/vue.js"></script>
<script>
new Vue({
el:'ccs選擇器'
})
</script>這樣設置好了後這個vue中的內容會與對應的css選擇器進行關聯
註意點:
- 掛載點只遍歷第一個匹配的結果
- html與body標簽不可以作為掛載點
- 掛載點的只一般就採用id選擇器(唯一性)
二.插值表達式
html差值部分頁面
<h1>{{msg}}</h1>Vue部分代碼
<script>
new Vue({
el:'h1'
data:{
msg:'插入的信息'
}
})
</script>註意點:Vue中的msg變數發生變化的再沒其他約數條件下msg也會發送變化
裡面值進行函數過濾
<h2>{{msg|函數名}}</h2> h2標簽內值為msg進過函數處理後的返回值三.約束變數渲染一次渲染
還是基於上述的html頁面
<!--原html頁面-->
<h1>{{msg}}</h1>
<!--進行約束設置,設置後一次性渲染,後面msg發送變化後裡面內容不會發送改變-->
<h1 v-once="msg">{{msg}}</h1>
<h1 v-once="msg" v-text='msg'></h1>
<h1 v-once="msg" v-html='msg'></h1>
<h1 v-once="msg">{{msg+msg2}}</h1>
<!--一次性渲染，插值表達式中的任何一個變數被限制，整個結果就不可變-->
改變值我們可以通過input框,輸入值改變msg變數的值
<input type="text" v-model="msg">
註意我們不能使用
<input type="text" :value="msg">
這個只能顯示msg,input輸入的值不會使得msg的值發送變化四.文本指令
1.v-text
<h2 v-text="msg"></h2>h2內的標簽中test就是由vue中傳的msg變數的值,但是其中html標簽不會被解析
裡面傳的值還能進行四則運算字元串等等的相關操作
2.v-html
<h2 v-html="html"></h2>
<--假設html變數為<a>ss<a>-->h2標簽會顯示ss
html標簽可被解析
五.屬性指令
重點
屬性指令：v-bind:屬性名="屬性值" => v-bind: 可以簡寫為 :
關於style的不同寫法
寫法一:
<!--1）變數：變數的值為字典-->
<div :style="my_style" class='test'></div>
<script>
new Vue({
el:'.test'
data:{
my_style: {
width: '100px',
height: '100px',
'background-color': 'cyan',
borderRadius: '50%'
},
}
})
</script>寫法二:
<!--2）字典中的多個變數-->
<div :style="{width: w, height: h, background: b}"></div>
<script>
new Vue({
el:'.test'
data:{
w: '50px',
h: '50px',
b: 'red',
}
})
</script>關於class的寫法
<!--class屬性-->
<!--<div class="box blue"></div>-->
<div :class="c"></div>
<div :class="[c1, c2]"></div>
<div :class="[c1, 'blue']"></div>
<!--x為類名，是否生效有變數y(true|false)值決定-->
<div :class="{x: y}"></div>
<div :class="[{'box': true}, c2]"></div>
<script>
new Vue({
el: '#app',
data: {
c: 'box blue',
c1: 'box',
c2: 'green',
y: true,
}
})
</script>六.事件指令
事件指令 v-on:事件名="函數" => v-on: 可以簡寫為 @
七.函數的創建
方法一
<script>
new Vue({
el:'h1'
data:{
msg:'插入的信息'
}
methods: {
函數名 () {
函數體
},
})
</script>方法二
<script>
new Vue({
el:'h1'
data:{
msg:'插入的信息'
}
methods: {
函數名:function () {
函數體
},
})
</script>方法三
<script>
new Vue({
el:'h1'
data:{
msg:'插入的信息'
}
methods: {
函數名:() => {
函數體
},
})
</script>註意點:這種寫法，內部拿不到this(這裡的this是指window)
八.事件指令傳參和不傳參的區別
<!--沒有傳值預設傳 函數會接收到事件對象 -->
<div @click="btnClick1">{{ msg }}</div>
<!--方法()不會直接調用方法，而是在點擊觸發後進行傳參，接收到的參數就是傳入的參數-->
<div @click="btnClick2(1, msg)">{{ msg }}</div>
<!--一旦書寫 方法() 就不再傳入事件對象，通過 $event 手動傳入事件對象-->
<div @click="btnClick3(msg, $event, $event)">{{ msg }}</div>九.表單指令
<form action="">
<!--表單指令：v-model="變數"-->
<!--雙向綁定：一個地方修改值，所有地方的數據都會被更新-->
<div>
<input type="text" v-model="info" name="usr">
<input type="password" v-model="info" name="pwd">
<p>{{ info | infoFilter }}</p>
</div>
<div>
<!--單選框：v-model="變數存放的是某個單選框的value值，代表該選框選中"-->
男<input type="radio" name="sex" value="male" v-model="sex_val">
女<input type="radio" name="sex" value="female" v-model="sex_val">
</div>
<div>
<!--單獨的覆選框：v-model="true|false代表該選框是否選中"-->
是否同意<input v-model="cb_val" value="yes" type="checkbox" name="agree">
</div>
<div>
<!--群覆選框：v-model="存放選中選框value的數組"-->
<!--cbs_valrug如果傳空數組會一個都不選,如果數組對應裡面的value會勾選-->
<!--cbs_valrug如果傳true|false,裡面的能容就表示要麼全選要麼都不選->
男<input v-model="cbs_val" value="male" type="checkbox" name="hobby">
女<input v-model="cbs_val" value="female" type="checkbox" name="hobby">
不能說<input v-model="cbs_val" value="others" type="checkbox" name="hobby">
<p>{{ cbs_val }}</p>
</div>
<div>
<input type="submit">
</div>
</form>
<script>
new Vue({
el: '#app',
data: {
info: '',
sex_val: 'female',
cb_val: 0,
cbs_val: ["others"]
}
})
</script>十.條件指令
- v-if:隱藏時不渲染,隱藏時在記憶體中建立緩存，可以通過key屬性設置緩存的鍵
- v-show:隱藏時用display:none渲染
使用:
<div class="box red" v-if="ture|flase" key="box_red"></div>
<div class="box blue" v-show="ture|flase"></div>
接收的值只能是ture|flase,如果是0則是flase,如果是1則是ture
key屬性可以對於在記憶體中名字進行設置,且f12你看不到key這個屬性關於記憶體的存儲
- localStorage.key名稱:key值:永久緩存但是可以手動刪除
- sessionStorage.key名稱:key值:臨時緩存關閉頁面或者關閉瀏覽器重新打開就會消失
關於記憶體中的調用
- localStorage.key名稱
sessionStorage.key名稱
- v-if|v-elif|v-else:
- 註意點
- if如果生效就不往下走同理elif也一樣
- else前面不生效即使他設置了
flase他依舊會生效 - 所有else一般不做任何值設置他都是true
- 註意點
