乐趣区

VUE的总结(2)

jiezi

用到的代码：https://github.com/liyang1234…vue.js API 传送门：https://cn.vuejs.org/v2/api/
v-on 指令
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>v-on 指令 </title>
</head>
<body>
<div id=”app”>
<button v-on:click=”clickhandler”>btn</button>
</div>
<script src=”vue.min.js”></script>

<script>
let vm = new Vue({
el: ‘#app’,
data: {},
methods: {
clickhandler(){
console.log(Math.random());
}
}
});
</script>
</body>
</html>

点击按钮产生了随机数，v-on：可以用 @代替。

点击按钮，数字自增
<div id=”app”>
<button v-on:click=”clickhandler”>btn</button>
<h1>{{num}}</h1>
</div>
<script src=”vue.min.js”></script>

<script>
let vm = new Vue({
el: ‘#app’,
data: {
num: 0
},
methods: {
clickhandler(){
this. num++;
}
}
});
</script>
点击按钮数字增加

但是有时候我们是要传参数的
<div id=”app”>
<button v-on:click=”clickhandler(2)”>btn</button> <!– 相当于函数调用 2 是实参 –>
<h1 v-text=”num”></h1>
</div>
<script src=”vue.min.js”></script>

<script>
let vm = new Vue({
el: ‘#app’,
data: {
num: 0
},
methods: {// 相当于函数声明
clickhandler(n){
this. num += n;
}
}
});
</script>
这样就是每点击一次增加 2

获取事件源用 $event
<div id=”app”>
<button v-on:click=”clickhandler(2,$event)”>btn</button> <!– 相当于函数调用 2 是实参 –>
<h1 v-text=”num”></h1>
</div>
<script src=”vue.min.js”></script>

<script>
let vm = new Vue({
el: ‘#app’,
data: {
num: 0
},
methods: {// 相当于函数声明
clickhandler(n,e){
this. num += n;
console.log(e);
}
}
});
</script>

可以在按钮上绑定多个事件
<div id=”app”>
<button v-on:click=”clickhandler(2,$event)”>btn</button> <!– 相当于函数调用 2 是实参 –>
<h1 v-text=”num”></h1>

<button v-on=”{mousedown: doThis, mouseup: doThat}”>btn2</button>
</div>
<script src=”vue.min.js”></script>

<script>
let vm = new Vue({
el: ‘#app’,
data: {
num: 0
},
methods: {// 相当于函数声明
clickhandler(n,e){
this. num += n;
console.log(e);
},
doThis(e){
console.log(‘doThis’);
},
doThat(e){
console.log(‘doThat’);
}
}
});
</script>
按下鼠标输出 doThis 放开鼠标输出 doThat

冒泡
<style>
#div1{
width: 400px;
height: 400px;
background: red;
}
#div2{
width: 200px;
height: 200px;
background: green;
}
</style>
</head><body>
<div id=”app”>
<button v-on:click=”clickhandler(2,$event)”>btn</button> <!– 相当于函数调用 2 是实参 –>
<h1 v-text=”num”></h1>
<button v-on=”{mousedown: doThis, mouseup: doThat}”>btn2</button>

<div id=”div1″ @click=”clickDiv1″>
<div id=”div2″ @click=”clickDiv2″></div>
</div>
</div>

<script src=”vue.min.js”></script>

<script>
let vm = new Vue({
el: ‘#app’,
data: {
num: 0
},
methods: {// 相当于函数声明
clickhandler(n,e){
this. num += n;
console.log(e);
},
doThis(e){
console.log(‘doThis’);
},
doThat(e){
console.log(‘doThat’);
},
clickDiv1(){
console.log(‘div1’);
},
clickDiv2(){
console.log(‘div2’);
}
}
});
</script>
点击 div2 再点击 div1

先捕获后冒泡，冒泡从里往外，先输出 div2，再输出 div1。

阻止冒泡
<div id=”div1″ @click=”clickDiv1″>
<div id=”div2″ @click=”clickDiv2($event)”></div>
</div>
clickDiv1(){
console.log(‘div1’);
},
clickDiv2(e){
console.log(‘div2’);
e.stopPropagation();
}

点击 div2, 只输出 div2

使用 vue 的方法 @click.stop
<div id=”div1″ @click=”clickDiv1″>
<div id=”div2″ @click.stop=”clickDiv2($event)”></div>
</div>
clickDiv1(){
console.log(‘div1’);
},
clickDiv2(e){
console.log(‘div2’);
}
同样可以阻止冒泡

阻止浏览器默认行为
baidu 点击超链接会默认跳转到百度网页，
<a href=”http://www.baidu.com” @click=”baidu($event)”>baidu</a>
baidu(e){
e.preventDefault();
}
点击超链接之后不会跳转了
vue 提供的修饰符 .prevent
<a href=”http://www.baidu.com” @click.prevent=”baidu($event)”>baidu</a>
同样能阻止默认行为

两个修饰符可以连着写
<a href=”http://www.baidu.com” @click.stop.prevent=”baidu($event)”>baidu</a>

