vue指令:watch,computed,v-on,render,@click,@keydown,template【诗书画唱】

目录:
例子1:创建一个页面,有两个输入框,一个商品价格,一个斤数,请通过watch属性实现输入价格或者斤数都能够进行计算的功能。
例子2:使用computed对输入的身份证号码进行生日的提取。
例子3:使用render自定义一个表格标签<mypro>,显示科目成绩,表格数据就是全局变量。
代码学习:
computed属性.html
methods属性.html
用@click="add($event,1);"的形式绑定点击事件,methods里面写点击事件时会被触发的函数
render属性.html
个人理解:render其实很好理解,就是渲染组件,render里面还可以设置style(这里说的设置style,也就是js中设置CSS样式的规律:比如backgroundColor,之类的驼峰命名法会常常见到的规律)
template属性的用法.html
//template是es6中的模板字符串,所以使用的是`引起来的
//template中间的元素最外层必须只有一个根元素
template: `<h1>{{message}}</h1>`
template属性的用法(二).html
v-on指令.html
//将ascii码为117的键取名为f6键:
Vue.config.keyCodes.f6 = 117;
@keydown.f6="sayHi();" 表示按键盘中的F6,就会调用sayHi();这个方法
watch属性.html
单选框和多选框的v-model.html
单选框和多选框的设置.html
render
template
ascii码
键盘各键对应的ASCII码值(包括鼠标和键盘所有的键)

vue项目中,一般要修改的数据的话,都是写在data中的。
例子1:创建一个页面,有两个输入框,一个商品价格,一个斤数,请通过watch属性实现输入价格或者斤数都能够进行计算的功能。

<!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>*假定本猪肉的单价为1斤66元</h1>
<p>顾客要买的斤数:<input type="text" v-model="caoZuo2" />斤</p>
<p>商品价格(总价格):<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对输入的身份证号码进行生日的提取。

<!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="请输入你的身份证号码" v-model="shuRu"/>
<p>对输入的身份证号码进行生日的提取的结果:{{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自定义一个表格标签<mypro>,显示科目成绩,表格数据就是全局变量。

<!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:'诗书画唱1',subject:'男',score:98},
{name:'诗书画唱2',subject:'男',score:99},
{name:'诗书画唱3',subject:'男',score:100}];
let html = `<tr><th>姓名</th><th>科目</th><th>成绩</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>


代码学习:
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>未反转前的字符串:{{str}}</p>
<p>methods属性中的方法反转:{{resStr()}}</p>
<p>methods属性中的方法反转:{{resStr()}}</p>
<p>computed属性中的方法反转:{{reverseStr}}</p>
<p>computed属性中的方法反转:{{reverseStr}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
str: 'abcdefg'
},
methods: {
resStr: function(){//将字符串反转
console.log('methods');
return this.str.split('').reverse().join('');
}
},
computed: {
reverseStr: function(){//将字符串反转
console.log('computed');
return this.str.split('').reverse().join('');
}
}
});
</script>
</body>
</html>


methods属性.html
用@click="add($event,1);"的形式绑定点击事件,methods里面写点击事件时会被触发的函数

<!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);">点击增加</button></p>
</div>
<script>
new Vue({
el: '#app',
data: {
num: 0
},
methods: {
add: function(e,n){
if(!isNaN(n)) {
this.num += n;
}
//通过$event来传入事件对象
console.log(e.target.tagName);
}
}
});
</script>
</body>
</html>


render属性.html
个人理解:render其实很好理解,就是渲染组件,render里面还可以设置style(这里说的设置style,也就是js中设置CSS样式的规律:比如backgroundColor,之类的驼峰命名法会常常见到的规律)

<!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>
//定义了一个myElem的组件
Vue.component('myElem',{
render: function(createElement){
let d = createElement('div',{
style: {//设置div的样式
backgroundColor: 'pink'
},
attrs: {//设置div的属性
id: 'mydiv'
},
domProps: {//设置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中的模板字符串,所以使用的是`引起来的
//template中间的元素最外层必须只有一个根元素
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>
//定义一个名为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="测试"
v-on:click="sayHi();" />-->
<!-- v-bind指令和v-on指令都有简写的方式 -->
<input :type="tp" value="测试"
@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指向了当前创建出来的vue对象
//通过this可以直接访问到data属性中定义的属性
console.log(this.msg + this.name);
}
}
});
//直接调用methods中的函数
v.sayHi();
</script>
</body>
</html>



//将ascii码为117的键取名为f6键:
Vue.config.keyCodes.f6 = 117;
@keydown.f6="sayHi();" 表示按键盘中的F6,就会调用sayHi();这个方法
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: '语'
},
watch: {
km: function(val){//我要监视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){//当firstName属性发生变化时进行的处理
//console.log(oldName);
this.fullName = newName + ' ' + this.lastName;
},
//immediate设置为true时,只要页面一打开,就会马上执行handler函数
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>



单选框和多选框的设置.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是基于拉丁字母的一套电脑编码系统。它主要用于显示现代英语,而其扩展版本延伸美国标准信息交换码则可以部分支持其他西欧语言,并等同于国际标准ISO/IEC 646。
键盘各键对应的ASCII码值(包括鼠标和键盘所有的键)
ESC键 VK_ESCAPE (27)
回车键: 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)
左徽标键: VK_LWIN (91)
右徽标键: VK_LWIN (92)
鼠标右键快捷键: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)
小键盘0: VK_NUMPAD0 (96)
小键盘1: VK_NUMPAD0 (97)
小键盘2: VK_NUMPAD0 (98)
小键盘3: VK_NUMPAD0 (99)
小键盘4: VK_NUMPAD0 (100)
小键盘5: VK_NUMPAD0 (101)
小键盘6: VK_NUMPAD0 (102)
小键盘7: VK_NUMPAD0 (103)
小键盘8: VK_NUMPAD0 (104)
小键盘9: VK_NUMPAD0 (105)
小键盘.: VK_DECIMAL (110)
小键盘*: VK_MULTIPLY (106)
小键盘+: VK_MULTIPLY (107)
小键盘-: VK_SUBTRACT (109)
小键盘/: VK_DIVIDE (111)
Pause Break键: VK_PAUSE (19)
Scroll Lock键: VK_SCROLL (145)
-------------------------------------
0x1 鼠标左键
0x2 鼠标右键
0x3 CANCEL 键
0x4 鼠标中键
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 键与数字 0 – 9 的 ASCII 码相同:
值 描述
48 0 键
49 1 键
50 2 键
51 3 键
52 4 键
53 5 键
54 6 键
55 7 键
56 8 键
57 9 键
----------------------------------------
下列常数代表数字键盘上的键:
值 描述
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 (/) 键
----------------------------------------------
下列常数代表功能键:
值 描述
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 键
-------------------------------------------------