Vue使用指南(二)
'''
1.指令 *****
文本指令
屬性指令
方法(事件)指令
表單指令
條件指令
循環指令
2.組件 ***
局部組件
全局組件
父子組件間的交互
'''
<body>
<div id="app">
<!-- 1) 插值表達式 -->
<p>{{ msg }}</p>
<p>{{ 1 + 2 * 3 + '條' + msg }}</p>
<!-- 2) v-text -->
<p v-text="msg"></p>
<p v-text="'msg'"></p>
<!-- 3) v-html：能解析html代碼語法 -->
<p v-text="html_msg"></p>
<p v-html="html_msg"></p>
<!-- 4) v-once：結合插值表達式來使用，變量值一旦被初始化賦值後就不會再改變 -->
<input type="text" v-model="val">
<p>{{ val }}</p>
<p v-text="val"></p>
<p v-html="val"></p>
<p v-once>{{ val }}</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你是p',
html_msg: '<b>html語法代碼是否解析</b>',
val: '000'
}
})
</script>
屬性指令
# 1.v-bind:屬性名="變量"
# 2.簡寫=> :屬性名="變量"
# 3.:class="變量" | :class="{類名:is_able}" | :class="[類1變量, ..., 類n變量,]"
<head>
<meta charset="UTF-8">
<title>屬性指令</title>
<style>
.cls_a {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.cls_b {
text-align: center;
line-height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 屬性指令：v-bind -->
<div id="app">
<!-- 1) 自定義屬性綁定變量 -->
<p v-bind:abc="a"></p>
<!-- 2) title屬性 -->
<p title="鼠標懸浮的文本提示">這是一個p段落</p>
<p v-bind:title="my_title">這是一個p段落</p>
<!-- 3) class屬性 -->
<!-- 重點：v-bind: 能夠簡寫爲 : -->
<!-- my_class能夠被任意賦值 -->
<p :class="my_class">這是一個p段落</p>
<!--{類名:類是否起做用, ...} 類是否起做用 寫的是變量，變量的值爲true或false-->
<!--應用場景：經過一個變量真假控制一個類名是否起做用-->
<p :class="{x:1, y:0, z:is_able}">這是一個p段落</p>
<!--[類名1, ..., 類名n]: 多類名，每個類名既能夠是字符串常量也能夠是變量-->
<p :class="[o, p, q, 'oqp']">這是一個p段落</p>
<!--多類名綜合使用-->
<p :class="[o, p, q, 'oqp', {k: true}, {h: false}]">這是一個p段落</p>
<!-- 4) style屬性 -->
<p :style="my_style">這是一個p段落</p>
<p :style="{color: 'red', backgroundColor: yellow}">這是一個p段落</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
a: 'A',
my_title: '鼠標懸浮的文本提示',
my_class: 'cls_a cls_b',
is_able: true,
o: 'O',
p: 'P',
q: 'Q',
my_style: {
color: 'red',
// 'font-size': '30px'
fontSize: '30px'
},
yellow: 'greenyellow'
}
})
</script>
事件指令
# 指令：v-on:事件名="方法變量"
# 簡寫：@事件名="方法變量"
# 簡寫：@事件名="方法變量()" => 不是方法的調用，而是用於傳參
# 簡寫：@事件名="方法變量('普通參數', $event)" => $event是事件參數，能夠經過它獲得鼠標點擊的相關信息
<body>
<!-- 指令：v-on:事件名="變量" -->
<!-- 簡寫：@事件名="變量" -->
<div id="app">
<p v-on:click="fn1" :style="{color: m_c}">{{ msg }}</p>
<p @mouseover="fn2" @mouseleave="fn3" @mousedown="fn4" @mouseup="fn5">{{ msg }}</p>
<!--事件須要參數時-->
<!-- 注意：事件綁定 方法名() 等價 方法名，不能調用方法，而是做爲傳參的標誌 -->
<p @click="func('abc')">{{ msg }}</p>
<!--類別django傳參的應用場景，能夠標識具體點擊的是哪一個li-->
<!--{% for %}-->
<!--<li @click="func({{forloop.index}})"></li>-->
<!--{% end for%}-->
<!--傳入事件對象-->
<p @click="func1($event)">{{ msg }}</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你是p',
m_c: 'red'
},
methods: {
func1: function (ev) {
console.log(ev);
// 數據點擊頁面的點擊點
console.log(ev.clientX);
console.log(ev.clientY);
},
func: function (txt) {
this.msg = txt
},
fn1: function () {
if (this.m_c == 'red') {
this.m_c = 'blue'
} else {
this.m_c = 'red'
}
},
fn2: function () {
this.msg = '鼠標懸浮了'
},
fn3: function () {
this.msg = '鼠標離開了'
},
fn4: function () {
this.msg = '鼠標按下了'
},
fn5: function () {
this.msg = '鼠標擡起了'
}
}
})
</script>
表單事件
<body>
<div id="app">
<!-- 指令：v-model="變量" -->
<form action="" method="get">
<!-- 1) 數據的雙向綁定 -->
<input type="text" v-model="msg" name="usr">
<input type="password" v-model="msg" name="pwd">
<!-- 2) 單選框: value必須設置初值，v-model變量值要與單選框的value值統一 -->
<p>
男:<input type="radio" name="sex" value="male" v-model="sex_val">
女:<input type="radio" name="sex" value="female" v-model="sex_val">
</p>
<!--3)單一複選框-->
<p>
<!-- v-model綁定的變量值與true-value|false-value統一 -->
<!-- true-value|false-value默認值爲 true | false -->
是否贊成條款:<input type="checkbox" name="agree" v-model="agree_val"
true-value="贊成" false-value="不一樣意">
</p>
<!-- 4) 多複選框 -->
<!-- v-model綁定的變量是存放多複選框value的數組(列表) -->
<p>
愛好:
<input type="checkbox" value="喜愛男的" name="cless" v-model='more_val' />
<input type="checkbox" value="喜愛女的" name="cless" v-model='more_val' />
<input type="checkbox" value="不挑" name="cless" v-model='more_val' />
</p>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '',
sex_val: 'female', // 默認value="female"的單選框被選中
agree_val: '不一樣意',
more_val: ['喜愛男的', '喜愛女的']
}
})
</script>
條件指令
<head>
<meta charset="UTF-8">
<title>文本指令</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: darkgray;
}
.pg1 { background-color: red; }
.pg2 { background-color: yellow; }
.pg3 { background-color: blue; }
</style>
</head>
<body>
<div id="app">
<!-- v-if與v-show的變量值都是bool，控制着顯隱 -->
<!-- v-if隱藏時標籤不被渲染，v-show隱藏時標籤渲染，用display:none來隱藏 -->
<!-- 特殊屬性key是vue在內存中創建緩存的標誌, 來優化渲染的效率 -->
<p v-if="is_if" key="my_if">v-if的顯示與隱藏</p>
<p v-show="is_show" key="my_show">v-show的顯示與隱藏</p>
<p>
<button @click="btn_click('pg1')">紅</button>
<button @click="btn_click('pg2')">黃</button>
<button @click="btn_click('pg3')">藍</button>
<div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div>
<div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div>
<div class="box pg3" v-else key="pg3"></div>
</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_if: true,
is_show: true,
pg: 'pg1'
},
methods: {
btn_click: function (pg_num) {
this.pg = pg_num
}
}
})
</script>
循環指令
<head>
<meta charset="UTF-8">
<title>文本指令</title>
<style>
p {
padding-left: 30px;
}
</style>
</head>
<body>
<div id="app">
<p>{{ array[1] }}</p>
<p>{{ person['age'] }}</p>
<div>循環array</div>
<p v-for="v in array">{{ v }}</p>
<div>帶索引循環array</div>
<p v-for="(v, i) in array">{{ v }}索引是{{ i }}</p>
<div>循環dict</div>
<p v-for="v in person">{{ v }}</p>
<div>帶key循環dict</div>
<p v-for="(v, k) in person">{{ v }}鍵是{{ k }}</p>
<div>帶key帶索引循環dict</div>
<p v-for="(v, k, i) in person">{{ v }}鍵是{{ k }}索引是{{ i }}</p>
<ul v-for="person in persons">
<!--{{ person }}-->
<li v-for="(v, k) in person">{{ k }}: {{ v }}</li>
</ul>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
array: ['iso', 'android', 'winPhone'],
person: {'name': 'Jobs', 'age': 88, 'gender': '男'},
persons: [
{'name': 'Jason', 'age': 58},
{'name': 'Jerry', 'age': 68},
{'name': 'Owen', 'age': 17},
]
}
})
</script>
前端array的操做
<script> arr = [1, 2, 3, 4, 5]; console.log(arr); // 從index開始日後操做length長度，替換爲args // arr.splice(index, length, args); // arr.splice(2, 3, 9, 9); // [1, 2, 9, 9] 替換 // arr.splice(2, 3); // [1, 2] 刪除 arr.splice(2, 0, 8); // [1, 2, 8, 3, 4, 5] 插入 console.log(arr); </script>
留言案例
<body>
<div id="app">
<input type="text" v-model="txt">
<button @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msg_arr" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
txt: '',
// msg_arr: ['初始留言1', '初始留言2']
msg_arr: []
},
methods: {
send_msg: function () {
// this.txt
// this.msg_arr
if (this.txt) {
this.msg_arr.push(this.txt);
this.txt = ''
}
},
delete_msg: function (index) {
this.msg_arr.splice(index, 1)
}
}
})
</script>
我的學習筆記：css
1.指令： 文本指令： 插值表達式屬於文本指令 v-text='變量' v-html='變量'，能解析html代碼語法 v-once：一次賦值終身不能改變,<p v-once>{{}}</p>，結合插值表達式來使用，變量值一旦被初始化賦值後就不會再改變 屬性指令：v-bind 寫在標籤後面的變量即爲屬性 1.自定義屬性綁定變量:<p v-bind:abc='a'></p> 2.title屬性，<p v-bind:title='鼠標懸浮的文本提示'></p> 3.class屬性，v-bind:能夠簡寫爲:,<p:class='myclass'></p> 另外一種寫法 :class='{x:y}',x是類名，y表示是否起做用，0爲不起做用，1爲起做用。{類名:類是否起做用}類是否起做用，寫的是變量，變量的值爲True或false，經過一個變量真假控制一個類名是否起做用 第三種寫法:[類名1,類名2,.....,類名n]，多類名，每個類名既能夠是字符串常量也能夠是變量 混用::class=[o,p,'111',{k,1}] 4.style屬性: :style='my_style',注意在css裏面的鏈接語法能夠換成小駝峯的語法， 方法(事件)指令 v-on:事件名='變量'，簡寫@事件名='變量' mouseover:鼠標懸浮 mouseleave:鼠標離開 mousedown:鼠標按下 mouseup:鼠標鬆開 事件須要參數時: 注意事件綁定 方法名()等價方法名。不會調用方法，而是做爲傳參的標誌 表單指令： v-model="變量" 數據的雙向綁定,綁定同一個值，改變一個，所有改變 單選框，必需要明確value，v-model只是指定默認值，value必須設置初值，v-model要與value的值統一 單一複選框:v-model值爲真選中，值爲假，不選中，若是value在true-value裏面爲真，在false-value爲假 多複選框:v-model的變量爲存放多複選框value的數組 條件指令 v-if ，v-else-if,v-else v-show v-if與v-show的變量值都是bool，控制着顯隱，v-if隱藏時標籤不會被渲染，v-show隱藏時標籤渲染，用display:none隱藏 key特殊屬性key是vue在內存中創建緩存的標誌，來優化渲染的效率 循環指令 v-for v-for='n in array' 帶索引循環v-for='(v,i) in array' 循環dict:優先循環出value 斗篷指令 2.組件: 局部組件，全局組件，父子組件間的交互
相關文章
- 1. vue-property-decorator使用指南
- 2. Vue使用指南(一)
- 3. vue-cli的使用指南
- 4. vue-cli 3.0使用指南
- 5. Vue使用指南(三)
- 6. Vue-CLI使用指南
- 7. Git submodule使用指南（二）
- 8. Webpack使用指南(二)
- 9. Watson使用指南（二）
- 10. Vue 初學指南 二
- 更多相關文章...
- • SQL 指南 - 網站建設指南
- • HTML 指南 - 網站建設指南
- • Composer 安裝與使用
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue-property-decorator使用指南
- 2. Vue使用指南(一)
- 3. vue-cli的使用指南
- 4. vue-cli 3.0使用指南
- 5. Vue使用指南(三)
- 6. Vue-CLI使用指南
- 7. Git submodule使用指南（二）
- 8. Webpack使用指南(二)
- 9. Watson使用指南（二）
- 10. Vue 初學指南 二