vue指令：watch，computed，v-on，render，@click，@keydown，template【詩(shī)書(shū)畫(huà)唱】
目錄：
例子1：創(chuàng)建一個(gè)頁(yè)面，有兩個(gè)輸入框，一個(gè)商品價(jià)格，一個(gè)斤數(shù)，請(qǐng)通過(guò)watch屬性實(shí)現(xiàn)輸入價(jià)格或者斤數(shù)都能夠進(jìn)行計(jì)算的功能。
例子2：使用computed對(duì)輸入的身份證號(hào)碼進(jìn)行生日的提取。
例子3：使用render自定義一個(gè)表格標(biāo)簽<mypro>，顯示科目成績(jī)，表格數(shù)據(jù)就是全局變量。
代碼學(xué)習(xí)：
computed屬性.html
methods屬性.html
用@click="add($event,1);"的形式綁定點(diǎn)擊事件，methods里面寫(xiě)點(diǎn)擊事件時(shí)會(huì)被觸發(fā)的函數(shù)
render屬性.html
個(gè)人理解：render其實(shí)很好理解，就是渲染組件，render里面還可以設(shè)置style（這里說(shuō)的設(shè)置style，也就是js中設(shè)置CSS樣式的規(guī)律：比如backgroundColor，之類(lèi)的駝峰命名法會(huì)常常見(jiàn)到的規(guī)律）
template屬性的用法.html
//template是es6中的模板字符串，所以使用的是`引起來(lái)的
//template中間的元素最外層必須只有一個(gè)根元素
template: `<h1>{{message}}</h1>`
template屬性的用法（二）.html
v-on指令.html
//將ascii碼為117的鍵取名為f6鍵：
Vue.config.keyCodes.f6 = 117;
@keydown.f6="sayHi();" 表示按鍵盤(pán)中的F6，就會(huì)調(diào)用sayHi();這個(gè)方法
watch屬性.html
單選框和多選框的v-model.html
單選框和多選框的設(shè)置.html
render
template
ascii碼
鍵盤(pán)各鍵對(duì)應(yīng)的ASCII碼值(包括鼠標(biāo)和鍵盤(pán)所有的鍵)
vue項(xiàng)目中，一般要修改的數(shù)據(jù)的話，都是寫(xiě)在data中的。
例子1：創(chuàng)建一個(gè)頁(yè)面，有兩個(gè)輸入框，一個(gè)商品價(jià)格，一個(gè)斤數(shù)，請(qǐng)通過(guò)watch屬性實(shí)現(xiàn)輸入價(jià)格或者斤數(shù)都能夠進(jìn)行計(jì)算的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<h1>*假定本豬肉的單價(jià)為1斤66元</h1>
<p>顧客要買(mǎi)的斤數(shù)：<input type="text" v-model="caoZuo2" />斤</p>
<p>商品價(jià)格（總價(jià)格）：<input type="text" v-model="caoZuo1" />元</p>
</div>
<script>
new Vue({
el: '#app',
data: {
caoZuo1: 0,
caoZuo2: 0
},
watch: {
caoZuo1: function(val){
this.caoZuo1 = val;
this.caoZuo2 = val /66;
},
caoZuo2: {
handler: function(val){
this.caoZuo2 = val;
this.caoZuo1 = val *66;
}
}
}
});
</script>
</body>
</html>
例子2：使用computed對(duì)輸入的身份證號(hào)碼進(jìn)行生日的提取。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<input type=""? ?placeholder="請(qǐng)輸入你的身份證號(hào)碼" v-model="shuRu"/>
<p>對(duì)輸入的身份證號(hào)碼進(jìn)行生日的提取的結(jié)果:{{result}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
shuRu: '366666200006065666'
},
computed: {
result: function(){
return parseInt(this.shuRu.substring(6,10))+"年"
+parseInt(this.shuRu.substring(10,12))+"月"
+parseInt(this.shuRu.substring(12,14))+"日";
}
}
});
</script>
</body>
</html>
例子3：使用render自定義一個(gè)表格標(biāo)簽<mypro>，顯示科目成績(jī)，表格數(shù)據(jù)就是全局變量。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<mypro></mypro>
</div>
<script>
let studentArray = [{name:'詩(shī)書(shū)畫(huà)唱1',subject:'男',score:98},
{name:'詩(shī)書(shū)畫(huà)唱2',subject:'男',score:99},
{name:'詩(shī)書(shū)畫(huà)唱3',subject:'男',score:100}];
let html = `<tr><th>姓名</th><th>科目</th><th>成績(jī)</th></tr>`;
?
? ? ? ?studentArray.map(o=>{
? ? ? ? ? ? ? ? html += `<tr> <td> ${o.name}</td><td>${o.subject}</td><td>${o.score}</td></tr>`;
? ? ? ? ? ? ? ? })
console.log(html)
Vue.component('mypro',{
render: function(createElement){
let d = createElement('table',{
style: {
backgroundColor: 'gray'
},
attrs: {
border: "1px"
},
domProps: {
innerHTML:html
}
});
return d;
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
代碼學(xué)習(xí)：
computed屬性.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<p>未反轉(zhuǎn)前的字符串：{{str}}</p>
<p>methods屬性中的方法反轉(zhuǎn):{{resStr()}}</p>
<p>methods屬性中的方法反轉(zhuǎn):{{resStr()}}</p>
<p>computed屬性中的方法反轉(zhuǎn):{{reverseStr}}</p>
<p>computed屬性中的方法反轉(zhuǎn):{{reverseStr}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
str: 'abcdefg'
},
methods: {
resStr: function(){//將字符串反轉(zhuǎn)
console.log('methods');
return this.str.split('').reverse().join('');
}
},
computed: {
reverseStr: function(){//將字符串反轉(zhuǎn)
console.log('computed');
return this.str.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
methods屬性.html
用@click="add($event,1);"的形式綁定點(diǎn)擊事件，methods里面寫(xiě)點(diǎn)擊事件時(shí)會(huì)被觸發(fā)的函數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<h1>{{num}}</h1>
<p><button @click="add($event,1);">點(diǎn)擊增加</button></p>
</div>
<script>
new Vue({
el: '#app',
data: {
num: 0
},
methods: {
add: function(e,n){
if(!isNaN(n)) {
this.num += n;
}
//通過(guò)$event來(lái)傳入事件對(duì)象
console.log(e.target.tagName);
}
}
});
</script>
</body>
</html>
render屬性.html
個(gè)人理解：render其實(shí)很好理解，就是渲染組件，render里面還可以設(shè)置style（這里說(shuō)的設(shè)置style，也就是js中設(shè)置CSS樣式的規(guī)律：比如backgroundColor，之類(lèi)的駝峰命名法會(huì)常常見(jiàn)到的規(guī)律）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<my-elem></my-elem>
</div>
<script>
//定義了一個(gè)myElem的組件
Vue.component('myElem',{
render: function(createElement){
let d = createElement('div',{
style: {//設(shè)置div的樣式
backgroundColor: 'pink'
},
attrs: {//設(shè)置div的屬性
id: 'mydiv'
},
domProps: {//設(shè)置dom屬性
innerHTML:'<h1>Hello world</h1>'
}
});
return d;
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
template屬性的用法.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app"></div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello world!'
},
//template是es6中的模板字符串，所以使用的是`引起來(lái)的
//template中間的元素最外層必須只有一個(gè)根元素
template: `<h1>{{message}}</h1>`
});
</script>
</body>
</html>
template屬性的用法（二）.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<mytag />
</div>
<script type="text/x-template" id="mt">
<div>模板演示</div>
</script>
<script>
//定義一個(gè)名為mytag的組件
Vue.component('mytag',{
template: '#mt'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
v-on指令.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<!--<input v-bind:type="tp" value="測(cè)試"?
v-on:click="sayHi();" />-->
? ? <!-- v-bind指令和v-on指令都有簡(jiǎn)寫(xiě)的方式 -->
? ? <input :type="tp" value="測(cè)試"
? ? @click="sayHi();" />
? ? <input type="text" @keydown.f6="sayHi();" />
</div>
<script>
//將ascii碼為117的鍵取名為f6鍵
Vue.config.keyCodes.f6 = 117;
const v = new Vue({
el: '#app',
data: {
msg: 'Hello world',
name: '張三',
tp: 'button'
},
methods: {
sayHi: function(){
//this指向了當(dāng)前創(chuàng)建出來(lái)的vue對(duì)象
//通過(guò)this可以直接訪問(wèn)到data屬性中定義的屬性
console.log(this.msg + this.name);
}
}
});
//直接調(diào)用methods中的函數(shù)
v.sayHi();
</script>
</body>
</html>
//將ascii碼為117的鍵取名為f6鍵：
Vue.config.keyCodes.f6 = 117;
@keydown.f6="sayHi();" 表示按鍵盤(pán)中的F6，就會(huì)調(diào)用sayHi();這個(gè)方法
watch屬性.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<p>千米：<input type="text" v-model="km" /></p>
<p>米：<input type="text" v-model="m" /></p>
<p>全名：{{fullName}}</p>
<p>姓：<input type="text" v-model="firstName"/></p>
</div>
<script>
new Vue({
el: '#app',
data: {
km: 0,
m: 0,
fullName: '戴維金',
firstName: '羅',
lastName: '語(yǔ)'
},
watch: {
km: function(val){//我要監(jiān)視data中的km屬性的值
this.km = val;
this.m = val * 1000;
},
m: {
handler: function(val){
this.m = val;
this.km = val / 1000.0;
}
},
firstName: {
handler: function(newName,oldName){//當(dāng)firstName屬性發(fā)生變化時(shí)進(jìn)行的處理
//console.log(oldName);
this.fullName = newName + ' ' + this.lastName;
},
//immediate設(shè)置為true時(shí)，只要頁(yè)面一打開(kāi)，就會(huì)馬上執(zhí)行handler函數(shù)
immediate: true
}
}
});
</script>
</body>
</html>
單選框和多選框的v-model.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<input type="radio" name="sexs" value="f" v-model="sex" />男
<input type="radio" name="sexs" value="m" v-model="sex" />女
<input type="checkbox" name="hbs" value="1" v-model="arr" />唱歌
<input type="checkbox" name="hbs" value="2" v-model="arr" />跳舞
<input type="checkbox" name="hbs" value="3" v-model="arr" />閱讀
<input type="checkbox" name="hbs" value="4" v-model="arr" />打游戲
</div>
<script>
new Vue({
el:'#app',
data:{
sex:'f',
arr:[1,3,4]
}
});
</script>
</body>
</html>
單選框和多選框的設(shè)置.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<input type="radio" value="m" v-model="sex" />男
<input type="radio" value="f" v-model="sex" />女
<input type="checkbox" value="0" v-model="hbs" />唱歌
<input type="checkbox" value="1" v-model="hbs" />街舞
<input type="checkbox" value="2" v-model="hbs" />吉他
<input type="checkbox" value="3" v-model="hbs" />游泳
</div>
<script>
new Vue({
el: '#app',
data: {
sex: 'm',
hbs: [0,1,3]
}
});
</script>
</body>
</html>
render
template
computed
ascii碼
ASCII是基于拉丁字母的一套電腦編碼系統(tǒng)。它主要用于顯示現(xiàn)代英語(yǔ)，而其擴(kuò)展版本延伸美國(guó)標(biāo)準(zhǔn)信息交換碼則可以部分支持其他西歐語(yǔ)言，并等同于國(guó)際標(biāo)準(zhǔn)ISO/IEC 646。
鍵盤(pán)各鍵對(duì)應(yīng)的ASCII碼值(包括鼠標(biāo)和鍵盤(pán)所有的鍵)
ESC鍵? VK_ESCAPE (27)
回車(chē)鍵： VK_RETURN (13)
TAB鍵：? VK_TAB (9)
Caps Lock鍵： VK_CAPITAL (20)
Shift鍵： VK_SHIFT ($10)
Ctrl鍵： VK_CONTROL (17)
Alt鍵：? VK_MENU (18)
空格鍵： VK_SPACE ($20/32)
退格鍵： VK_BACK (8)
左徽標(biāo)鍵： VK_LWIN (91)
右徽標(biāo)鍵： VK_LWIN (92)
鼠標(biāo)右鍵快捷鍵：VK_APPS (93)
------------------------------------
Insert鍵： VK_INSERT (45)
Home鍵： VK_HOME (36)
Page Up： VK_PRIOR (33)
PageDown： VK_NEXT (34)
End鍵：? VK_END (35)
Delete鍵： VK_DELETE (46)
方向鍵(←)： VK_LEFT (37)
方向鍵(↑)： VK_UP (38)
方向鍵(→)： VK_RIGHT (39)
方向鍵(↓)： VK_DOWN (40)
-----------------------------------
F1鍵：? VK_F1 (112)
F2鍵：? VK_F2 (113)
F3鍵：? VK_F3 (114)
F4鍵：? VK_F4 (115)
F5鍵：? VK_F5 (116)
F6鍵：? VK_F6 (117)
F7鍵：? VK_F7 (118)
F8鍵：? VK_F8 (119)
F9鍵：? VK_F9 (120)
F10鍵： VK_F10 (121)
F11鍵： VK_F11 (122)
F12鍵： VK_F12 (123)
---------------------------------
Num Lock鍵： VK_NUMLOCK (144)
小鍵盤(pán)0： VK_NUMPAD0 (96)
小鍵盤(pán)1： VK_NUMPAD0 (97)
小鍵盤(pán)2： VK_NUMPAD0 (98)
小鍵盤(pán)3： VK_NUMPAD0 (99)
小鍵盤(pán)4： VK_NUMPAD0 (100)
小鍵盤(pán)5： VK_NUMPAD0 (101)
小鍵盤(pán)6： VK_NUMPAD0 (102)
小鍵盤(pán)7： VK_NUMPAD0 (103)
小鍵盤(pán)8： VK_NUMPAD0 (104)
小鍵盤(pán)9： VK_NUMPAD0 (105)
小鍵盤(pán).： VK_DECIMAL (110)
小鍵盤(pán)*： VK_MULTIPLY (106)
小鍵盤(pán)+： VK_MULTIPLY (107)
小鍵盤(pán)-： VK_SUBTRACT (109)
小鍵盤(pán)/： VK_DIVIDE (111)
Pause Break鍵： VK_PAUSE (19)
Scroll Lock鍵： VK_SCROLL (145)
-------------------------------------
0x1 鼠標(biāo)左鍵
0x2 鼠標(biāo)右鍵
0x3 CANCEL 鍵
0x4 鼠標(biāo)中鍵
0x8 BACKSPACE 鍵
0x9 TAB 鍵
0xC CLEAR 鍵
0xD ENTER 鍵
0x10 SHIFT 鍵
0x11 CTRL 鍵
0x12 MENU 鍵
0x13 PAUSE 鍵
0x14 CAPS LOCK 鍵
0x1B ESC 鍵
0x20 SPACEBAR 鍵
0x21 PAGE UP 鍵
0x22 PAGE DOWN 鍵
0x23 END 鍵
0x24 HOME 鍵
0x25 LEFT ARROW 鍵
0x26 UP ARROW 鍵
0x27 RIGHT ARROW 鍵
0x28 DOWN ARROW 鍵
0x29 SELECT 鍵
0x2A PRINT SCREEN 鍵
0x2B EXECUTE 鍵
0x2C SNAPSHOT 鍵
0x2D INSERT 鍵
0x2E DELETE 鍵
0x2F HELP 鍵
0x90 NUM LOCK 鍵
-----------------------------------------
A 至 Z 鍵與 A – Z 字母的 ASCII 碼相同：
值 描述
65 A 鍵
66 B 鍵
67 C 鍵
68 D 鍵
69 E 鍵
70 F 鍵
71 G 鍵
72 H 鍵
73 I 鍵
74 J 鍵
75 K 鍵
76 L 鍵
77 M 鍵
78 N 鍵
79 O 鍵
80 P 鍵
81 Q 鍵
82 R 鍵
83 S 鍵
84 T 鍵
85 U 鍵
86 V 鍵
87 W 鍵
88 X 鍵
89 Y 鍵
90 Z 鍵
------------------------------------------
0 至 9 鍵與數(shù)字 0 – 9 的 ASCII 碼相同：
值 描述
48 0 鍵
49 1 鍵
50 2 鍵
51 3 鍵
52 4 鍵
53 5 鍵
54 6 鍵
55 7 鍵
56 8 鍵
57 9 鍵
----------------------------------------
下列常數(shù)代表數(shù)字鍵盤(pán)上的鍵：
值? ? 描述
0x60 0 鍵
0x61 1 鍵
0x62 2 鍵
0x63 3 鍵
0x64 4 鍵
0x65 5 鍵
0x66 6 鍵
0x67 7 鍵
0x68 8 鍵
0x69 9 鍵
0x6A MULTIPLICATION SIGN (*) 鍵
0x6B PLUS SIGN (+) 鍵
0x6C ENTER 鍵
0x6D MINUS SIGN (–) 鍵
0x6E DECIMAL POINT (.) 鍵
0x6F DIVISION SIGN (/) 鍵
----------------------------------------------
下列常數(shù)代表功能鍵：
值? ? ?描述
0x70 F1 鍵
0x71 F2 鍵
0x72 F3 鍵
0x73 F4 鍵
0x74 F5 鍵
0x75 F6 鍵
0x76 F7 鍵
0x77 F8 鍵
0x78 F9 鍵
0x79 F10 鍵
0x7A F11 鍵
0x7B F12 鍵
0x7C F13 鍵
0x7D F14 鍵
0x7E F15 鍵
0x7F F16 鍵
-------------------------------------------------
