样式绑定
1、class绑定
使用方式:v-bind:class="expression"
expression的类型:字符串、数组、对象
<div id="ad">
<h1>{{ts}}</h1>
<!-- class样式 -->
<div :class="clsArrs">
11111111111111111111111111111
</div>
</div>
<script>
var vm=new Vue({
el:'#ad',
data:{
ts:new Date().getTime(),
clsArrs:['cl','cl1']
}
});
</script>
2、style绑定
v-bind:style="expression"
expression的类型:字符串、数组、对象
<div id="ad">
<!-- style样式 -->
<div :style="clsObj">
11111111111111111111111111111
</div>
</div>
<script>
var vm=new Vue({
el:'#ad',
data:{
ts:new Date().getTime(),
clsObj:{
color:'green',
fontSize:'30px',
fontWeight:'bold'
}
}
});
</script>
,事件处理器
事件监听可以使用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>
<!-- click 事件只能点击一次 -->====<a v-on:click.once="doThis"></a>
click 事件只能点击一次:在此页面只能点击改按钮依次(在无刷新的情况下):
<div id="ad">
<div>
消息:<input type="text" v-model="msg" />
<button @click="send">发送</button>
</div>
<!-- 事件修饰符
once 只能点击事件一次
-->
<div>
消息:<input type="text" v-model="msg" />
<button @click.once="send">发送</button>
</div>
</div>
<script>
var vm=new Vue({
el:'#ad',
data:{
ts:new Date().getTime() ,
msg:''
},
methods:{
send:function(){
console.log(this.msg);
}
}
});
</script>
控制台只会打印一次,并且只能点击一次
<!-- 提交事件不再重载页面 -->
<div>
<form action="bookAction.action" v-on:submit.prevent="doSubmit">
消息:<input type="text" v-model="msg" />
<input type="submit" value="提交" />
</form>
</div>
<script>
var vm=new Vue({
el:'#ad',
data:{
ts:new Date().getTime() ,
msg:''
},
methods:{
doSubmit:function(){
console.log('doSubmit.......')
}
}
});
</script>
案件修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
全部的按键别名:
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
表单
用v-model指令在表单控件元素上创建双向数据绑定
常用控件
文本框/密码框/文本域/隐藏域
单选复选框/多选复选框
单选按钮
下拉框
<div id="ad">
<h1>{{ts}}</h1>
账号:<input type="text" v-model="username"/><br>
密码:<input type="password" v-model="password" /><br>
性别:<input type="radio" v-model="sex" value="1"/>男 <input type="radio" v-model="sex" value="2"/>女<br>
爱好:<span v-for="d in hobby">
<input type="checkbox" v-model="hobbies" :value="d.id" />{{d.name}}
</span><br>
籍贯:
<select v-model="areaname">
<option value="">--请选择--</option>
<option v-for="a in area" :value="a.id">{{a.name}}</option>
</select>
<br />
备注:
<textarea v-model="remark"></textarea><br />
<input type="checkbox" v-model="flag" />已阅读
<br><button @click="doRegister()" :disabled="disable">注册</button>
<!-- <button @click="doRegister()" :disabled="!flag">注册</button> -->
</div>
<script>
var vm=new Vue({
el:'#ad',
data:{
ts:new Date().getTime() ,
username:'',
password:'',
sex:'',
hobby:[
{id:1,name:'叽叽叽'},
{id:2,name:'嘻嘻嘻'},
{id:3,name:'嘿嘿嘿'},
{id:4,name:'哈哈哈'}
],
hobbies:[],
area:[
{id:1,name:'浏阳'},
{id:2,name:'益阳'},
{id:3,name:'岳阳'},
{id:4,name:'衡阳'}
],
areaname:'',
remark:'',
flag:false
},
methods:{
doRegister:function(){
let params={
username:this.username,
password:this.password ,
sex:this.sex,
hobby:this.hobbies,
arae:this.areaname,
remark:this.remark
};
console.log(params);
}
},
computed:{
disable:function(){
return !this.flag;
}
}
});
</script>
四,自定义组件
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素,封装可重用的代码(控件将大量的js代码封装了起来)
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树
全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})
注册后,我们可以使用以下方式来调用组件:
<tagName></tagName>
props
props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明 "prop"
因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
定义组件名的方式有两种
短横线分隔命名(建议使用)
Vue.component('my-component-name', { /* ... */ }),引用方式:<my-component-name>
首字母大写命名
Vue.component('MyComponentName', { /* ... */ }),引用方式: <my-component-name>和<MyComponentName>都是可接受的
HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,
camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
props: ['postTitle'],<my-tag post-title="hello!"></my-tag>
<div id="ad">
<h1>{{ts}}</h1>
<h2>自定义指令</h2>
<div v-fos="name">12312421</div>
<span v-yy></span>
</div>
<script>
// 全局自定义指令
Vue.directive('yy',{
bind:function(el,binding){
console.log('[全局指令的binding]');
},
inserted:function(el,binding){
console.log('[全局指令的inserted]');
}
});
var vm=new Vue({
el:'#ad',
data:{
ts:new Date().getTime() ,
name:'zs'
},
methods:{
},
directives:{
// 局部指令所对应的钩子函数 bind/inserted/unbind
fos:{
bind:function(el,binding){
console.log(el);
console.log(binding);
console.log('bind');
},
inserted:function(el,binding){
console.log('inserted');
}
}
}
});
</script>
vue组件
组件简介
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素,封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树
全局和局部组件
全局组件:Vue.component(tagName, options),tagName为组件名,options为配置选项。
局部组件: new Vue({el:'#d1',components:{...}})
<div id="ad">
<h1>{{ts}}</h1>
<h2>组件 Component 全局/局部</h2>
<kfc-button @three-click="doTest"></kfc-button>
<yy-button :first-Name="obj"></yy-button>
</div>
<script>
//组件定义 :全局和局部
//2.组件语法:
//2.1全局组件
//Vue.component('组件名称',options)
//2.2局部组件
/* var vm=new Vue({
component:{
组件名:{
....
},
....
}
}) */
//3.组件命名
//3.1短横线命名法:
// kfc-button
//3.2首字母大写命名法(帕斯卡)
//KfcButton
//驼峰命名法
// kfcButton
//4.组件作用:扩展HTML元素,封装可冲重用的代码
//5.理解:理解为jsp中的<%@include%>指令
//组件是一个独立的页面
//6.组件传值
//6.1子到父
// 采用事件方式 this.$emit('事件名',参数....)
//6.2父到子
//采用属性传参方式
//全局组件
Vue.component('yy-button',{
//定义HTML代码,每一个template中只有一个根节点
template:'<div><h1>全局组件</h1><button @click="doClick">被点击了{{count}}次</button></div>',
//属性命名采用驼峰命名法
props:['firstName'],
//自定义组件中data必须使用函数方式
data:function(){
return{
count:0
}
},
methods:{
doClick:function(){
this.count=this.count+1;
console.log(this.count);
console.log(this.firstName);
}
}
});
var vm=new Vue({
el:'#ad',
data:{
ts:new Date().getTime() ,
obj:{
fname:'zhang',
lname:'san'
}
},
methods:{
doTest:function(v){
console.log('父组件接收到count:'+v);
}
},
components:{
'kfc-button':{
//定义HTML代码,每一个template中只有一个根节点
template:'<div><h1>局部组件</h1><button @click="doThreeClick">被点击了{{count}}次</button></div>',
//自定义组件中data必须使用函数方式
data:function(){
return{
count:0
}
},
methods:{
doClick:function(){
this.count=this.count+1;
console.log(this.count);
},
doThreeClick:function(){
this.count=this.count+1;
if(this.count%3==0){
console.log('子组件count='+this.count);
//这里的事件名字必须使用短横线命名法
this.$emit('three-click',this.count);
}
}
}
}
}
});
</script>