样式绑定
class绑定:v-bind:class="expression";
style绑定:v-bind:style="expression"; expression允许接收的类型:字符串、数组、对象。
<p :class="clas">但是他不可能一直都是Vue的菜鸟。</p> <p :class="claess">这里是数组的两个类选择器的样式</p> <div :style="syt">Vue用对象方式绑定style样式</div> <div :style="{color:cname,fontSize: fsize}">Vue的直接对象方式绑定style样式</div>
修饰符(Vue通过.指令后缀来调用修饰符实现不同的功能)
(1).lazy:默认情况下, v-model在input事件中同步输入框的值与数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步。
(2).number:将用户的输入值转为 Number 类型。
(3) .trim:自动过滤用户输入的首尾空格。
<input type="text" v-model="content" placeholder="请输入" /><button @click="doMsg">发送</button><br /> <!-- 实例2:实现一次性按钮once --> <input type="text" v-model="content" placeholder="请输入" /><button @click.once="doMsg">只可发送一次</button><br /> <!-- 实例3:阻止表单提交prevent --> <form action="dsafaf.html" method="post" @submit.prevent="doSubmit" > <label for="bname">书本名称:</label><input type="text" name="bname" v-model="bname" /><br /> <label for="price">书本价格:</label><input type="text" name="price" v-model="price" /><br /> <input type="submit" value="新增" /><br /> </form> <!-- 修饰符可以串联,多个修饰符 --> <a href="" @click.stop.prevent="doMsg">修饰符可以串联</a> <!-- 阻止事件冒泡 --> <a href="" @click.stop="doMsg()">阻止单击事件冒泡</a> <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 --> <div v-on:click.self="doMsg" :class="claess">只在此区域发生的事件监听有效</div> <!-- 实例4:回车发送消息 --> <p> <input type="text" v-model="mesg" placeholder="请输入" @keyup.enter="sendMsg" /> </p>
表单(Vue中表单操作)
<label for="username">账号:</label><input type="text" name="username" v-model="uname" /><br /> <label for="password">密码:</label><input type="password" name="password" v-model="pwd" /><br /> <label for="sex">性别:</label> <input type="radio" v-model="sex" value="男" />男 <input type="radio" v-model="sex" value="女" />女<br /> <label for="city">城市:</label><select v-model="city" style=" 165px;"> <option value="">--请选择--</option> <option v-for="ct in cites" :value="ct.value">{{ct.name}}</option> </select><br /> <label>爱好:</label><span v-for="h in hobbies"><input type="checkbox" v-model="hobby" :value='h.id'/>{{h.name}}</span><br /> <label for="text">备注:</label><textarea v-model="textara"></textarea><br /> <input type="checkbox" title="勾选代表你已同意相关协议" v-model="flag" /><a href="#">我已阅读并同意相关协议</a><br /> <button @click="doRegister" :disabled="!flag">注册</button>
自定义指令(除了Vue自带的指令,Vue也允许注册自定义指令。根据作用范围分为全局指令和局部指令。)
Vue.directive("focus",{});//全局指令
new Vue({
el:"#d1",
directives:{//局部指令
focus:{}
}
});
<!-- 局部 --> <div v-clog:abs.a.b="ts"> 此元素带有自定义的局部指令。 </div> <div ref='direct'> 此元素带有自定义的全局指令。 </div>
自定义指令的钩子函数:
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。
vue组件
组件(Component)是Vue最强大的功能之一;组件可以扩展HTML元素,封装可重用的代码;组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。
全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})
局部组件定义:
components:{//局部组件 'custom-button':{//自定义组件必须使用‘-’命名法。 template:"<button @click='doClick'>[局部组件]已点击{{count}}次</button>",//模板 data(){//为组件定义data属性必须使用函数方式返回属性,因为组件是多例模式。 return { count:0 } }, methods:{ doClick(){ ++this.count; console.log(this.textName); } }, props:{ textName:{//参数名 type:[String,Number,Object,Boolean],//可选参数 required:true//必选 }, },//传递参数必须使用驼峰命名法,并且此属性可以接受动态值。 } }
全局组件:
/* 全局组件 */ Vue.component('kfc-button',{ template:"<button @click='doThreeClick'>[全局组件]已点击{{count}}次</button>",//模板 data(){//为组件定义data属性必须使用函数方式返回属性,因为组件是多例模式。 return { count:0 } }, methods:{ doThreeClick(){ ++this.count; if(this.count%3===0){ console.log('子组件点击次数是3的倍数:次数为:',this.count); //利用$emit将子组件中的参数传递到父组件 this.$emit('three-click',this.count);//注意组件中定义的事件名称要与标签体中的事件名对应,调用的方法用参数接受传递的值,必须使用短横线分隔命名法 } } } });
HTML语言:
<p> <!-- 推荐使用短横线 --> <custom-button text-name="王五"></custom-button> </p> <h3>5.2 全局组件</h3> <p> <!-- 推荐使用短横线 --> <kfc-button ></kfc-button> </p>
传参数的问题,因为我们总有那种需要在组件之间传递数据的需求:
props是父组件用来传递数据的一个自定义属性。
<h3>5.3 传参问题</h3> <p> <!-- 父组件 -> 子组件通过props定义参数的方式 --> <!-- 只能使用短横线分隔命名法,因为HTML语言的元素属性(attribute)是不敏感大小写的,在浏览器编译时会自动将大写的属性转换为小写。 --> <custom-button :text-name="stu.name"></custom-button><!-- 这个stu为对象,可以调用方法或使用表达式 --> </p> <p> <!-- 子组件 -> 父组件通过$emit自定义事件传递参数的方式 --> <kfc-button @three-click="doComponentParent"></kfc-button> </p>
附上所有实例代码(可直接运行):
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue实例</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .cla{ color: crimson; font-size: 25px; } .cl1{ color: blueviolet; font-weight: bold; } .cl2{ background-color: darkorange; } </style> </head> <body> <div id="app"><!-- 挂载区域 --> <h2>{{ts}}</h2> <h2>1.样式绑定(表达式可以接收对象,数组,字符串)</h2> <h3>1.1 class绑定</h3> <!-- 传统方式 --> <p class="cla">这是一个Vue的菜鸟初学者。</p> <!-- Vue方式 --> <p :class="clas">但是他不可能一直都是Vue的菜鸟。</p> <p :class="claess">这里是数组的两个类选择器的样式</p> <h3>1.2 style绑定</h3> <!-- 传统方式 --> <div style="color: aqua;font-size: 25px;">传统方式的内联style样式</div> <!-- Vue方式 --> <div :style="syt">Vue用对象方式绑定style样式</div> <div :style="{color:cname,fontSize: fsize}">Vue的直接对象方式绑定style样式</div> <div :style="syt">Vue方式绑定style样式</div> <h2>2.修饰符(Vue通过.指令后缀来调用修饰符实现不同的功能)</h2> <h3>2.1 事件修饰符和按键修饰符</h3> <!-- 实例1:按钮点击事件 --> <p>{{msg}}</p> <input type="text" v-model="content" placeholder="请输入" /><button @click="doMsg">发送</button><br /> <!-- 实例2:实现一次性按钮once --> <input type="text" v-model="content" placeholder="请输入" /><button @click.once="doMsg">只可发送一次</button><br /> <!-- 实例3:阻止表单提交prevent --> <form action="dsafaf.html" method="post" @submit.prevent="doSubmit" > <label for="bname">书本名称:</label><input type="text" name="bname" v-model="bname" /><br /> <label for="price">书本价格:</label><input type="text" name="price" v-model="price" /><br /> <input type="submit" value="新增" /><br /> </form> <!-- 修饰符可以串联,多个修饰符 --> <a href="" @click.stop.prevent="doMsg">修饰符可以串联</a> <!-- 阻止事件冒泡 --> <a href="" @click.stop="doMsg()">阻止单击事件冒泡</a> <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 --> <div v-on:click.self="doMsg" :class="claess">只在此区域发生的事件监听有效</div> <!-- 实例4:回车发送消息 --> <p> <input type="text" v-model="mesg" placeholder="请输入" @keyup.enter="sendMsg" /> </p> <h2>3.表单</h2> <label for="username">账号:</label><input type="text" name="username" v-model="uname" /><br /> <label for="password">密码:</label><input type="password" name="password" v-model="pwd" /><br /> <label for="sex">性别:</label> <input type="radio" v-model="sex" value="男" />男 <input type="radio" v-model="sex" value="女" />女<br /> <label for="city">城市:</label><select v-model="city" style=" 165px;"> <option value="">--请选择--</option> <option v-for="ct in cites" :value="ct.value">{{ct.name}}</option> </select><br /> <label>爱好:</label><span v-for="h in hobbies"><input type="checkbox" v-model="hobby" :value='h.id'/>{{h.name}}</span><br /> <label for="text">备注:</label><textarea v-model="textara"></textarea><br /> <input type="checkbox" title="勾选代表你已同意相关协议" v-model="flag" /><a href="#">我已阅读并同意相关协议</a><br /> <button @click="doRegister" :disabled="!flag">注册</button> <h2>4.自定义指令(除了Vue自带的指令,Vue也允许注册自定义指令。根据作用范围分为全局指令和局部指令。)</h2> <!-- 局部 --> <div v-clog:abs.a.b="ts"> 此元素带有自定义的局部指令。 </div> <div ref='direct'> 此元素带有自定义的全局指令。 </div> <h2>5.Vue组件(组件是Vue最强大的功能之一,可以扩展HTML元素,封装可重用的代码,分为全局组件和局部组件。)</h2> <h3>5.1 局部组件</h3> <p> <!-- 推荐使用短横线 --> <custom-button text-name="王五"></custom-button> </p> <h3>5.2 全局组件</h3> <p> <!-- 推荐使用短横线 --> <kfc-button ></kfc-button> </p> <h3>5.3 传参问题</h3> <p> <!-- 父组件 -> 子组件通过props定义参数的方式 --> <!-- 只能使用短横线分隔命名法,因为HTML语言的元素属性(attribute)是不敏感大小写的,在浏览器编译时会自动将大写的属性转换为小写。 --> <custom-button :text-name="stu.name"></custom-button><!-- 这个stu为对象,可以调用方法或使用表达式 --> </p> <p> <!-- 子组件 -> 父组件通过$emit自定义事件传递参数的方式 --> <kfc-button @three-click="doComponentParent"></kfc-button> </p> </div> </body> <script type="text/javascript"> /* 全局组件 */ Vue.component('kfc-button',{ template:"<button @click='doThreeClick'>[全局组件]已点击{{count}}次</button>",//模板 data(){//为组件定义data属性必须使用函数方式返回属性,因为组件是多例模式。 return { count:0 } }, methods:{ doThreeClick(){ ++this.count; if(this.count%3===0){ console.log('子组件点击次数是3的倍数:次数为:',this.count); //利用$emit将子组件中的参数传递到父组件 this.$emit('three-click',this.count);//注意组件中定义的事件名称要与标签体中的事件名对应,调用的方法用参数接受传递的值,必须使用短横线分隔命名法 } } } }); var vm = new Vue({ el:'#app', data:{ ts:new Date().getTime(), clas:'cla',//类选择器 syt:{//样式对象 color:'green', fontSize:'25px' }, cname:'red', fsize:'25px', claess:['cl1','cl2'],//一组类样式 msg:'', content: '', bname:'', price:'', mesg:'', cites:[//数组绑定下拉框 {name:'长沙',value:1}, {name:'岳阳',value:2}, {name:'株洲',value:3}, {name:'永州',value:4} ], uname:'', pwd:'', city:'', hobbies:[//绑定爱好复选框 {id:1,name:'游泳'}, {id:2,name:'健身'}, {id:3,name:'游戏'}, {id:4,name:'动漫'} ], hobby:[],//接收爱好数据 sex:'男', textara:'', flag:false,//定义阅读协议变量 stu:{id:1,name:'这里是参数哦'} }, methods:{ doMsg(){ this.msg = this.content; }, doSubmit(){ console.log(this.bname,this.price); }, sendMsg(){ this.msg = this.mesg; }, doRegister(){ let params = { username : this.uname, password : this.pwd, sex : this.sex, city:this.city, hobbies : this.hobby, textara : this.textara }; console.log(params); }, doComponentParent(value){ //子组件传的参数 console.log('【父组件接受参数:】'+value); } }, computed:{//计算 ok(){ return !this.flag; } }, directives:{//自定义局部指令 clog:{//注册指令 bind(el, binding, vnode) {//el:此节点,bingding:指令存储信息的对象,vnode:Vue编译生成的虚拟节点 let s = JSON.stringify; el.innerHTML = 'name: ' + s(binding.name) + '(指令名,不包括v-前缀)<br>' + 'value: ' + s(binding.value) + '(指令绑定的值)<br>' + 'expression: ' + s(binding.expression) + '(字符串形式的指令表达式)<br>' + 'argument: ' + s(binding.arg) + '(传给指令的参数,可选)<br>' + 'modifiers: ' + s(binding.modifiers) + '(包含所有修饰符的对象)<br>' + 'vnode keys(Vue 编译生成的虚拟节点信息。): ' + Object.keys(vnode).join(', '); }, inserted(){ console.log('这个元素被插入父节点!'); }, update(){ console.log('这个元素被更新了!'); }, componentUpdated(){ console.log('这个VNode 及其子 VNode 全部更新后调用。!'); }, unbind(){ console.log('元素已解绑!'); } } }, components:{//局部组件 'custom-button':{//自定义组件必须使用‘-’命名法。 template:"<button @click='doClick'>[局部组件]已点击{{count}}次</button>",//模板 data(){//为组件定义data属性必须使用函数方式返回属性,因为组件是多例模式。 return { count:0 } }, methods:{ doClick(){ ++this.count; console.log(this.textName); } }, props:{ textName:{//参数名 type:[String,Number,Object,Boolean],//可选参数 required:true//必选 }, },//传递参数必须使用驼峰命名法,并且此属性可以接受动态值。 } } }); /* 全局指令 */ Vue.directive('direct',{ inserted(){ console.log('自定义全局指令的元素被插入父节点!'); }, }); </script> </html>