一:样式绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <style> .f200{ font-size: 200px; } </style> </head> <body> <!-- 定义边界 --> <div id="app"> <h3 :class="f200" v-bind:style="color">{{msg}}</h3> </div> </body> <script type="text/javascript"> /* 绑定边界 */ new Vue({ el:'#app', // 方式一 data() { return{msg:'我是良好公民', color:'color: red;', f200:'f200' }; } }) </script> </html>
结果展示:
注意:这里属性变量不能用中华线 例:color-red
二:事件处理器
1.冒泡事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <style> .red{ width: 400px; height: 400px; background-color: red; } .orange{ width: 300px; height: 300px; background-color: orange; } .blue{ width: 200px; height: 200px; background-color: blue; } .black{ width: 100px; height: 100px; background-color: black; } </style> </head> <body> <!-- 定义边界 --> <div id="app"> <p>冒泡事件</p> <div class="red" @click="red"> <div class="orange" @click="orange"> <div class="blue" @click="blue"> <div class="black" @click="blacke"></div> </div> </div> </div> </div> </body> <script type="text/javascript"> /* 绑定边界 */ new Vue({ el:'#app', // 方式一 data() { return{msg:'我是良好公民', f200:'f200' }; }, methods:{ red(){ alert("red") },orange(){ alert("orange") },blue(){ alert("blue") },black(){ alert("black") } } }) </script> </html>
结果展示:
当点击红色区域的时候
当点击黄色区域的时候
由此可知:
点击蓝色的时候提示框显示的是blue、orange、red
点击黑色的时候提示框显示的是black、blue、orange、red
这样显示的一个缺陷:当我们只需要他显示自己的提示框时,它无法满足
这个时候就需要.stop这个方法
这个时候点击黑色部分就只弹出一个提示框
once事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <style> .red{ width: 400px; height: 400px; background-color: red; } .orange{ width: 300px; height: 300px; background-color: orange; } .blue{ width: 200px; height: 200px; background-color: blue; } .black{ width: 100px; height: 100px; background-color: black; } </style> </head> <body> <!-- 定义边界 --> <div id="app"> <p>冒泡事件</p> <div class="red" @click="red"> <div class="orange" @click="orange"> <div class="blue" @click="blue"> <div class="black" @click.stop="black"></div> </div> </div> </div> <p>提交</p> <button v-on:click="dosub">正常提交</button> <button @click.once="dosub">加了once事件提交</button> </div> </body> <script type="text/javascript"> /* 绑定边界 */ new Vue({ el:'#app', // 方式一 data() { return{msg:'我是良好公民', f200:'f200' }; }, methods:{ red(){ alert("red"); }, orange(){ alert("orange"); }, blue(){ alert("blue"); }, black(){ alert("black"); }, dosub(){ alert("提交"); }, } }) </script> </html>
结果展示:
点击正常提交,可以点击很多次
点击加了once事件的提交点击了一次后提示框就只能出来一次
按键修饰符
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <style> .red{ width: 400px; height: 400px; background-color: red; } .orange{ width: 300px; height: 300px; background-color: orange; } .blue{ width: 200px; height: 200px; background-color: blue; } .black{ width: 100px; height: 100px; background-color: black; } </style> </head> <body> <!-- 定义边界 --> <div id="app"> <p>冒泡事件</p> <div class="red" @click="red"> <div class="orange" @click="orange"> <div class="blue" @click="blue"> <div class="black" @click.stop="black"></div> </div> </div> </div> <p>提交</p> <button v-on:click="dosub">正常提交</button> <button @click.once="dosub">加了once事件提交</button> <p>按键修饰符</p> <!-- 鼠标移入则调用dosub方法 --> <input @click="dosub" /> <!-- 点击回车键调用dosub方法 --> <input v-on:keyup.enter="dosub" /> </div> </body> <script type="text/javascript"> /* 绑定边界 */ new Vue({ el:'#app', // 方式一 data() { return{msg:'我是良好公民', f200:'f200' }; }, methods:{ red(){ alert("red"); }, orange(){ alert("orange"); }, blue(){ alert("blue"); }, black(){ alert("black"); }, dosub(){ alert("提交"); }, } }) </script> </html>
三:vue表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>表单</title> </head> <body> <div id="app"> <h1>标题</h1> <ul> <li> <p>vue表单</p> <label>姓名:</label><input v-model="uname" /><br /> <label>密码:</label><input v-model="upwd" type="password" /><br /> <!-- 将用户的输入值转为 Number 类型 --> <label>年龄:</label><input v-model.number="age" /><br /> <label>性别:</label> <input type="radio" v-model="sex" name="sex" value="1" />男 <input type="radio" v-model="sex" name="sex" value="0" />女<br /> <label>爱好:</label> <div v-for="h in hobby"> <input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}} </div> <label>类别:</label> <select v-model="type"> <option value="-1">===请选择===</option> <option v-for="t in types" v-bind:value="t.id">{{t.name}}</option> </select><br /> <label>备注:</label> <textarea v-bind:value="mark"></textarea><br /> 确认<input type="checkbox" v-model="flag" /> <input type="submit" v-bind:disabled="show" v-on:click="doSubmit" /> </li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data() { return { uname: null, upwd: null, age: 10, sex: 1, hobby: [{ id: 1, name: '篮球' }, { id: 2, name: '足球' }, { id: 3, name: '象棋' }], hobbies: [], types: [{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' }], type: null, mark: '学生备注', flag: false } }, computed: { show: function() { return !this.flag; } }, methods: { doSubmit: function() { console.log('doSubmit') var obj = { uname: this.uname, upwd: this.upwd, age:this.age+10, sex: this.sex, hobbies:this.hobbies, type: this.type, mark: this.mark, } console.log(obj); } } }) </script> </html>
重点在确认提交那
分析:当复选框没有被勾选的时候“flag”为false,则show为true则隐藏
四:自定义组件
介绍:
1.组件(Component)是Vue最强大的功能之一
2.组件可以扩展HTML元素,封装可重用的代码
3.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 界面都可以抽象为一个组件树全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})注意:自定义组件的命名不能使用驼峰命名法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <!-- 定义边界 --> <div id="app"> <!-- 需求:当引用一个my-Button,也页面上一个独特标记按钮 --> <my-Button m="张三"></my-button> </div> </body> <script type="text/javascript"> Vue.component("my-button",{ // props是定义组件中的变量的 props:['m'], // template代表了自定义组件在页面上显示的内容 template:'<button v-on:click="incrn">我***{{m}}你个***了{{n}}次</button>', data:function(){ return{ n:1 } }, methods:{ incrn(){ this.n++; } } }) /* 绑定边界 */ new Vue({ el:'#app', // 方式一 data() { return{ f200:'f200' }; } }) </script> </html>
五:组件通信
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <ul> <li> <h3>{{ts}}</h3> <p>vue组件</p> <!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) --> <my-button m="张三" v-on:three-click="xxx"></my-button> </li> </ul> </div> </body> <script> // 定义全局组件的方式 Vue.component('my-button', { props: ['m'], template: '<button v-on:click="doClickMyButton">我***{{m}}你个***了{{n}}次</button>', data: function() { return { n: 0 }; }, methods: { doClickMyButton: function() { console.log('doClickMyButton方法被调用'); this.n++; if (this.n % 3 == 0) { // 触发自定义组件定义的事件,这里可以传n个参数 // 但触发的事件绑定的函数要与参数个数一致 this.$emit('three-click', this.n, '芜湖', '我**'); } } } }) var vm = new Vue({ el: "#app", data: { ts: new Date().getTime() }, methods: { // 当子组件传值父组件时,只需要在父组件的方法中定义参数即可 xxx: function(a, b, c) { console.log('xxx方法被调用') console.log('my-button组件传递过来的参数1:' + a); console.log('my-button组件传递过来的参数2:' + b); console.log('my-button组件传递过来的参数3:' + c); } } }); </script> </html>
结果展示: