1.插值语法和指令语法的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值语法和指令语法</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>插值语法</h1>
<h3>你好:{{name}}</h3>
<h1>指令语法</h1>
<a v-bind:href="webUrl">{{webName}}</a>
<a href="#" v-bind:del="del">删除</a>
<a href="" :chage="chage">修改</a>
<h3>ID:{{user.id}} 姓名:{{user.name}} 性别:{{user.sex}}</h3>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const v = new Vue({
el:'#box',
data:{
name:'张三',
webName:'百度',
webUrl:"http://www.baidu.com",
del:"101",
chage:"101",
user:{
id:1,
name:'张三',
sex:'男'
}
}
});
</script>
</body>
</html>
2.数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>单项数据绑定</h1>
用户名:<input type="text" name="name" v-bind:value="name"/><br>
<h1>双向数据绑定</h1>
用户名:<input type="text" name="name" v-model:value="name"/><br>
<h1>单项数据绑定</h1>
用户名:<input type="text" name="name" :value="name"/><br>
<h1>双向数据绑定</h1>
用户名:<input type="text" name="name" v-model="name"/><br>
</div>
<script type="text/javascript">
const v = new Vue({
data:function(){
return{
name:'张三'
}
}
});
setTimeout(() => {
v.$mount("#box");
},3000);
</script>
</body>
</html>
3.数据代理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue - 数据代理</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<script type="text/javascript">
Vue.config.productionTip = false;
let user = {
age:18,
name:'张三'
}
let rSex = "男";
Object.defineProperty(user,'sex',{
configurable:true,
enumerable:true,
get:()=>{
return rSex;
},
set:(value)=>{
rSex = value;
}
})
for(let key in user){
console.log(user[key]);
}
setTimeout(()=>{
rSex = "女";
},3000);
console.log(user);
</script>
</body>
</html>
4.插值语法二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue插值语法2</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>你好{{name}}</h1>
<h1>{{1+1}}</h1>
<h1>{{1==1}}</h1>
<h1>{{$options}}</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
name:'张三'
}
})
console.log(vm);
</script>
</body>
</html>
5.点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的点击事件</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.myul{
width: 300px;
height: 90px;
overflow-y: auto;
}
.myul > li{
width: 100%;
height: 20px;
}
.myul > li:nth-child(odd){
background-color: coral;
}
</style>
</head>
<body>
<div id="box">
<h1 v-on:click="msg">你点我试试</h1>
<button type="button" @click="deleteUser(1001,$event)">删除</button><br>
<a href="http://www.baidu.com" @click.prevent="baiduMsg">阻止默认行为</a><br><br><br><br>
<div @click="msg2" style="width: 300px;height: 200px;background-color: aquamarine;">
<button type="button" @click.stop="msg1">阻止事件冒泡</button>
</div><br>
<button type="button" @click.once="delete2">删除2(只执行一次)</button>
<ul class="myul" @scroll="mywhell">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
methods:{
msg(){
alert("试试就试试");
},
deleteUser(uid,event){
alert("删除成功"+1001);
console.log(event);
},
baiduMsg(){
alert("点击了百度");
},
msg1(){
alert("消息1触发");
},
msg2(){
alert("消息2触发");
},
delete2(){
alert("我被删除了");
},
mywhell(){
console.log("正在滚动");
}
}
})
</script>
</body>
</html>
6.键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" placeholder="请输入用户名" @keydown="userName"/><br>
<input type="text" placeholder="自定义别名" @keydown.caps-lock="capsLock"><br>
<input type="text" placeholder="组合按键" @keydown.ctrl.s="save">
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
methods:{
userName(e){
console.log(e.key,e.keyCode);
},
capsLock(){
console.log("你打开了大小写");
},
save(){
console.log("保存成功");
}
}
})
</script>
</body>
</html>
7.插值语法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值语法实现</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
姓名:<input type="text" v-model="name"><br>
公司:<input type="text" v-model="company"><br>
<h2>{{name}}@{{company}}.com</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
name:'',
company:''
}
})
</script>
</body>
</html>
8.方法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过方法实现</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
姓名:<input type="text" v-model="name"><br>
公司:<input type="text" v-model="company"><br>
<h2>{{email()}}</h2>
<h2>{{email()}}</h2>
<h2>{{email()}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
name:'',
company:''
},
methods:{
email(){
console.log("执行");
return this.name + "@" + this.company + ".com";
}
}
})
</script>
</body>
</html>
9.计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
姓名:<input type="text" v-model="name"><br>
公司:<input type="text" v-model="company"><br>
<h2>{{email}}</h2>
<h2>{{email}}</h2>
<h2>{{email}}</h2>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
name:'',
company:''
},
computed:{
email:{
get(){
console.log("执行")
return this.name + "@" + this.company + ".com";
}
}
}
})
</script>
</body>
</html>
10.计算属性的简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性的简写</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
姓名:<input type="text" v-model="name"><br>
公司:<input type="text" v-model="company"><br>
<h2>{{email}}</h2>
<h2>{{email}}</h2>
<h2>{{email}}</h2>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
name:'',
company:''
},
computed:{
email:function(){
console.log("执行")
return this.name + "@" + this.company + ".com";
}
}
})
</script>
</body>
</html>
11.天气案例-“监视”属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>今天的天气是{{weather}}</h1>
<button type="button" @click="change">切换天气</button>
<button type="button" @click="isHot = !isHot">切换天气简洁版</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
isHot:true
},
computed:{
weather(){
return this.isHot ? '炎热' : '凉爽';
}
},
methods:{
change(){
this.isHot = !this.isHot;
}
}
})
setTimeout(() =>{
vm.$watch('isHot',{
handler(nv,ov){
console.log("isHot被修改了");
console.log(nv,ov);
}
})
},5000);
</script>
</body>
</html>
12.深度“监视”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>{{number.a}}</h1>
<button type="button" @click="number.a++">number增加</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
number:{
a:1,
b:5
}
}
,watch:{
number:{
deep:true,
handler(nv,ov){
console.log("number被修改了");
console.log(nv,ov);
}
}
}
})
</script>
</body>
</html>
13.样式绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
.ball{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.ballRadius{
border-radius: 50%;
}
.ballAlign{
text-align: center;
font-size: 35px;
}
.ballLine{
line-height: 200px;
color: azure;
}
</style>
</head>
<body>
<div id="box">
<div class="ball" :class="ballRadius">
{{ball}}
</div>
<div class="ball" :class="ballStyle">
{{ball}}
</div>
<div class="ball" :class="ballObj" @click="ballObj.ballRadius = !ballObj.ballRadius">
{{ball}}
</div>
<div class="ball" :class="ballObj" :style="ballColor">
{{ball}}
</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
ball:'这是一个球',
ballRadius:'ball-radius',
ballStyle:['ballRadius','ballAlign','ballLine'],
ballObj:{
ballRadius:true,
ballAlign:true,
ballLine:true
},
ballColor:{
color: 'green',
'font-size': '20px'
}
}
})
</script>
</body>
</html>
14.条件渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<div v-show="false">第一个{{ball}}</div>
<div v-show="1===1">第二个{{ball}}</div>
<div v-if="false">第三个{{ball}}</div>
<h1 v-show="number === 1">Angualr</h1>
<h1 v-show="number === 2">React</h1>
<h1 v-show="number === 3">Vue</h1>
<button type="button" @click="number++">切换</button>
<h1 v-if="number === 1">Angualr</h1>
<h1 v-else-if="number === 2">React</h1>
<h1 v-else-if="number === 3">Vue</h1>
<h1 v-else>都不会</h1>
<button type="button" @click="number++">切换</button>
<template v-if="number === 4">
<h1>Angualr</h1>
<h1>React</h1>
<h1>Vue</h1>
</template>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
ball:'球',
number:1
}
})
</script>
</body>
</html>
15.列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="u in userList">
id:{{u.id}} 姓名:{{u.name}} 年龄:{{u.age}}
</li>
</ul>
<ul>
<li v-for="(u,index) in userList">
序号:{{index+1}} 姓名:{{u.name}} 年龄:{{u.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
userList:[
{id:'1001',name:'张三',age:18},
{id:'1002',name:'李四',age:28},
{id:'1003',name:'王五',age:38}
]
}
})
</script>
</body>
</html>
16.key的原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>key的原理</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="u in userList" :key="u.id">
姓名:{{u.name}} 年龄:{{u.age}}
<input type="text" />
</li>
</ul>
<button type="button" @click="addUser">添加数据</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
userList:[
{id:'1001',name:'张三',age:18},
{id:'1002',name:'李四',age:28},
{id:'1003',name:'王五',age:38}
]
},
methods:{
addUser(){
var u = {id:'1004',name:'赵六',age:48};
this.userList.push(u);
}
}
})
</script>
</body>
</html>
17.音乐搜索案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音乐搜索案例(计算属性)</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
搜索: <input type="text" v-model="searchValue">
<button @click="sortType = !sortType">排序</button>
<ul>
<li v-for="m in searchList" :key="m.id">
<div style='width:300px;float: left;'>
ID :{{m.id}}音乐:{{m.name}}
</div>
<div style='width:300px;float: left;'>
歌手:{{m.sname}}
</div>
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
searchValue:'',
musicList:[],
sortType:true
},
computed:{
searchList(){
const arr = this.musicList.filter((p) => {
if(p.name.indexOf(this.searchValue) !== -1 || p.sname.indexOf(this.searchValue) !== -1){
return true;
}else{
return false;
}
});
arr.sort((p1,p2) => {
if(this.sortType){
return p1.id-p2.id;
}else{
return p2.id-p1.id;
}
});
return arr;
}
}
})
vm.musicList = [
{id:'1', name:'想唱就唱',sname:'张含韶'}
,{id:'2', name:'冰点与沸点',sname:'张含韶'}
,{id:'3', name:'夕阳无限好',sname:'陈奕迅'}
,{id:'4', name:'爱的证明',sname:'沈建祥'}
,{id:'5', name:'刻下纹身之后' ,sname:'小鸣'}
,{id:'6', name:'双面人' ,sname:'伍佰'}
,{id:'7', name:'长情' ,sname:'黎明'}
,{id:'8', name:'我得你' ,sname:'张学友'}
,{id:'9', name:'人人望放假' ,sname:'张学友'}
,{id:'10', name:'太平洋的风' ,sname:'胡德夫'}
,{id:'11', name:'吻下留人' ,sname:'许志安'}
,{id:'12', name:'顺时针' ,sname:'梁咏琪'}
,{id:'13', name:'回来我的爱' ,sname:'阳一'}
,{id:'14', name:'两只蝴蝶' ,sname:'庞龙'}
,{id:'15', name:'老鼠爱大米' ,sname:'杨臣刚'}
,{id:'16', name:'丁香花' ,sname:'唐磊'}
,{id:'17', name:'爱你' ,sname:'冷草莓'}
,{id:'18', name:'美梦成真' ,sname:'冷草莓'}
,{id:'19', name:'老鼠爱大米' ,sname:'huanggm2'}
,{id:'20', name:'谢谢你的爱1999' ,sname:'cznana'}
,{id:'21', name:'老鼠爱大米' ,sname:'英文版'}
,{id:'22', name:'猪之歌' ,sname:'香香'}
,{id:'23', name:'“吻别”英文版' ,sname:'Michael..'}
,{id:'24', name:'别说我的眼泪你无..' ,sname:'东来东往'}
,{id:'25', name:'追杀邱比特' ,sname:'蔡依林'}
];
</script>
</body>
</html>
18.html标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html标签</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<p>{{text}}</p>
<p v-html="text"></p>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
text:"<b>这里显示一些内容</b>"
}
})
</script>
</body>
</html>
19.set的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>set方法的使用</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>{{user.age}}岁</h1>
<h1 v-if="user.sex">{{user.sex}}性</h1>
<button type="button" @click="user.age++">增加年龄</button>
<button @click="addSex">添加性别为男性</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
user:{
age:1
}
},
methods:{
addSex(){
Vue.set(vm.user,'sex','男');
}
}
})
console.log(vm);
</script>
</body>
</html>
20.性能优化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>性能优化</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<p>{{text}}</p>
<p v-html="text"></p>
<div v-pre v-show="false">
<h1>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
</div>
{{text}}
{{text}}
{{text}}
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
text:"<b>这里显示一些内容</b>"
}
})
</script>
</body>
</html>
21.自定义指令 - 全局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 v-my-title="title"></h1>
<h2 v-my-title>这个也想居中</h2>
</div>
<script>
Vue.config.productionTip = false;
Vue.directive('my-title',function(el, binding){
el.style.color = "red";
el.style.textAlign = "center";
if(binding.value.length > 0){
el.innerHTML = "新华社:"+binding.value + "<hr>";
}
});
const vm = new Vue({
el:'#box',
data:{
title:"《人民的名义》总监制李学政:王立科曾想让该剧停播"
}
})
</script>
</body>
</html>
22.自定义指令 - 局部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部 - 自定义指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 v-my-title="title"></h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
title:"国庆节快乐"
},
directives:{
'my-title':{
bind(el, binding){
el.innerHTML = binding.value.split("").reverse().join("");
}
}
}
})
</script>
</body>
</html>
23.vue的生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的生命周期(二)</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 :style="{opacity}">渐变效果</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
opacity:1
},
methods:{
},
mounted(){
console.log("我执行了");
setInterval(() =>{
this.opacity <= 0 ? this.opacity=1 : this.opacity -= 0.1;
},100);
}
})
</script>
</body>
</html>
24.组件的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件的基本使用</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<ntitle></ntitle>
<ntitle></ntitle>
<ntitle></ntitle>
<ntitle></ntitle>
</div>
<script>
Vue.config.productionTip = false;
const ntitle = Vue.extend({
template:`
<div>
<h1>{{title}}</h1>
<h3>编辑:{{name}}</h3>
</div>
`,
data(){
return {
title:'科学家研究表明,不吃饭会饿。',
name:'张三'
}
}
})
const vm = new Vue({
el:'#box',
components:{
ntitle
}
})
</script>
</body>
</html>
25.组件的基本使用二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件的基本使用</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<ntitle></ntitle>
<ntitle></ntitle>
<ntitle></ntitle>
<ntitle></ntitle>
</div>
<div id="box1">
<ntitle></ntitle>
</div>
<script>
Vue.config.productionTip = false;
const ntitle = Vue.extend({
template:`
<div>
<h1>{{title}}</h1>
<h3>编辑:{{name}}</h3>
</div>
`,
data(){
return {
title:'科学家研究表明,不吃饭会饿。',
name:'张三'
}
}
})
const vm = new Vue({
el:'#box',
components:{
ntitle
}
})
const vm1 = new Vue({
el:'#box1'
})
</script>
</body>
</html>
26.组件的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件的嵌套</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<refrigerator></refrigerator>
<br>
<br>
<refrigerator></refrigerator>
</div>
<script>
Vue.config.productionTip = false;
const elephant = Vue.extend({
template:`
<div>
<h1>{{name}}</h1>
<h3>体重:{{weight}}</h3>
</div>
`,
data(){
return {
name:'大象',
weight:'3t'
}
}
})
const refrigerator = Vue.extend({
template:`
<div>
<h1>{{name}}</h1>
<elephant></elephant>
</div>
`,
data(){
return {
name:'海尔冰箱'
}
},
components:{
elephant
}
});
const vm = new Vue({
el:'#box',
components:{
refrigerator
}
})
</script>
</body>
</html>