上次写了VUE基础语法01
感兴趣的可以去康康
传送门
样式绑定
class绑定
使用方式：v-bind:class="expression"
expression的类型：字符串、数组、对象
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.cc{
color: coral;
}
</style>
<body>
<div id="app">
<div v-bind:class="textColor">
测试class绑定
</div>
</div>
<script type="text/javascript">
var vue=new Vue({
el:'#app',
data:function(){
return{
textColor:'cc',
}
}
});
</script>
</body>
</html>
效果展示
style绑定
v-bind:style="expression"
expression的类型：字符串、数组、对象
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :style='textColor'>
测试style绑定
</div>
</div>
<script type="text/javascript">
var vue=new Vue({
el:'#app',
data:function(){
return{
textColor:'color:cornflowerblue;',
}
}
});
</script>
</body>
</html>
效果展示
事件处理器
事件监听
可以使用v-on 指令
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
事件处理器 v-on<br/>
<button @click='onClick'>点击</button><br />
</div>
<script type="text/javascript">
var vue=new Vue({
el:'#app',
methods:{
onClick:function(){
alert('弹出');
}
}
});
</script>
</body>
</html>
效果展示
事件修饰符
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>
按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符
Vue为最常用的按键提供了别名
全部的按键别名：
.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="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
按键修饰符 双向绑定
<input type="text" v-model="text" />
<button @click.once="onClick" >一次传递</button>
<input type="text" @keyup.enter="onClick" v-model="text" />
<button @click="onClick" >多传递</button>
</div>
<script type="text/javascript">
var vue=new Vue({
el:'#app',
data:function(){
return{
text:'',
ret:''
}
},
methods:{
onClick:function(){
this.ret=this.text;
}
}
});
</script>
</body>
</html>
效果
vue表单
用v-model指令在表单控件元素上创建双向数据绑定
常用控件
文本框
密码框
文本域
隐藏域
单选复选框
多选复选框
单选按钮
下拉框
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的基本语法02</title>
</head>
<script type="text/javascript" src="js/vue.js"></script>
<body>
<div id="mydiv">
<h1>Vue表单</h1>
用户名：<input v-model="uname" style="width:200px;height:15px;" placeholder="请输入用户名"><br/>
密 码：<input v-model="upwd" type="password" style="width:200px;height:15px;" placeholder="请输入密码"><br/>
<span>性别:</span>
<input type="radio" value="one" name="sex" v-model="sex">男
<input type="radio" value="two" name="sex" v-model="sex">女
<br>
<span>爱好:</span>
<input type="checkbox" value="吃饭" v-model="checkedNames">吃饭
<input type="checkbox" value="睡觉" v-model="checkedNames">睡觉
<input type="checkbox" value="打豆豆" v-model="checkedNames">打豆豆
<br>
<span>地址:</span>
<select v-model="selected">
<option disabled value="">-----请选择-----</option>
<option>湖南省</option>
<option>湖北省</option>
<option>四川省</option>
</select><br/>
备注：
<p style="white-space:pre-line;"></p>
<textarea v-model="message" ></textarea><br/>
<input type="submit" @click="doSubmit()" />
</div>
<script type="text/javascript">
var example1 = new Vue({
el:'#mydiv',
data:function(){
return {
uname:null,
upwd:null,
checkedNames: [],
one:'男',
two:'女',
sex:'one',
selected:'',
message:''
}
},
methods: {
doSubmit: function() {
console.log('提交方法被调用了！');
var obj = {
uname: this.uname,
upwd: this.upwd,
sex: this.sex,
checkedNames:this.checkedNames,
selected:this.selected,
message:this.message
}
console.log(obj);
}
}
})
</script>
</body>
</html>
效果如下
修饰符
.lazy
默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步
.number
将用户的输入值转为 Number 类型
.trim
自动过滤用户输入的首尾空格
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<!-- 引入Vue的js文件 -->
<script src="js/vue.js"></script>
<body>
<div id="app">
<input v-model.number="age" type="number">
{{age}}
</div>
<script type="text/javascript">
var vue=new Vue({
el:'#app',
data:function(){
return{
age:''
}
}
});
</script>
</body>
</html>
效果
注1：H5提供的新方法
JSON.parse():只能解析json形式的字符串变成json，安全性高一些
JSON.stringify():json转换为字符串，解析的时候会自动加上引号
1110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
