Vue模板语法(二)
样式绑定
class绑定
使用方式：v-bind:class="expression"
expression的类型：字符串、数组、对象
1.2 style绑定
v-bind:style="expression"
expression的类型：字符串、数组、对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>样式绑定</title> 6 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> 7 <style type="text/css"> 8 .a{ 9 color: red; 10 } 11 .b{ 12 color: aqua; 13 } 14 .c{ 15 font-size: 20px; 16 } 17 /*div{ 18 padding: 50px; 19 }*/ 20 </style> 21 </head> 22 <body> 23 <div id="app"> 24 <ul> 25 <li> 26 <h3>样式绑定</h3> 27 <span :class="Aclz">Hello vue</span> 28 <span :class="Bclz">Hello vue</span> 29 <span :class="Cclz">Hello vue Good</span> 30 </li> 31 </ul> 32 </div> 33 </body> 34 <script type="text/javascript"> 35 new Vue({ 36 el:'#app', 37 data:{ 38 Aclz:'a', 39 Bclz:'b', 40 Cclz:['b','c'], 41 } 42 }) 43 </script> 44 </html>
事件处理器
事件监听可以使用v-on 指令
事件修饰符
Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
Vue为最常用的按键提供了别名
<!-- 同上 -->
<input v-on:keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>样式绑定与事件处理</title> 6 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> 7 <style type="text/css"> 8 .a{ 9 color: red; 10 } 11 .b{ 12 color: aqua; 13 } 14 .c{ 15 font-size: 20px; 16 } 17 /* div{ 18 padding: 50px; 19 } */ 20 </style> 21 </head> 22 <body> 23 <div id="app"> 24 <ul> 25 <li> 26 <h3>样式绑定</h3> 27 <span :class="Aclz">Hello vue</span> 28 <span :class="Bclz">Hello vue</span> 29 <span :class="Cclz">Hello vue Good</span> 30 </li> 31 <li> 32 <h3>事件处理_阻止冒泡</h3> 33 <div style="background-color: #FF0000;width: 550px;height: 550px;" @click="a"> 34 <div style="background-color: #00FFFF;width: 450px;height: 450px;" @click="b"> 35 <div style="background-color: chartreuse;width: 350px;height: 350px;" @click="c"> 36 <div style="background-color: sandybrown;width: 250px;height: 250px;" @click="d"></div> 37 </div> 38 39 </div> 40 </div> 41 </li> 42 <li> 43 <h3>事件处理_事件只能点击一次</h3> 44 {{info}}<input type="text" v-model="msg" /> 45 <button @click="e">无限点击</button> 46 <button @click.once="e">点击一次</button> 47 </li> 48 <li> 49 <h3>按键修饰符</h3> 50 {{info}}<input type="text" v-model="msg" v-on:keyup="e"/> 51 <button @click="e">无限点击</button> 52 <button @click.once="e">点击一次</button> 53 </li> 54 <li> 55 <h3>select标签</h3> 56 <select name="hobby" v-model="selectIds"> 57 <option v-for="d in datas" :value="d.id">{{d.name}}</option> 58 </select><br /> 59 选中的值：{{selectIds}} 60 </li> 61 <li> 62 <h3>复选框标签</h3> 63 <div v-for="d in datas"> 64 <input type="checkbox" :value="d.id" name="likes" v-model="selectArr"/>{{d.name}} 65 </div> 66 选中的值：{{selectArr}} 67 68 </li> 69 </ul> 70 </div> 71 </body> 72 <script type="text/javascript"> 73 new Vue({ 74 el:'#app', 75 data:{ 76 Aclz:'a', 77 Bclz:'b', 78 Cclz:['b','c'], 79 msg:'', 80 info:'', 81 datas:[{ 82 id:1, 83 name:'狼' 84 }, 85 { 86 id:2, 87 name:'哈士奇' 88 }, 89 { 90 id:3, 91 name:'家狗' 92 }], 93 selectIds:'', 94 selectArr:[], 95 }, 96 methods:{ 97 a(){ 98 alert('A触发'); 99 alert(this.selectIds) 100 }, 101 b(){ 102 alert('B触发'); 103 }, 104 c(){ 105 alert('C触发'); 106 }, 107 d(){ 108 alert('D触发'); 109 }, 110 e(){ 111 this.info = this.msg; 112 this.msg = ''; 113 }, 114 e(){ 115 this.info = this.msg; 116 this.msg = ''; 117 } 118 } 119 120 }) 121 </script> 122 </html>
vue表单
用v-model指令在表单控件元素上创建双向数据绑定
常用控件
文本框/密码框/文本域/隐藏域
单选复选框/多选复选框
单选按钮
下拉框
修饰符
.lazy
默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步
.number
将用户的输入值转为 Number 类型
.trim
自动过滤用户输入的首尾空格
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> 6 <title>表单</title> 7 </head> 8 <body> 9 <div id="app"> 10 <h1>标题</h1> 11 <ul> 12 <li> 13 <p>vue表单</p> 14 <label>姓名：</label><input v-model="uname" /><br /> 15 <label>密码：</label><input v-model="upwd" type="password" /><br /> 16 <!-- 将用户的输入值转为 Number 类型 --> 17 <label>年龄：</label><input v-model.number="age" /><br /> 18 <label>性别：</label> 19 <input type="radio" v-model="sex" name="sex" value="1" />男 20 <input type="radio" v-model="sex" name="sex" value="0" />女<br /> 21 <label>爱好：</label> 22 <div v-for="h in hobby"> 23 <input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}} 24 </div> 25 <label>类别：</label> 26 <select v-model="type"> 27 <option value="-1">===请选择===</option> 28 <option v-for="t in types" v-bind:value="t.id">{{t.name}}</option> 29 </select><br /> 30 <label>备注：</label> 31 <textarea v-bind:value="mark"></textarea><br /> 32 确认<input type="checkbox" v-model="flag" /> 33 <input type="submit" v-bind:disabled="show" v-on:click="doSubmit" /> 34 </li> 35 </ul> 36 </div> 37 </body> 38 <script type="text/javascript"> 39 new Vue({ 40 el: '#app', 41 data() { 42 return { 43 uname: null, 44 upwd: null, 45 age: 10, 46 sex: 1, 47 hobby: [{ 48 id: 1, 49 name: '篮球' 50 }, { 51 id: 2, 52 name: '足球' 53 }, { 54 id: 3, 55 name: '象棋' 56 }], 57 hobbies: [], 58 types: [{ 59 id: 1, 60 name: 'A' 61 }, { 62 id: 2, 63 name: 'B' 64 }, { 65 id: 3, 66 name: 'C' 67 }], 68 type: null, 69 mark: '学生备注', 70 flag: false 71 } 72 }, 73 computed: { 74 show: function() { 75 return !this.flag; 76 } 77 }, 78 methods: { 79 doSubmit: function() { 80 console.log('doSubmit') 81 var obj = { 82 uname: this.uname, 83 upwd: this.upwd, 84 age:this.age+10, 85 sex: this.sex, 86 hobbies:this.hobbies, 87 type: this.type, 88 mark: this.mark, 89 } 90 console.log(obj); 91 } 92 } 93 94 }) 95 </script> 96 </html>
vue组件
组件简介
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
全局和局部组件
全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})
注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
props
props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"
监听事件：$on(eventName)
触发事件：$emit(eventName)
Vue自定义事件是为组件间通信设计
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
父Vue实例->Vue实例，通过prop传递数据
子Vue实例->父Vue实例，通过事件传递数据
事件名
不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
建议使用“短横线分隔命名”，例如：three-click
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>组件</title> 6 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <ul> 11 <li> 12 <h3>局部组件的注册</h3> 13 <!-- 侵入式 --> 14 <my-button></my-button> 15 <!-- <button @click="doSubmit">被点击了N次</button> --> 16 </li> 17 <li> 18 <h3>全局组件的注册</h3> 19 <my-button2></my-button2> 20 </li> 21 <li> 22 <h3>组件的通信(父传子)</h3> 23 <my-button m='张三'></my-button> 24 </li> 25 <li> 26 <h3>组件的通信(子传父)</h3> 27 <my-button m='张三' @three-clik='xxx'></my-button> 28 </li> 29 </ul> 30 </div> 31 </body> 32 <script type="text/javascript"> 33 Vue.component('my-button2',{ 34 template:'<button v-on: @click="doSubmit">被点击了{{n}}次</button>', 35 data(){ 36 return { 37 n:0, 38 39 } 40 }, 41 methods:{ 42 doSubmit(){ 43 this.n+=1; 44 } 45 } 46 }) 47 new Vue({ 48 el:'#app', 49 data(){ 50 return { 51 52 } 53 }, 54 components:{ 55 'my-button':{ 56 props:['m'], 57 template:'<button v-on: @click="doSubmit">被{{m}}点击了{{n}}次</button>', 58 data(){ 59 return { 60 n:0, 61 fold:'折叠效果' 62 } 63 }, 64 methods:{ 65 doSubmit(){ 66 this.n+=1; 67 /* 注册一个事件,让外部调用,然后随便接受内部的值 */ 68 if(this.n % 3 == 0){ 69 this.$emit('three-clik',this.fold); 70 } 71 } 72 } 73 } 74 }, 75 methods:{ 76 xxx(v){ 77 alert(v); 78 79 } 80 } 81 }) 82 </script> 83 </html>