文章內容
-
MVC與MVVM的區別
-
vue基本的代碼的結構，不允許給body給id
-
插值表達式 v-clock v-text v-html v-bind v-on v-model v-for v-if v-show
縮寫：v-bind : v-on @ -
事件修飾符： .stop .prevent .capture .self .once
-
el 指定要控制的區域
data 對象，指定區域內要用到的數據，methods 方法，computed 計算屬性。 -
在VM實例中，如果要訪問data上的數據，或者要訪問methods中的方法，必須帶上this
-
在v-for要會使用key屬性綁定到特定的值
-
v-model 值用於表單的雙向綁定
-
在vue中綁定樣式的兩種方式， v-bind:class v-bind:style
1. 示例模板,實例化一個Vue對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!--導入vue的CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<div id="app1"> {{ msg }}</div>
</body>
<script>
// 創建一個Vue實例
// 導入包之后，瀏覽器內存中多了一個Vue構造函數
var vm1 =new Vue({
el: "#app1",
data: {
msg: 'Hello word'
}
})
</script>
</html>
以下示例都用這種格式演示
<body>
</body>
<script>
</script>
<style>
</style>
2. v-clock、v-text、v-html、v-bind綁定屬性、v-on綁定事件
<body>
<div id="app2">
<!-- clock屬性 能夠解決 插值表達式閃爍的問題，當vue在之后引入
網速特別慢的情況下頁面顯示為 {{ 對應數據 }}
在加載的時候使用 v-clock 的樣式 加載完畢就不顯示該樣式了-->
<p v-clock> xx {{ msg }} xx </p>
<!-- v-text默認沒有閃爍問題，
v-text 會覆蓋標簽里面的text-->
<h4 v-text="msg"> 我是要被替換的內容 </h4>
<!-- v-text不能被渲染成html -->
<div> {{ msg2 }}</div>
<!-- 插入html -->
<div v-html="msg2"></div>
<!-- v-bind 綁定屬性的指令,就是讓屬性與某個變量或表達式活計算屬性
綁定下面的mytitle是變量，可以當做變量使用v-bind相當於表達式，-->
<input type="button" value="按鈕" v-bind:title="mytitle + '456'">
<!--v-bind簡寫形式 v-bind: :-->
<input type="button" value="簡寫" :title="createTitle">
<!-- v-on: 事件綁定機制 簡寫形式 @ -->
<br>
<input type="button" value="v-on" v-on:click="show">
<input type="button" value="v-on" @mouseover="show">
<br>
</div>
</body>
<script>
var vm2 =new Vue({
el: "#app2",
data: {
msg: '123',
msg2: '<h1> H1 </h1>',
mytitle: '添加'
},
computed: {
createTitle() {
return '計算屬性'
}
},
methods: {
show() {
alert("v-on")
}
}
})
</script>
<style>
/* 屬性選擇器 只要使用了v-clock屬性，則樣式如下*/
[v-clock]{
display: none;
}
</style>
案例：跑馬燈效果
<body>
<div id="paomadeng">
<input type="button" value="浪起來" @click="runMsg">
<input type="button" value="低調" @click="stopMsg">
<h4> {{ msg }}</h4>
</div>
</body>
<script>
// 在vue實例中調用data，方法，要用this
var vm3 = new Vue({
el: '#paomadeng',
data: {
msg: '猥瑣發育，別浪~~！',
intervalId: null,
},
methods: {
runMsg() {
// var _this = this
// setInterval(function () {
// // 注意，由於this的指向問題，這里的this
// // 指向了定時器，和外部的this不一致。
// // 會報錯可以添加一個臨時變量,
// // 但是這個是投機取巧，可以用es6的語法解決
// let start = _this.msg.substring(0, 1)
// let end = _this.msg.substring(1)
// _this.msg = end + start
// }, 400)
if (!this.intervalId){
this.intervalId = setInterval( () => {
// substring分割字符串，從0開始，只分割一個
let start = this.msg.substring(0, 1)
// 從1開始，分割后面所有的
let end = this.msg.substring(1)
this.msg = end + start
}, 400)
}
},
stopMsg() {
clearInterval(this.intervalId)
this.intervalId = null
}
}
})
</script>
<style>
</style>
3. 事件修飾符
<body>
<div id="modify">
<!-- 1 .stop阻止事件冒泡 -->
<div @click="divHandler" style="height:150px; background-color: darkcyan" class="inner">
<input type="button" value="點擊我" @click.stop="bthHandler">
</div>
<!-- 2 .prevent阻止默認事件-->
<a href="http://www.baidu.com" @click.prevent="">百度</a>
<!-- 3 .capture 事件捕獲階段發生的事件，與冒泡階段順序相反 -->
<div @click.capture="divHandler" style="height:150px; background-color: darkcyan" class="inner">
<input type="button" value="點擊我" @click.stop="bthHandler">
</div><br>
<div @click.capture.stop="divHandler" style="height:150px; background-color: darkcyan" class="inner">
<input type="button" value="點擊我" @click.stop="bthHandler">
</div><br>
<!-- 4 .self 只當事件在該元素本身(不是子元素)觸發時回調 -->
<div @click.self="divHandler" style="height:150px; background-color: darkcyan" class="inner">
<input type="button" value="點擊我" @click="bthHandler">
</div><br>
<!-- 5 .once 事件只觸發一次 -->
<a @click.prevent.once="" href="http://www.baidu.com" target="view_window">第一次點我不跳轉</a>
<!-- .stop 與.self的區別
.self 當得到子元素的冒泡事件時，自己忽略這個冒泡不執行，直接冒泡給上級。
並不會阻止冒泡事件的傳遞，當然也不會阻止本身的冒泡事件。
.stop 阻止所有的冒泡事件，自己執行了就不向上冒泡了-->
<div @click="clickOuter" class="outer" style="width: 200px;height: 200px;background-color: darkcyan;overflow: hidden ">
<div @click.self="clickMiddle" class="middle" style="width: 100px;height: 100px;background-color: darkgreen;margin:50px auto;overflow: hidden">
<div @click="clickInner" class="inner" style="width: 50px;height: 50px;background-color: darkseagreen;margin:25px auto;overflow: hidden"></div>
</div>
</div><br>
<div @click="clickOuter" class="outer" style="width: 200px;height: 200px;background-color: darkcyan;overflow: hidden">
<div @click.stop="clickMiddle" class="middle" style="width: 100px;height: 100px;background-color: darkgreen;margin: 50px auto;overflow: hidden">
<div @click="clickInner" class="inner" style="width: 50px;height: 50px;background-color: darkseagreen;margin: 25px auto"></div>
</div>
</div>
</div>
</body>
<script>
var modify = new Vue({
el: '#modify',
data: {
},
methods: {
divHandler() {
alert("inner")
},
bthHandler() {
alert("inner > button")
},
clickOuter() {
alert("outer")
},
clickMiddle() {
alert("middle")
},
clickInner() {
alert("inner")
},
}
})
</script>
<style>
</style>
4. v-model數據的雙向綁定
Vue中，只有v-model能夠實現數據的雙向綁定，其他的都是從數據源到Html的單向綁定
<body>
<div id="model">
<h4>{{msg}}</h4>
<!-- 先試試 v-bind 實現數據的單行的綁定 M綁定到V中-->
單向綁定<input type="text" :value="msg" style="width: 40%"> <br>
雙向綁定<input type="text" v-model="msg" style="width: 40%">
</div>
</body>
<script>
// v-model 實現表單數據的雙向綁定，v-model只能用在表單中
// 表單元素：input(radio, text, address, email......) select checkbox textarea
// 只有v-model可以實現雙向綁定 v-on 只能實現單向的數據傳遞
var model = new Vue({
el: '#model',
data: {
msg: '@@@@@@@@@@@@@@@@@@@@',
}
})
</script>
<style>
</style>
5. 為class綁定類樣式的四種方法
<body>
<div id="classO">
<!-- 1. 傳遞一個數組，這里的class需要用v-bind綁定-->
<div :class="['red', 'thin', 'italic', 'active']">1這是一個很大的H1標簽，大到你無法想象</div>
<!-- 2. 三元表達式，不加單引號的渲染成一個變量 -->
<div :class="['red', 'thin', 'italic', flag?'active':'']">2這是一個很大的H1標簽，大到你無法想象</div>
<!-- 3. 在數組中使用對象的形式，提高可讀性 -->
<div :class="['red', 'thin', 'italic', {'active':true}]">3這是一個很大的H1標簽，大到你無法想象</div>
<!-- 4. 直接使用對象 ,使用v-bind綁定對象的時候，對象的屬性名是，類名，對象的屬性可以帶引號，也可以不帶引號-->
<div :class="{'red':true, thin:'true',italic:true ,active:false}">4這是一個很大的H1標簽，大到你無法想象</div>
<div :class="classObj">5這是一個很大的H1標簽，大到你無法想象</div>
</div>
</body>
<script>
new Vue({
el: '#classO',
data: {
flag: false,
classObj:{red:true, thin:true,italic:true ,active:false}
}
})
</script>
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style:italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
6. 綁定內聯樣式
<body>
<div id="styleO">
<!-- 1.直接在元素上通過v-bind綁定-->
<!-- 這里對象就是無序鍵值對的集合, -->
<h1 :style="{color:'red', 'font-weight':200}">1,這是一個H1</h1>
<!-- 2.將樣式對象，定義到data中，直接引用到:style中-->
<h1 :style="flag">2,這是一個H1</h1>
<!-- 3.在：style中通過數組，引用多個data上的樣式對象-->
<h1 :style="[styleObj1,styleObj2]">3,這是一個H1</h1>
</div>
</body>
<script>
new Vue({
el: '#styleO',
data: {
flag: {color:'red', 'font-weight':200},
styleObj1: {color:'red', 'font-weight':200},
styleObj2: {'font-style':'italic', letterSpacing:'0.5rem'}
}
})
</script>
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style:italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
7. v-for指令使用的四種方式
v-for
<body>
<div id="vfor">
<!-- v-for循環普通數組
v-for和key屬性 -->
<ul>
<!-- 獲取索引值的方式i-->
<li v-for="(item, i) in list">{{ i }}:{{ item }} </li>
</ul>
<ul>
<!-- 獲取多個對象-->
<li v-for="(user,i) in dic">{{i}}、姓名：{{user.name}} 年齡：{{user.age}}</li>
</ul>
<!-- v-for循環對象,遍歷對象身上的鍵值對的時候，除了有val,key,還有第三個參數 索引-->
<ul>
<li v-for="(val,key,index) in user">{{index}}: {{key}} {{val}}</li>
</ul>
<!-- v-for迭代數字-->
<ul>
<!-- in 后面我們放過 普通數組，對象，還可以放數字！-->
<!-- 通過循環數字進行循環遍歷，如果使用v-for迭代數字，前面的count從 1 開始-->
<li v-for="count in 10">這是第 {{count}}次循環</li>
</ul>
<!-- v-for循環中key屬性的使用 -->
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
<!-- key綁定多選框綁定的值，key 在使用是時候必須使用v-bind屬性綁定的形式，指定key的值
在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果v-for有問題，必須在使用v-for的同時
，指定唯一的字符串/數字類型 :key 值-->
<div v-for="(item,i) in lis" :key="item.id">
<input type="checkbox">{{i}}:{{item.id}} {{item.name}}
</div>
</div>
</body>
<script>
new Vue({
el: '#vfor',
data: {
list: [1,2,3,4,5],
dic:[{
name:'趙',
age:23,
},{
name:'錢',
age:24,
},{
name:'孫',
age:25,
},{
name:'李',
age:26,
}],
user:{
name:'屎大顆',
workingName:'ire men'
},
lis: [
{id:1, name:'李斯'},
{id:2, name:'嬴政'},
{id:3, name:'趙高'},
{id:4, name:'韓飛'},
{id:4, name:'荀子'},
],
name: '',
id: '',
},
methods: {
add(){
// push向列表末尾中增加數據 unshift向列表頭中增加數據
// this.lis.push({id:this.id,name:this.name})
this.lis.unshift({id:this.id,name:this.name})
}
}
})
</script>
<style>
</style>
7. v-if和v-show的使用和特點：
<body>
<div id="ifshow">
<input type="button" @click="flag = !flag">
<!-- v-if原理是刪除和增加dom元素。較高的切換性能消耗-->
<h3 v-if="flag">這是用v-if控制的元素</h3>
<!-- v-show的原理是增加display:none屬性，有較高的初始渲染消耗-->
<h3 v-show="flag">這是用v-if控制的元素</h3>
<!--如果元素涉及到頻繁的切換消耗，用v-show,如果顯示切換頻率特別小，用v-if-->
</div>
</body>
<script>
</script>
<style>
new Vue({
el:"#ifshow",
data:{
flag:true
},
methods:{
taggle() {
this.flag = ! this.flag
}
}
})
</style>