v-cloak
处理数据渲染因网速过慢，到最后用户可以看见类似{{msg}}的数据
<!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>Document</title>
<style>
/* 处理数据渲染因网速过慢，到最后用户可以看见类似{{msg}}的数据 */
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak="">
{{msg}}
</p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
'msg':'测试信息'
}
})
</script>
</body>
</html>
v-text、v-html
<!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>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!-- v-text 是将数据当text文本去解析与{{}}效果一样 -->
<p v-text="msg"> </p>
<!-- v-html是将数据当做html 代码去解析 -->
<p v-html="msg"></p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg:'<span>hello vue!!!</span>'
}
})
</script>
</body>
</html>
v-bind属性绑定
<!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>Document</title>
</head>
<body>
<div id="app">
<!-- v-bind属性绑定-->
<p v-html="msg" v-bind:abc="title"></p>
<!-- v-bind缩写-->
<p v-html="msg" :abc="title"></p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg:'测试信息',
title:'绑定参数信息'
}
})
</script>
</body>
</html>
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>Document</title>
</head>
<body>
<div id="app">
<!-- v-on绑定事件 -->
<button v-on:click="showNum">按钮</button>
<button v-on:click="showNum2">按钮</button>
<!-- 用@event 缩写 -->
<button @click="showNum3">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
showNum(){
console.log(1)
},
showNum2(){
console.log(2)
},
showNum3(){
console.log(3)
}
},
})
</script>
</body>
</html>
跑马灯练习
<!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>Document</title>
</head>
<body>
<div id="app">
<h4 v-html="msg"></h4>
<button @click="lang">浪起来</button>
<button @click="stop">别浪</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: '猥琐发育，别浪~~~',
intervarId:null
},
methods: {
lang() {
if(this.intervarId!=null){
return;
}
// 操作msg
this.intervarId = setInterval(() => {
var first = this.msg.substring(0, 1);
var rest = this.msg.substring(1);
this.msg = rest + first;
console.log(this.msg);
}, 500)
},
stop(){
if(this.intervarId!=null){
clearInterval(this.intervarId);
this.intervarId=null
}
}
},
})
</script>
</body>
</html>
事件修饰符
<!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>Document</title>
</head>
<body>
<!-- capture 以捕获模式处理事件由内向外-->
<!-- <div id="app" @click.capture='showBox'> -->
<!-- self 直接点击当前元素才触发 -->
<div id="app" @click.self='showBox'>
<!-- prevent取消默认事件 -->
<a href="https://baidu.com" @click.prevent='showInfo'>去百度</a>
<!--stop 阻止冒泡事件 -->
<button @click.stop='showBtn'>阻止冒泡</button>
<!-- once只可以点击一次 -->
<button @click.once='showBtn'>self</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
showInfo(){
console.log("测试信息")
},
showBtn(){
console.log("按钮信息")
},
showBox(){
console.log("div")
}
},
})
</script>
</body>
</html>
v-model双向绑定
<!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>Document</title>
</head>
<body>
<div id="app">
<p> java2 有 {{num}} 人</p>
<input type="text" v-model="num">
<input type="checkbox" :checked='flag'>
<button @click='change'>切换</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg:'java2',
num:0,
flag:true
},
methods: {
change(){
this.flag = !this.flag;
}
},
})
</script>
</body>
</html>
简易计算器
<!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>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="first">
<select v-model="fuhao">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="second">
<button @click='jisuan'>=</button>
<input type="text" v-model="rueslt">
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
rueslt: 0,
first: 0,
second: 0,
fuhao: '+',
},
methods: {
jisuan() {
switch (this.fuhao) {
case '+':
this.rueslt = parseFloat(this.first) + parseFloat(this.second);
break;
case '-':
this.rueslt = parseFloat(this.first) - parseFloat(this.second);
break;
case '*':
this.rueslt = parseFloat(this.first) * parseFloat(this.second);
break;
case '/':
this.rueslt = parseFloat(this.first) / parseFloat(this.second);
break;
}
}
},
})
</script>
</body>
</html>
通过class赋予样式
<!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>Document</title>
<style>
.fontred {
color: red
}
.fontsize {
font-size: 16px
}
.fontgreen {
color: green
}
</style>
</head>
<body>
<div id="app">
<h2 class="fontred fontsize">class赋予样式</h2>
<!-- 绑定数据 -->
<h2 :class="fred">class赋予样式</h2>
<!-- 绑定数组 -->
<h2 :class="['fontred','fontsize']">class赋予样式</h2>
<!-- 绑定对象 -->
<h2 :class="{'fontgreen':true}">class赋予样式</h2>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
fred: 'fontred',
}
})
</script>
</body>
</html>
v-for
<!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>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,key) in user" >{{key}}:{{item}}</li>
<hr>
<li v-for="(item, index) in list" :key="item.id">
{{item.id}},{{item.name}}，{{item.age}},{{item.birthday}}
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
// 对象
user:{
id:'10001',
name:'张三',
age:33,
birthday:new Date()
},
arr:[0,2,3,4],
// 数组中的对象
list:[
{ id:'10001', name:'张三', age:33, birthday:new Date() },
{ id:'10001', name:'张三', age:33, birthday:new Date() },
]
}
})
</script>
</body>
</html>
添加成员
<!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>Document</title>
</head>
<body>
<div id="app">
<input type="text" name="" v-model="id" id="" placeholder="用户id">
<input type="text" name="" v-model='name' id="" placeholder="用户名称">
<button @click="insert">添加</button>
<table border="2" cellspacing='0' cellpadding='10'>
<thead>
<tr>
<th>用户Id </th>
<th>用户名称</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="index">
<th>{{item.id}}</th>
<th>{{item.name}}</th>
<th>{{item.birthday}}</th>
</tr>
</tbody>
</table>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
list: []
},
methods: {
insert() {
var obj = { 'id': this.id, 'name': this.name, 'birthday': new Date() };
this.list.push(obj)
this.id = this.name = ''
}
},
})
</script>
</body>
</html>
v-if和v-show的使用
<!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>Document</title>
</head>
<body>
<div id="app">
<!-- 不经常改变或使用的 v-if -->
<h1 v-if="flag">这是v-if的内容</h1>
<!-- 经常切换的显示或消失 v-show -->
<h1 v-show="flag">这是v-show的内容</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
flag:true
}
})
</script>
</body>
</html>
v-if补充
<!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>Document</title>
</head>
<body>
<div id="app">
<!-- 不经常改变或使用的 v-if -->
<h1 v-if="flag">111111</h1>
<h1 v-else>222222</h1>
<h1 v-if="score>80">优秀</h1>
<h1 v-else-if="score<60">不及格</h1>
<h1 v-else>及格</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: false,
score: 88
}
})
</script>
</body>
</html>
网友评论