Vue基础语法(样式绑定、时间处理器、表单、组件)

样式绑定

一、 class绑定
使用方式：v-bind:class=“expression”
expression的类型：字符串、数组、对象

二、 style绑定
v-bind:style=“expression”
expression的类型：字符串、数组、对象

样式绑定.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><title>vue的样式绑定</title><style>.a{color: red;}.b{color: green;}.c{font-size: 36px;}</style></head><body><div id="app"><ul><li><h3>文本</h3>{{msg}}</li><li><h3>样式一</h3><div :class="xa">{{msg}}</div></li><li><h3>样式二</h3><div :class="xb">{{msg}}</div></li><li><h3>样式三</h3><div :class="xc">{{msg}}</div></li></ul></div></body><script type="text/javascript">new Vue({el:"#app",data(){return{msg:'hello vue',xa:'a',xb:'b',xc:['c','a']};}});</script>
</html>

运行Html可得到
在这里插入图片描述

事件处理器.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><title>事件处理器</title><style>div{padding: 40px;}</style></head><body><div id="app"><ul><li><h3>文本</h3>{{msg}}</li><li><h3>防止事件冒泡</h3><div style="height: 300px;width: 300px;background-color: red; margin-top: 20px;" @click.stop="a"><div style="height: 200px;width: 200px;background-color: green;" @click.stop="b"><div style="height: 100px;width: 100px;background-color: pink;" @click.stop="c"><div style="height: 50px;width: 50px;background-color:orange;" @click.stop="d"></div></div></div></div></li><li><h3>事件只能点击一次</h3>{{qqmsg}}<input type="text" v-model="msg" @click="send" /><button @click="send">发送</button><button @click.once="send">点击一次</button></li><li><h3>表单里的复选框</h3><div v-for="item,index in hobby" ><input type="checkbox" v-model="checkedIds" name="hobby" :value="item.id" />{{item.name}}</div>{{checkedIds}}</li><li><h3>表单里的下拉框</h3><select name="likes" v-model="selectedIds"><option v-for="item,index in hobby" :value="item.id" >{{item.name}}</option></select>{{selectedIds}}</li></ul></div></body><script type="text/javascript">new Vue({el: "#app",data() {return {msg: 'hello vue',qqmsg: null,hobby:[{id:'1',name:'智障'},{id:'2',name:'爱仕达'},{id:'3',name:'喝咖啡'}],checkedIds:[],selectedIds:null};},methods: {a() {alert('a')},b() {alert('b')},c() {alert('c')},d() {alert('d')},send() {this.qqmsg = this.msg;this.msg = null;}}});</script>
</html>

在这里插入图片描述

表单.html

<!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>

在这里插入图片描述

组件.html

<!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><my-button></my-button></li><li><p>父组件传值子组件</p><my-button m="爱仕达"></my-button></li><li><p>子组件传值父组件</p><my-button @three-click="doss"></my-button></li><li><p>全局vue组件的注册</p><my-button2></my-button2></li></ul></div></body><script type="text/javascript">Vue.component('my-button2',{props:['m'],template:'<button @click="doxx">自定义按钮，被{{m}}点击了{{n}}次</button>',data() {return {n:0,}},methods:{doxx(){this.n++;this.$emit('three-click',this.n,'vue','前端');},}})new Vue({el: '#app',data() {return {msg:'aa',}},computed:{xs(){return this.msg;	}},methods:{doss(n,x,y){alert(n);alert(x);alert(y);}},components:{'my-button':{props:['m'],template:'<button @click="doxx">自定义按钮，被{{m}}点击了{{n}}次</button>',data() {return {n:0,}},methods:{doxx(){this.n++;this.$emit('three-click',this.n,'智障','笑着醒');},}}}})</script>
</html>

在这里插入图片描述