<input type=”text” @keyup=”keyuphandler($event)”>
keyuphandler(e){
if(e.keyCode == 13){//13 是回车
console.log(‘hahahahh’);
}
}
当在输入框中按回车键时，输出一串。。。

keyCode 总结：https://www.cnblogs.com/daysm…

.once 修饰符表示只能一次
<button v-on:click.once=”clickhandler(2,$event)”>btn</button> 按钮只能点击一次

v-model 指令
原理
<div id=”app”>
用户名: <input type=”text” v-model=”username”>
<h4> 用户名是：{{username}}</h4>
</div>

<script src=vue.min.js></script>

<script>
new Vue({
el: ‘#app’,
data: {
username: ”
}
});
</script>

input 框里输入什么就显示什么
原理:<input> 相当于 View 层，通过 v -model 绑定上 data 里面的 username, 将数据自动同步到 Model 层, 双花括号将两者联系起来，Model 层将数据同步到“用户名是：”的 View 层，这就是双向数据绑定。

v-model 只限制于能使用的标签：<input><select><textarea>
v-model 自动将 radio 设成单选
性别: <input type=”radio”> 男
<input type=”radio”> 女
现在是单选框可以多选
性别: <input type=”radio” name=”sex”> 男
<input type=”radio” name=”sex”> 女
添加 name 属性可以实现单选
现在用 v -model 试一下
性别: <input type=”radio” value=” 男 ” v-model=”sex”> 男
<input type=”radio” value=” 女 ” v-model=”sex”> 女
<h4> 用户的性别是:{{sex}}</h4>
后台接收数据接的是 value

多选框
爱好:<input type=”checkbox” value=” 篮球 ” v-model=”hobbys”> 篮球
<input type=”checkbox” value=” 足球 ” v-model=”hobbys”> 足球
<input type=”checkbox” value=” 排球 ” v-model=”hobbys”> 排球
<h4> 用户的爱好是:{{hobbys}}</h4>
data: {
hobbys:[]
}

下拉列表
公司:<select name=”” id=”” v-model=”company”>
<option value=” 百度 ”> 百度 </option>
<option value=” 百度 ”> 阿里巴巴 </option>
<option value=” 百度 ”> 腾讯 </option>
</select>
<h4> 用户的公司是:{{company}}</h4>
data:{
company:’ ‘
}

textarea
<textarea value=” 自我介绍 ” cols=”30″ rows=”10″ id=”” v-model=”description”></textarea>
<h4> 我的描述是：{{description}}</h4>
data: {
description:”
}

几个修饰符
.lazy 当鼠标挪出 input 框的时候才回显
用户名: <input type=”text” v-model=”username”>
<h4> 用户名是：{{username}}</h4>

用户名 lazy: <input type=”text” v-model.lazy=”username”>
<h4> 用户名是：{{username}}</h4>

.number
年龄:<input type=”text” v-model=”age”>
<h4> 用户的年龄是:{{age}}</h4>

得到的数据类型是 string
年龄:<input type=”text” v-model.number=”age”>
<h4> 用户的年龄是:{{age}}</h4>

得到的数据类型是 number
将 type 改成 number, 输入框可以有增加减少功能
年龄:<input type=”number” v-model.number=”age”>
<h4> 用户的年龄是:{{age}}</h4>

.trim 去掉首尾空格
用户名 trim: <input type=”text” v-model.trim=”username”>
<h4> 用户名是：{{username}}</h4>

v-bind 绑定属性
<body>
<div id=”app”>
<img src=”imgSrc” alt=””>
</div>

<script src=”vue.min.js”></script>

<script>
new Vue({
el: ‘#app’,
data: {
imgSrc: ‘https://cn.vuejs.org/images/logo.png’
}

});
想把 ImgSrc 的地址作为 img 标签中的图片，但是会报错：

<img v-bind:src=”imgSrc” alt=””>OK 了

v-bind 的简写形式是冒号:

小例子
.aa{
width: 100px;
height: 100px;
background: #F00;
}
<div class=”aa”></div>

.aa{
width: 100px;
height: 100px;
background: #F00;
}

v-bind 的方式
.aa{
width: 100px;
height: 100px;
background: #F00;
}
<div :class=”className”></div>
data:{
className:’aa’
}

值控制是否显示
.aa{
width: 100px;
height: 100px;
background: #F00;
}
<div :class=”className”></div>
<div :class=”{aa:isAA}”></div>
data:{
isAA: true
}
意思是样式显示取决于 isAA 是否为 true

样式写在对象中
<div :style=”styleObj”></div>
styleObj: {
width: ‘100px’,
height: ‘100px’,
background: ‘#0f0’

}

其他指令
v-pre 指令原样输出
<body>
<div id=”app”>
<h1>{{msg}}</h1>

</div>

<script src=”vue.min.js”></script>

<script>
new Vue({
el: ‘#app’,
data: {
msg: ‘Hello’
}
});
</script>

<h1 v-pre>{{msg}}</h1>

v-cloak 指令渲染完成后显示
v-once 只渲染一次

退出移动版