文章目录
v-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
[v-cloak] {
/* 属性选择器 */
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 在Vue解析HTML之前，h2标签存在一个v-cloak属性（不要显示{{msg}}） -->
<h2 v-cloak>{{msg}}</h2>
<!-- 在Vue解析HTML之后（{{msg}}被替换），h2标签不存在这个v-cloak属性 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
setTimeout(function(){
const app = new Vue({
el:'#app',
data:{
msg:'Hello v-cloak'
}
})
}, 3000)
</script>
</body>
</html>
插值表达式存在的问题：闪动。
解决：使用v-cloak配合插值表达式使用。
先隐藏起来，等到Vue解析过后，再显示出来。
v-text和v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>
插值表达式: <span>{{msg}}</span>
</p>
<p>
v-text: <span v-text="msg"></span>
</p>
<p>
v-html: <span v-html="msg"></span>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'<span style="font-size:30px;color:red">Hello Vue数据填充指令</span>'
}
})
</script>
</body>
</html>
v-pre和v-once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
v-pre: <span v-pre>{{msg}}</span>
<!-- v-pre用于跳过该元素及其子元素的编译过程，按照原始方式展示出来 --><br>
v-once: <span v-once>{{msg}}</span>
<!-- v-once一次性插值，当数据改变时，插值处不会更新 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'Hello Vue.js'
}
})
</script>
</body>
</html>
v-for、v-bind结合
案例：点击哪个元素，哪个元素显示红色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active {
/* class选择器 */
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- 动态绑定class属性：v-bind -->
<li v-for="(item,index) in movies" v-bind:class="{active:currentIndex === index}" @click="clickItem(index)">{{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
currentIndex:0,
movies:['肖申克的救赎','釜山行','小丑','飓风营救']
},
methods:{
clickItem(index) {
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
v-on、v-bind、watch的结合
点击上一张、下一张的按钮来切换图片，如果是第一张，默认不能点击上一张，如果是最后一张，默认不能点击下一张。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button v-on:click="pre" v-bind:disabled="first">前一张</button>
<button v-on:click="next" v-bind:disabled="second">后一张</button>
<br>
<!-- 事件绑定的语法糖:@ -->
<img v-bind:src="imgsrc[num]" width="300px" height="500px">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
num:0,
first:true,
second:false,
imgsrc:[
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596101911597&di=a3e63fab05228a8b63d5bbb94d593ea6&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fe7bf0717d2b00cf48ebb9c0de83514f96485cf8929b1e-s1Odrq_fw658',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596101965505&di=da0c7be2e79cdc6dddbc2d5c1cc6200b&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201705%2F30%2F20170530215558_fTxdi.thumb.700_0.jpeg',
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709263902,249359209&fm=11&gp=0.jpg'
]
},
methods:{
/* ES6方法的写法 */
pre() {
if (this.num > 0 && this.num < this.imgsrc.length) {
this.num--;
}
},
next() {
if (this.num >= 0 && this.num < this.imgsrc.length - 1) {
this.num++;
}
}
},
watch:{
num:function(newValue, oldValue) {
if (newValue===0) {
this.first = true;
} else {
this.first = false;
}
if (newValue===this.imgsrc.length - 1) {
this.second = true;
} else {
this.second = false;
}
}
}
})
</script>
</body>
</html>
v-model原理
利用了v-bind:value和v-on:input事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<body>
<div id="app">
<label for="name"></label>
<!-- v-bind:value：单向绑定，v-on:input: 监听输入事件 -->
<!--<input type="text" id="name" placeholder="edit me" v-bind:value="message" v-on:input="valueChange">-->
<input type="text" id="name" placeholder="edit me" v-bind:value="message" v-on:input="message = $event.target.value">
message is : {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
},
methods: {
valueChange(event) {
this.message = event.target.value;
}
}
});
</script>
</body>
</html>
v-model结合radio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<label for="male">男</label>
<input type="radio" id="male" v-model="gender" value="男">
<label for="female">女</label>
<input type="radio" id="female" v-model="gender" value="女">
<hr >
<span>你选择了{{gender}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
gender:''
}
})
</script>
</body>
</html>
v-model结合checkbox
- 单选框：boolean
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<label for="agree">I accept.</label>
<input type="checkbox" id="agree" v-model="checked"><br>
<button :disabled="!checked">下一步</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
checked:false
}
})
</script>
</body>
</html>
- 多选框：数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="checkbox" value="music" v-model="hobbies">音乐
<input type="checkbox" value="trip" v-model="hobbies">旅行
<input type="checkbox" value="food" v-model="hobbies">美食
<input type="checkbox" value="sleep" v-model="hobbies">睡觉
<span>您的爱好有：{{hobbies}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
hobbies:[]
}
})
</script>
</body>
</html>
v-model结合select
- 单选：一个值，（省市区）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<select v-model="selected">
<option disabled>请选择</option>
<option value="Beijing">北京</option>
<option value="Shanghai">上海</option>
<option value="Shenzhen">深圳</option>
</select>
<span>你选择的是：{{selected}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
selected:''
}
})
</script>
</body>
</html>
- 多选：数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 在选择时需要按ctrl键 -->
<select v-model="selected" multiple>
<option value="Hangzhou">杭州</option>
<option value="Nanjing">南京</option>
<option value="Chengdu">成都</option>
<option value="Chongqing">重庆</option>
</select>
<span>你选择了：{{selected}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
selected:[]
}
})
</script>
</body>
</html>
v-model修饰符
lazy修饰符
- 默认情况下，v-model默认是在input事件中同步输入框的数据
- 就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变
- lazy修饰符可以让数据在失去焦点或者回车时才会更新（不会实时更新）
number修饰符
-
默认情况下，在输入框中无论输入数字还是字母，v-model都会把他们当做字符串类型来处理
-
number修饰符可以让在输入框中输入的内容自动转化成数字类型
trim修饰符
-
如果输入的内容首尾有很多空格（在页面中是看不到的，但在控制台可以看到）
-
使用trim修饰符可以过滤内容左右两边的空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
用户名：<input type="text" v-model.lazy="username"><br>
年龄：<input type="text" v-model.number="age"><br>
自我介绍：<textarea rows="3" cols="20" v-model.trim="about">
</textarea>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
username:'',
age:0,
about:''
}
})
</script>
</body>
</html>