Vue模板语法下
样式处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.c1{
font-size: 26px;
}
.c2{
color: blueviolet;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li>
<p>class样式绑定</p>
<!-- 绑定一个class -->
<span v-bind:class="sc">我是绑定一个class样式</span>
<!-- 绑定多个class样式 -->
<div v-bind:class="scp">class样式绑定</div>
</li>
<li>
<p>sytle绑定</p>
<span v-bind:style="{fontSize:ss}">style样式绑定</span>
</li>
</ul>
<script>
var vm = new Vue({
el:"#app",
data:{
sc:'c1',
scp:['c1', 'c2'],
ss:'100px'
}
})
</script>
</div>
</body>
</html>
事件处理器
Vue通过由点(.)表示的指令后缀来调用修饰符，
<!-- 阻止单击事件冒泡 -->
<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>
防止事件冒泡 模拟qq发送聊天的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件处理</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
ul li div {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>防止事件冒泡</h3>
<div style="height: 300px;width: 300px;background: orange;" @click="c">
<div style="height: 200px;width: 200px;background: red;" @click="b">
<div style="height: 100px;width: 100px;background: blue;" @click.stop="a">
</div>
</div>
</div>
</li>
<li>
<h3>模拟qq发送聊天的功能</h3>
{{temp}}
<input type="text" v-model="content" v-on:keyup.enter="doSend">
<button v-on:click="doSend">发送</button>
<button v-on:click.once="doSend">只发送一次</button>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
content:null,
temp:null,
},
methods: {
a() {
alert('a');
},
b() {
alert('b');
},
c() {
alert('c');
},
doSend(){
console.log('doSend');
this.temp = this.content;
this.content = null;
}
}
});
</script>
</body>
</html>
表单增强
<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:{{checkedIds}}
</li>
<li>
<h3>事件绑定下拉框</h3>
<select name="likes" v-model="selectedId">
<option v-for="item, index in hobby" :value="item.id">{{item.name}}</option>
</select>{{selectedId}}
</li>
<script>
var vm = new Vue({
el: "#app",
data: {
hobby:[{
id:1,name:'篮球'
},{
id:2,name:'LOL'
},{
id:3,name:'兔子'
}],
checkedIds:[],
selectedId:null
}
</script>
使用vue来做一个功能很全的表单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
.c1 {
font-size: 26px;
}
.c2 {
color: blueviolet;
}
</style>
</head>
<body>
<div id="app">
<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>
var vm = new Vue({
el: "#app",
data: {
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>
Vue组件
这其实就和jsp的自定义标签差不多，上代码
定义全局组件
Vue.component('组件名',{....})
定义局部组件
components:{
myButton:{
......
}
}
基础实例
<div id="app">
<my-button m="cpc"></my-button>
</div>
<script>
Vue.component('my-button', {
//这是参数
props: ['m'],
//这是组件模板
template: '<button>m:{{m}}, n:{{n}}</button>',
//这里一定要使用函数 不然报错别怪我
data: function(){
return {
n:100
}
}
}
new Vue({
el: "#app"
});
</script>
父传子
子传父是通过这个
//第一个为事件名 后面的是传递过去的参数
this.$emit('three-click', this.n, 'cpc', 'eee');
完整案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义组件（html标签）</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ul>
<li>vue之自定义组件</li>
<my-button m='cpc' @three-click='xxx'></my-button>
</ul>
</div>
</body>
<script>
//定义全局组件
Vue.component('my-button', {
props:['m'],
template:'<button v-on:click="doClickMyButton">你点击{{m}}点击了{{n}}次',
data:function(){
return {
n: 0
}
},
methods:{
doClickMyButton(){
this.n ++;
//当和3取余数为0的时候指向条件体
if(this.n % 3 == 0){
//该组件上事件名 为 three-click 所写的方法 会再全局里面找
this.$emit('three-click', this.n, 'cpc', 'eee');
console.log(this.$emit);
}
}
}
})
new Vue({
el:'#app',
data:{
tr:new Date().getTime()
},
methods:{
xxx:function(a, b, c){
console.log('xxx方法被调用')
console.log('my-button组件传递过来的参数1：' + a);
console.log('my-button组件传递过来的参数2：' + b);
console.log('my-button组件传递过来的参数3：' + c);
}
}
});
</script>
</html>
844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
