python就業班day28----vue庫的使用
阿新 • • 發佈：2018-12-13
vue進行管理之後，如果data裡沒有body的元素裡寫的鍵名，元素直接就不顯示了
操作樣式： 操作樣式通過style：跟裡面的樣式沒關係，直接賦值，用鍵值對{}
<div id="#app">
<!-- 去vue的data裡面找變數 -->
<div :style="{fontSize:myFontSize,color:'red'}">abc<.div>
<div :style="myStyle">def</div>
</div>
<script>
new Vue({
el:"#app", 
操作樣式通過class：不能直接賦值（用vue也不行），最終載入的一定是裡面的樣式
<style>
.myBorder{
height:100px;
width:200px;
border:1px solid #000；
}
.myBgColor{
background:red;
}
</style> <body>
<div id="#app">
<!-- 最終去style裡面找樣式 -->
<!-- []，能載入多個樣式 -->
<div :class="['myBorder','myBgColor']">abc</div>
<div :class="myClass">def</div>
<!-- {}，選擇樣式是否載入 -->
<div :class="{'myBorder':isBorderTrue,'myBgColor':isBgColorTrue}" 
三元運算格式：boolean?'值1':'值2'
true返回值1，false返回值2
v-on：繫結點選事件
<div id="#app">
<!-- <button onclick = "alert('aaa')" >點我</button> -->
<button v-on:click="number+=1">點我</button>
<!-- 簡化寫法 -->
<button @click="number+=1">點我</button>
<span>{{number}}</span>
</div>
<script>
new Vue({
el:"#app",
data:{
number: 10,
}
})
</scriot>
例：選項卡
<body>
<div id="app">
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按鈕1" :class="Now==1?'active':' '" @click="Now=1">
<input type="button" value="按鈕2" :class="Now==2?'active':' '" @click="Now=2">
<input type="button" value="按鈕3" :class="Now==3?'active':' '" @click="Now=3">
</div>
<div class="tab_cons">
<div :class="Now==1?'current':' '">按鈕一對應的內容</div>
<div :class="Now==2?'current':' '">按鈕二對應的內容</div>
<div :class="Now==3?'current':' '">按鈕三對應的內容</div>
</div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
Now:1,
}
})
</script>
</body>
計算屬性和偵聽屬性：computed和watch 計算屬性：computed()，寫函式，自己起函式名，在外面呼叫
<body>
<div id="#app">
<div>
<!-- 在頁面中翻轉 -->
{{message.split("").reverse().join("")}};
</div>
<br>
<div>
<!-- 呼叫函式，操作data裡變數 -->
{{reverseMessage1}};
{{a}};
</div>
<br>
<div>
<!-- 呼叫函式，使用返回值 -->
{{reverseMessage2}}
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"我愛你",
a:"",
},
computed:{
reverseMessage1:function(){
this.a = this.message.split("").reverse().join("");
},
reverseMessage2:function(){
return this.message.split("").reverse().join("");
}
}
})
</script>
</body>
監聽屬性：watch()，寫函式，函式名是 data裡變數。系統會預設給函式傳兩個形參，記得要用變數接收。
<body>
<div>
<button @click="number+=1">點我</button>
<span>{{number}}</span>
</div>
<script>
new Vue({
el:"#app",
data:{
number:0,
},
watch:{
// numebr:表示監聽number屬性；function()裡會傳入形參
// 第一個是改變後的值，第二個是改變前的值
number:function(newValue,oldValue){
console.log(newValue);
console.log(oldValue);
}
}
})
</script>
</body>
v-if條件渲染：控制標籤內容是否顯示出來，如果不顯示就銷燬標籤
格式：v-if="boolean" 如果為true顯示內容，否則不顯示
v-show：通過控制標籤的display樣式決定是否顯示，標籤不銷燬，位置還保留，只是display變成了none 格式：和v-if一樣
如果使用vue控制介面，不要在使用display，不然display優先順序高於vue
<body>
<div id="#app">
<!-- 通過if控制內容顯示 -->
<div v-if="seen">明月幾時有</div>
<!-- v-else-if else -->
<div v-if="score>80&&score<=100">完美</div>
<div v-else-if="score>=60&&score<=79">優秀</div>
<div v-else>不及格</div>
<div v-show="seen">明月幾時有</div>
</div>
<script>
new Vue({
el:"#app",
data:{
seen:false,
score:68,
},
})
</script>
</body>
v-for迴圈：遍歷幾次，產生幾個標籤
格式：v-for="變數 in 容器"
<body>
<div>
<ul>
<!-- 遍歷陣列得到字串 -->
<!-- 前面是值，後面是下標索引 -->
<li v-for="str in books">{{str}}</li>
<li v-for="(str,index) in books">第{{index}}部----{{str}}</li>
<hr>
</ul>
<ul>
<!-- 遍歷陣列得到鍵值對 -->
<li v-for="obj in persons">{{obj}}</li>
<li v-for="obj in persons">{{obj.name}} ---- {{obj.Kongfu}}</li>
<li v-for="(obj,index) in persons">第{{index}}個----{{obj.name}} ---- {{obj.Kongfu}}</li>
<hr>
</ul>
<ul>
<!-- 遍歷鍵值對得到字典名和字典值 -->
<!-- 注意：前面是鍵，後面是值 -->
<li v-for="(value,key) in Xiaofengmsg">{{key}}--{{value}}</li>
<li v-for="(value,key,index) in Xiaofengmsg">第{{index}}項----{{key}}---{{value}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
books:["天龍","九陰","武墓","葵花"],
persons:[
{name:"蕭峰",Kongfu:"降龍十八掌"},
{name:"段譽",Kongfu:"六脈神劍"},
{name:"虛竹",Kongfu:"天山折梅手,天山六陽掌,天山融雪功,生死符"}
],
Xiaofengmsg:{name:"蕭峰",age:38,Kongfu:"降龍十八掌",lover:"阿朱"}
}
})
</script>
</body>
事件處理：用v-on:click監聽DOM事件，method去處理複雜操作（遍歷容器）
v-on:click簡寫：@click
格式：
v-on:click="方法名/簡單運算程式碼"
@click="方法名/簡單運算程式碼"
<div id="app">
<button @click="number+=1">點我增加</button>
<button @click="number-=1">點我減小</button>
<span>{{number}}</span>
<hr>
<button @click="add()">點我記錄</button>
<span v-for="num in numbers">{{num}}</span>
</div>
<script>
new Vue({
el:"#app",
data:{
number:0,
numbers:[]
},
methods:{
add:function(){
if(this.numbers.indexOf(this.number)==-1){
this.numbers.push(this.number);
}
}
}
})
</script>
阻止事件冒泡：@click.stop，可以在子類寫方法，也可以在父類不寫方法
<style>
.grandfather {
width: 300px;
height: 300px;
background: lightcoral;
}
.father {
width: 200px;
height: 200px;
background: lightgreen;
}
.son {
width: 100px;
height: 100px;
background: lightblue;
}
.grandson{
width: 50px;
height: 50px;
background-color: #fff;
}
</style>
<div id="#app">
<div class="grandfather" @click="alert('grandfather...click')">
<!-- 阻止子類冒泡 -->
<div class="father" @click.stop>
<!-- 兒子被點選，在父類那裡被阻止冒泡 -->
<div class="son" @click="alert('son...click')">
<!-- 孫子被點選，在自己這就阻止了事件冒泡 -->
<div class="grandson" @click.stop="alert('grandson...click')">
</div>
</div>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
}
})
</script>
</div>
表單輸入內容的繫結（== 標籤帶value屬性，將value的屬性值給v-model裡面的變數==）：v-model
可用次方法獲取標籤的內容（類似html()、prop(“value”)和prop(“屬性”:“屬性值”)）
例：
<input type="text" v=model="userName">
<span>{{userName}}</span>
其中userName是vue裡data的變數
你在輸入框裡面寫什麼，span標籤裡面就顯示什麼