样式绑定
- class绑定
使用方式：v-bind:class=“expression”
expression的类型：字符串、数组、对象 - style绑定
v-bind:style=“expression”
expression的类型：字符串、数组、对象
事件处理器
- 事件修饰符
Vue通过由点(.)表示的指令后缀来调用修饰符1.stop
2 .prevent
3 .capture
4 .self
5 .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在监听键盘事件时添加按键修饰符
例如：
<input v-on:keyup.enter="submit">
1.enter
2 .tab
3 .delete (捕获 “删除” 和 “退格” 键)
4.esc
5.space
6.up
7.down
8.left
9.right
10.ctrl
11.alt
12.shift
13.meta
vue表单
用v-model指令在表单控件元素上创建双向数据绑定
-
常用控件
1、文本框/密码框/文本域/隐藏域
2、 单选复选框/多选复选框
3、单选按钮
4、下拉框 -
修饰符
1、lazy
默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步
2、number
将用户的输入值转为 Number 类型
3、trim
自动过滤用户输入的首尾空格
注：H5提供的新方法 JSON.parse():只能解析json形式的字符串变成json，安全性高一些 JSON.stringify():json转换为字符串，解析的时候会自动加上引号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<style>
.cl{
color: bisque;
}
</style>
<body>
<div id="app">
<p>{{title}},{{ts}}</p>
<div :class="textColor">可乐爱七汐</div><br />
<button @click='onClick'>来吧</button><br />
{{text}}<br />
<input type="text" v-model="text" />
<!-- 可以点击多次，并且数据也可以变 -->
<button @click="onClick">传递1</button>
<!-- 只能点击一次 -->
<button @click.once="onClick">传递2</button><br />
<!-- @keyup.enter="onClick" 可以点击按钮也可以直接按回车键 -->
<input type="text" @keyup.enter="onClick" v-model="text" />
<button @click="onClick">传递2</button>
<br />
<div v-for="d in data">
<input type="checkbox" v-model="ids" :value="d.id" />{{d.name}}<br />
</div>
{{ids}}<br />
<!-- <input type="text" v-model.number="text"/>
{{text}} -->
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:function(){
return{
title:"kele qixi",
ts:new Date().getTime(),
textColor:'cl',
text:'',
ret:'',
data:[
{id:1,name:'kele'},
{id:2,'name':'qixi'},
{id:3,'name':'xuebi'},
{id:4,'name':'jici'},
{id:5,'name':'yl'},
],
ids:[]
}
},
methods:{
onClick:function(v){
console:log(v)
}
}
});
</script>
</html>
最后实现的效果图
总结：如果不懂或者我写的不对的地方欢迎评论区逛街！！！！！
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
