VUE学习进度一
1.初识Vue
1.1Vue实例+绑定容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- cdn -->
<!-- 开发版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
<!-- 生产版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
<script type="text/javascript" src="./js/vue.js"></script>
<!-- <script type="text/javascript" src="./js/vue.min.js"></script> -->
<title>Document</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="root">
name:{{name}}<br>
age:{{age}}<br>
</div>
<script type="text/javascript">
Vue.config.productionTip = false ;//启动Vue禁止出现报错信息
//Vue实例
new Vue({
el:"#root",//le指定Vue为哪个容器服务
data: {//data数据供el指定的容器使用
name:"尚硅谷",
age:"20"
}
});
</script>
</body>
</html>
Vue模板语法
2.1插值语法{{}}+指令语法v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- cdn -->
<!-- 开发版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
<!-- 生产版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
<script type="text/javascript" src="../js/vue.js"></script>
<!-- <script type="text/javascript" src="./js/vue.min.js"></script> -->
<title>Document</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="root">
<!-- 插值语法 -->
<h1>你好,{{name}},我年龄是{{age}}岁</h1>
<!-- 指令语法 -->
<a v-bind:href="url">点击我跳转百度</a><br />
<a :href="url">点击我跳转百度</a><br />
</div>
<script type="text/javascript">
Vue.config.productionTip = false ;//启动Vue禁止出现报错信息
//Vue实例
new Vue({
el:"#root", //le指定Vue为哪个容器服务
data: { //data数据供el指定的容器使用
name:"尚硅谷",
age:"20",
url:"http://www.baidu.com",
}
});
</script>
</body>
</html>
3.数据绑定
3.1数据绑定(单向绑定v-bind+双向绑定v-model)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- cdn -->
<!-- 开发版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
<!-- 生产版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
<script type="text/javascript" src="../js/vue.js"></script>
<!-- <script type="text/javascript" src="./js/vue.min.js"></script> -->
<title>Document</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="root">
<!-- 普通写法 -->
<h1>普通写法</h1>
单向[表面修改本质没改]
<input type="text" v-bind:value="name"><br/>
双向[表面修改-->本质修改]
<input type="text" v-model:value="name"><hr color="red">
<!-- 缩略版本 -->
<h1>缩略版本</h1>
单向[表面修改本质没改]
<input type="text" :value="name"><br/>
双向[表面修改-->本质修改]
<input type="text" v-model="name">
</div>
<script type="text/javascript">
Vue.config.productionTip = false ;//启动Vue禁止出现报错信息
//Vue实例
new Vue({
el:"#root",//le指定Vue为哪个容器服务
data: {//data数据供el指定的容器使用
name:"尚硅谷",
age:"20"
}
});
</script>
</body>
</html>
4.el和data的两种写法
4.1el和data的两种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<script type="text/javascript" src="../js/vue.js" ></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1>name:{{name}}{{age}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
// const v = new Vue({
// //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第一种写法@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// // el: "#root",
// data: {
// name: "尚真",
// },
// });
// //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@第二种写法@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// // v.$mount("#root");
// setTimeout(() =>
// {
// v.$mount("#root");
// },1000)
const v = new Vue({
el: "#root",
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@方法一:对象式@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// data: {
// name: "尚真",
// age: 28,
// },
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@方法二:函数式@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//data:function(){} this指Vue对象 --->简写:data(){} (对)
//data:()=>{} this指Window对象 (错)
data()
{
console.log(this);
//注意此处的return {} “{”要与return在一行
return {
name:"尚真",
age:"20"
}
},
});
</script>
</html>
5.MVVM模型
5.1MVVM模型
模板 --Vue实例对象–data中数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1>我叫{{name}}</h1>
<h1>地址{{address}}</h1>
<h1>测试1:{{1+1}}</h1>
<h1>测试2:{{$emit}}</h1>
<h1>测试3:{{$options}}</h1>
<h1>测试4:{{_c}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
const vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
name:"HAUCM",
address:"河南",
},
});
console.log(vm);
</script>
</html>
6.数据代理
6.1Object.defineProperty()[对对象的方法]
总结
注意:
情况一:
情况二:
程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
let number = 19;
let person = {
name: 'John',
address: '河南',
}
Object.defineProperty(person, 'age',{
// enumerable:true,//可以遍历
// writable:true,//可以修改值
// configurable:true,//可以删除属性
//读取age执行,返回age值【通过修改number】
get()
{
console.log("读取了age属性");
return number;
},
//修改age执行,传入具体修改值
set(value)
{
console.log("修给了age属性",value);
number = value;
}
});
for(let key in person)
{
console.log(person[key]);
}
</script>
</html>
age的set()和get()[上面程序执行的结果]
6.2数据代理(通过obj2读取(修改)obj的x)
通过obj2读取(修改)obj的x
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
let obj = {x:100}
let obj2 = {y:200}
//通过obj2读取(修改)obj的x
Object.defineProperty(obj2, "x",
{
//访问
get()
{
return obj.x;
},
//修改
set(value)
{
obj.x = value;
}
})
</script>
</html>
6.3 Vue中的数据代理(vm._data = data)
总结
解释
原理
7.事件处理
7.1事件处理基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1>欢迎来到{{name}}</h1>
<button v-on:click="showInfo1">点击按钮显示提示信息1</button>
<button @click="showInfo2($event,66)">点击按钮显示提示信息2</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
name: "尚硅谷",
},
methods: {
showInfo1()
{
// console.log("");//第一个参数是event事件
alert("你好,111");
},
showInfo2(event,number)
{
console.log(event,number)
alert("你好,222");
}
}
});
</script>
</html>
7.2事件修饰符
可以叠加:
//以下效果相同,但执行顺序不同
@click.stop.prevent="showInfo"
@click.prevent.stop="showInfo"
总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
<style>
*
{
margin: 20px;
}
#demo1 {
background-color: aquamarine;
/* width: 100px; */
height: 100px;
}
.box1{
background-color: aqua;
height: 100;
}
.box2{
padding: 5px;
background-color: rgb(236, 127, 255);
height: 50px;
}
.list{
/* width: 500px; */
height: 200px;
background-color: aqua;
overflow:scroll;
}
li{
height: 200px;
}
</style>
</head>
<body>
<div id="root">
<!-- <h1>名称:{{name}}</h1> -->
<!-- @click.prevent阻止默认事件发生:点击时先提示,后跳转的情况 -->
<a href="http://www.mycompany.com" @click.prevent="showInfo">阻止默认</a>
<hr height="5px" color="red">
<!-- 阻止冒泡传递:button发生,向上传递div也发生 -->
<div id="demo1" @click="showInfo">
<button @click.stop="showInfo">阻止冒泡</button>
</div>
<hr height="5px" color="red">
<!-- 点击事件触发一次 -->
<button @click.once="showInfo">只有一次</button>
<hr height="5px" color="red">
<!-- 捕获事件 -->
<div class="box1" @click.capture="showMessage(1)">
div1
<div class="box2" @click="showMessage(2)">
div2
</div>
</div>
<hr height="5px" color="red">
<!-- 只有点击该元素才会触发 -->
<div id="demo1" @click.self="showInfo">
<button @click="showInfo">阻止冒泡</button>
</div>
<hr height="5px" color="red">
<!-- 滚动触发 -->
<!-- @wheel:鼠标滚动轮 -->
<!-- @scroll:滚动条 + 鼠标滚动轮 -->
<ul class="list" @wheel="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
name: "尚硅谷",
},
methods:{
showInfo(event)
{
// 阻止默认发生
// event.preventDefault();
//阻止冒泡
// event.stopPropagation();//stop停止 Propagation传播
// alert("你好1");
console.log(event.target);
},
showMessage(number)
{
console.log(number);
},
demo()
{
for(let i = 0; i < 1000; i++)
console.log("@");
console.log("完成");
}
}
});
</script>
</html>
7.3.键盘事件(keyup,keydown[ctrl,enter…])
一般,ctrl,alt,shift,meta,tab配合keydown使用
ctrl+y组合键
@keyup.ctrl.y="showInfo"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<!-- @keyup.tab错误 @keydown.tab正确 -->
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
},
methods: {
showInfo(e)
{
console.log("字符编码:"+e.keyCode+"\t字符名称:"+e.key+"\t事件类型:"+e.type);
// if(e.keyCode !== 13) return ;
console.log(e.target.value);
}
}
});
</script>
</html>
8. 计算属性
8.1姓名案例_插值语法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<input type="text" v-model="firstname"><br>
<input type="text" v-model="secondname"><br>
<span>{{firstname}}-{{secondname}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
firstname: "张",
secondname: "三",
},
});
</script>
</html>
8.2姓名案例_methods实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<input type="text" v-model="firstname"><br>
<input type="text" v-model="secondname"><br>
<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
firstname: "张",
secondname: "三",
},
methods: {
fullName()
{
return this.firstname.slice(0,3) + "-" + this.secondname;
}
}
});
</script>
</html>
8.3姓名案例_计算属性实现、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<input type="text" v-model="firstname"><br>
<input type="text" v-model="secondname"><br>
<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
firstname: "张",
secondname: "三",
},
computed:{
fullName:{
//get作用?读取fullName时调用,返回值作为fullName的值
//get什么时候调用?1.初次读fullName时(会缓存)2.依赖项发生改变
get()
{
return this.firstname+"-"+this.secondname;
},
//修改fullName时调用
set(value)
{
let arr = value.split("-");
this.firstname = arr[0];
this.secondname = arr[1];
}
}
}
});
</script>
</html>
8.4计算属性简写
当只涉及get()读取时可以简写, 注意调用时还是属性,不是函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<input type="text" v-model="firstname"><br>
<input type="text" v-model="secondname"><br>
<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
firstname: "张",
secondname: "三",
},
//当只涉及get读取时,可以简写,
// 注意调用时还是属性,不是函数()
computed:{
fullName()
{
return this.firstname+"-"+this.secondname;
},
}
});
</script>
</html>
9.监视属性
9.1天气样例 _监视属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1>今天天气很{{info}}</h1>
<button @click="change">更换</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
let vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
isHot:true,
},
computed:{
info()
{
return this.isHot ? "凉爽" :"炎热";
}
},
methods:{
change()
{
this.isHot = !this.isHot;
}
},
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@方法一@@@@@@@@@@@@@@@@@@@@@@@@@@@
//监视isHot
watch:{
immediate:true,//初始化调用一下
isHot:{
//isHot改变,执行handler()
handler(newvalue,oldvalue)
{
console.log("isHot改变了",newvalue,oldvalue);
}
}
}
});
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@方法二@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// vm.$watch('isHot',{
// immediate:true,
// handler(newvalue,oldvalue)
// {
// console.log("isHot改变了",newvalue,oldvalue);
// }
// })
</script>
</html>
9.2天气样例_深度监视【deep:true,】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1>今天天气很{{info}}</h1>
<button @click="change">更换</button>
<h1>{{number.a}}</h1>
<button @click="add_a">点击a+1</button>
<h1>{{number.b}}</h1>
<button @click="add_b">点击b+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
let vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
isHot:true,
number:{
a:1,
b:2,
}
},
computed:{
info()
{
return this.isHot ? "凉爽" :"炎热";
}
},
methods:{
change()
{
this.isHot = !this.isHot;
},
add_a()
{
this.number.a++;
// this.number.b++;
},
add_b()
{
// this.number.a++;
this.number.b++;
}
},
watch:{
// immediate:true,//初始化调用一下
isHot:{
//isHot改变,执行handler()
handler(newvalue,oldvalue)
{
console.log("isHot改变了",newvalue,oldvalue);
}
},
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@所有监视@@@@@@@@@@@@@@@@@@@@@@@@
//监视多级结构中的所有属性变化
number:{
deep:true,//深度监视,所有number中的东西
handler()
{
console.log("number发生变化");
}
}
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@分别监视@@@@@@@@@@@@@@@@@@@@@@@@@
// 'number.a':{
// handler(){
// console.log("a改变了");
// }
// },
// 'number.b':{
// handler(){
// console.log("b改变了");
// }
// }
}
});
</script>
</html>
9.3天气样例_深度监视 (简写)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1>今天天气很{{info}}</h1>
<button @click="change">更换</button>
<!-- <h1>{{number.a}}</h1>
<button @click="add_a">点击a+1</button>
<h1>{{number.b}}</h1>
<button @click="add_b">点击b+1</button> -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
const vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
isHot:true,
},
computed:{
info()
{
return this.isHot ? "凉爽" :"炎热";
}
},
methods:{
change()
{
this.isHot = !this.isHot;
}
},
watch:{
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@正常写法@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
isHot:{
immediate:true,
deep:true,
handler(newvalue,oldvalue)
{
console.log("isHot改变了",newvalue,oldvalue);
}
}
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@简写【只有handler()函数时】@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// isHot(newvalue,oldvalue)
// {
// console.log("isHot改变了",newvalue,oldvalue);
// }
},
});
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@正常写法@@@@@@@@@@@@@@@@@@@@@@@
// vm.$watch('isHot',{
// immediate:true,
// deep:true,
// handler(newvalue,oldvalue)
// {
// console.log("isHot改变了",newvalue,oldvalue);
// }
// })
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@简写@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// vm.$watch('isHot',function(newvalue,oldvalue)
// {
// console.log("isHot改变了",newvalue,oldvalue);
// })
</script>
</html>
9.4计算属性和监视属性比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<input type="text" v-model="firstname"><br>
<input type="text" v-model="secondname"><br>
<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
firstname: "张",
secondname: "三",
fullName: "张-三",
},
watch:{
firstname(newvalue,oldvalue)
{
setTimeout(()=>{
this.fullName = newvalue + "-" + this.secondname;
},1000);
// this.fullName = newvalue + "-" + this.secondname;
console.log("First name changed");
},
secondname(newvalue,oldvalue)
{
this.fullName = this.firstname + "-" + newvalue;
console.log("Second name changed");
}
},
});
// computed:{
// fullName:{
// //get作用?读取fullName时调用,返回值作为fullName的值
// //get什么时候调用?1.初次读fullName时(会缓存)2.依赖项发生改变
// get()
// {
// return this.firstname+"-"+this.secondname;
// },
// //修改fullName时调用
// set(value)
// {
// let arr = value.split("-");
// this.firstname = arr[0];
// this.secondname = arr[1];
// }
// }
</script>
</html>
10.绑定样式
10.1绑定class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
<style>
.demo1{
border: 5px solid black;
width: 300px;
height: 300px;
}
/* 测试1 */
.demo2{
background-color:blue;
width: 300px;
height: 300px;
}
.demo3{
background-color:red;
width: 300px;
height: 300px;
}
.demo4{
background-color:yellow;
width: 300px;
height: 300px;
}
/* 测试2 */
.demo5{
background-color:yellow;
width: 300px;
height: 300px;
}
.demo6{
font-size: 40px;
}
.demo7{
border-radius: 30%;
}
</style>
</head>
<body>
<div id="root">
<!-- 绑定class样式--字符串写法:样式的类名不确定,需要动态指定 -->
<div class="demo1" :class="class_demo" @click="change_demo">
<h1>大家好</h1>
</div>
<br><br><br>
<!-- 绑定class样式--数组写法: 样式个数不确定,样式的名子不确定-->
<!-- 此处是将数组中的所有class值都应用 -->
<div class="demo1" :class="class_Arr">
<h1>大家好</h1>
</div>
<br><br><br>
<!-- 绑定class样式--对象写法:绑定的个数,名称确定,但要动态确定用不用 -->
<div class="demo1" :class="class_obj">
<h1>大家好</h1>
</div>
<br><br><br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
const vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
class_demo:"demo2",
class_Arr:["demo5","demo6","demo7"],
class_obj:{
"demo6":true,
"demo7":true,
}
},
methods: {
change_demo()
{
const arr = ["demo2","demo3","demo4"];
let idx = Math.floor(Math.random()*3);
this.class_demo = arr[idx];
console.log(idx);
},
},
});
// console.log(this.class_demo);
</script>
</html>
10.2绑定style【不常用(略)】
11.条件渲染
11.1(v-show,v-if)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<!-- display:hidden 而已,架构存在-->
<!-- 若页面变化次数较多,建议使用v-show -->
<h1 v-show="isHidden">你好,{{name}} </h1>
<button @click="change">点击后相反操作</button>
<hr color="red">
<!-- 结构不存在 -->
<h1>n:{{n}}</h1>
<button @click="add">点击后加1</button>
<h1 v-if="n===1">HTML1</h1>
<h1 v-else-if="n===2">CSS2</h1>
<h1 v-else-if="n===3">JS3</h1>
<h1 v-else>Vue4</h1>
<hr color="red">
<!-- template不显示 -->
<template v-if="n===1">
<h1>HTML1</h1>
<h1>CSS2</h1>
<h1>JS3</h1>
<h1>Vue4</h1>
</template>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
const vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
name:"上官",
isHidden:true,
n:0,
},
methods:{
change()
{
this.isHidden = !this.isHidden;
},
add()
{
this.n++;
}
}
});
</script>
</html>
12.列表渲染
12.1基本列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 遍历数组 -->
<ol>
<!-- 记得给每一个Li确定唯一的id -->
<li v-for="(p,index) in persons" :key="p.id">
{{p.name}}---{{p.age}}---{{p.id}}
</li>
</ol>
<!-- 对象 -->
<ul>
<!-- :key="k"意思:[:]用来解释k的来源是data -->
<li v-for="(value,k) in cars" :key="k">
{{k}}:{{value}}
</li>
</ul>
<!-- 字符串 -->
<ul>
<li v-for="(ch,index) in str" :key="index">
{{ch}}:{{index}}
</li>
</ul>
<!-- 遍历次数 -->
<ul>
<li v-for="(num,index) in 5" :key="index">
{{num}}:{{index}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
const vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
persons:[
{id:"001",name:"张三",age:"18"},
{id:"002",name:"李四",age:"19"},
{id:"003",name:"王五",age:"20"},
],
cars:{
name:"奥迪A6",
price:"56w",
color:"red",
address:"河南",
},
str:"hello",
},
methods:{
}
});
</script>
</html>
12.2key作用与原理
index作为key
id作为key
总结
12.2.1index
12.2.2id
12.3列表过滤[类似搜索功能]
computed&&watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<input type="text" placeholder="输入查询的名字:" v-model="checkname">
<ul>
<li v-for="(p,index) in filpersons" :key="p.id">
{{p.name}}---{{p.age}}---{{p.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
const vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
checkname:"",
persons:[
{id:"001",name:"马冬梅",age:"18",sex:"女"},
{id:"002",name:"周冬雨",age:"19",sex:"女"},
{id:"003",name:"周杰伦",age:"20",sex:"男"},
{id:"004",name:"温兆伦",age:"21",sex:"男"},
],
//使用watch实现时才用到
// filpersons:[],
},
computed:{
filpersons()
{
return this.persons.filter((p)=>{
return p.name.indexOf(this.checkname) !== -1;
});
}
},
// watch:{
// checkname:{
// immediate:true,
// handler(newval)
// {
// this.filpersons = this.persons.filter((p)=>{
// return p.name.indexOf(newval) !== -1;
// });
// }
// }
// },
methods:{
}
});
</script>
</html>
12.4 列表排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<input type="text" placeholder="输入查询的名字:" v-model="checkname"><br>
<button @click="sort_type = 0">原序</button><br>
<button @click="sort_type = 1">升序</button><br>
<button @click="sort_type = 2">降序</button><br>
<ul>
<li v-for="(p,index) in filpersons" :key="p.id">
{{p.name}}---{{p.age}}---{{p.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
const vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
checkname:"",
sort_type:0,//0原,1升序,2降序
persons:[
{id:"001",name:"马冬梅",age:18,sex:"女"},
{id:"002",name:"周冬雨",age:68,sex:"女"},
{id:"003",name:"周杰伦",age:38,sex:"男"},
{id:"004",name:"温兆伦",age:8,sex:"男"},
],
//使用watch实现时才用到
// filpersons:[],
},
computed:{
filpersons()
{
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.checkname) !== -1;
});
if(this.sort_type)
{
arr.sort((p1,p2)=>
{
if(this.sort_type===1)return p1.age - p2.age;
else return p2.age - p1.age;
});
}
return arr;
}
},
// watch:{
// checkname:{
// immediate:true,
// handler(newval)
// {
// this.filpersons = this.persons.filter((p)=>{
// return p.name.indexOf(newval) !== -1;
// });
// }
// }
// },
methods:{
}
});
</script>
</html>
12.5 数据监测总结(数组,对象-添加,修改等等)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1>学生信息:</h1>
<button @click="student.age++">年龄++</button><br>
<button @click="addSex">添加student的属性sex,默认男</button><br>
<button @click=" student.sex='未知' ">修改student的属性sex,未知</button><br>
<button @click="addFriend">添加一个朋友</button>
<button @click="modifyFirstname">修改为张三</button>
<button @click="addHobby">添加一个爱好:学习</button>
<button @click="modifyFirsthobby">修改第一个爱好:开车</button>
<h1>姓名:{{student.name}}</h1>
<h1>年龄:{{student.age}}</h1>
<h1 v-show="student.sex">性别:{{student.sex}}</h1>
<!-- <> -->
<hr height="5px" color="red">
<h1>爱好:</h1>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<hr height="5px" color="red">
<h1>朋友:</h1>
<ul>
<li v-for="(p,index) in student.friends" :key="p.id">
{{p.name}}---{{p.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
const vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: {
//data数据供el指定的容器使用
student:{
name:"dyh",
age:"20",
hobby:["抽烟","喝酒","烫头"],
friends:[
{name:"F2",age:"18"},
{name:"F3",age:"19"},
]
}
},
methods:{
addSex()
{
//#Case1
// Vue.set(this.student,"sex","男");
//#Case2
this.$set(this.student,"sex","男");
},
addFriend()
{
//重点
this.student.friends.unshift({name:"F1",age:"20"});
},
modifyFirstname()
{
console.log("@@@")
//对象赋值不可以[无set],对象属性赋值可以[有set]
//错误方法
// this.student.friends[0] = {name:"张三",age:"20"};
this.student.friends[0].name = "张三";
},
addHobby()
{
this.student.hobby.push("学习");
},
modifyFirsthobby()
{
console.log("@@@");
//错误
// this.hobby[0]="开车";
//正确
//#Case1
// this.student.hobby.splice(0,1,"开车");
//#Case2
// Vue.set(this.student.hobby,0,"开车");
//#Case3
this.$set(this.student.hobby,0,"开车");
}
}
});
// 添加对象属性,修改对象的属性值 Vue.set()
// 添加数组元素,修改数组元素 push,splice..
</script>
</html>
13.收集表单数据
一般做法:绑定label元素
text做法
radio
checkbox
select&&option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<form @submit.prevent="demo">
<!--
<label for="demo">账户</label>
<input type="text" id="demo">
-->
账户:<input type="text" v-model.trim="Info.account" placeholder="账户名称"><br>
密码:<input type="password" v-model="Info.passsword" placeholder="账户密码"><br>
<!-- type="number"[控制输入数字] v-model.number="Info.age"[控制输入字符串转换到number] -->
年龄:<input type="number" v-model.number="Info.age" placeholder="年龄">
性别:
<!-- name="sex"代表只能选一个 -->
男:<input type="radio" name="sex" value="男" v-model="Info.sex">
女:<input type="radio" name="sex" value="女" v-model="Info.sex">
<br>
爱好:
学习:<input type="checkbox" v-model="Info.hobby" value="study">
游戏:<input type="checkbox" v-model="Info.hobby" value="games">
吃饭:<input type="checkbox" v-model="Info.hobby" value="eat">
<br>
<!-- 下拉框 -->
选择校区:
<select v-model="Info.city">
<!-- 默认显示 -->
<option value="">所属校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="wuhan">武汉</option>
</select>
<br>
提交信息:
<textarea v-model.lazy="Info.other"></textarea>
<br>
<input type="checkbox" v-model="Info.agree"></input>阅读并接受<a href="http://www.baidu.com" target="_blank">《用户协议》</a>
<br>
<!-- 点击后默认刷新 -->
<button>提交</button>
</form>
<!-- <button>提交</button> -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
Info:{
account:"",
passsword:"",
age:"",
sex:"男",
hobby:[],
city:"beijing",
other:"",
agree:"",
}
},
methods: {
demo()
{
console.log(JSON.stringify(this.Info))
}
}
});
</script>
</html>
14.过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.2/dayjs.min.js"></script>
<title>Document</title>
<style>
.span
{
color: blue;
}
</style>
</head>
<body>
<div id="root">
<!-- <span class="span">计算属性</span> -->
<h5>时间戳:{{time}}</h5>
<h5>计算属性:{{fmtTime}}</h5>
<h5>methods实现:{{getfmtTime()}}</h5>
<h5>过滤器实现1(wucan):{{time | filterTime}}</h5>
<!-- <h5>过滤器实现:{{time | filterTime()}}</h5> -->
<h5>过滤器实现2(youcan):{{time | filterTime("YYYY-MM-DD") | cut()}}</h5>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
//全局过滤器【多个vue实例可以使用】
Vue.filter("cut",function(value){
return value.slice(0,4);
})
const vm = new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
time:1654049431800,
},
methods:{
getfmtTime()
{
return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
}
},
computed:
{
fmtTime()
{
// dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")------->返回time的格式化
// dayjs().format("YYYY-MM-DD HH:mm:ss")---------------->返回当前时间
return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");
}
},
filters:
{
//1.不传参数 2.调用方法 "time | filterTime" 或者 "time | filterTime()"
// filterTime(value)
// {
// return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
// }
//1.实现传参 2.调用方法 "time | filterTime("YYYY-MM-DD")"
filterTime(value,str="YYYY-MM-DD HH:mm:ss")//输入str,按照str方式,不输入str,按照=之后的方式
{
return dayjs(value).format(str);
},
//只有本vue实例可以使用
// cut(value)
// {
// return value.slice(0,4);
// }
}
});
</script>
</html>
15.内置指令
15.1v-text(类似{{}}插值语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1>{{name}}河南</h1>
<h1 v-text="name">河南</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
name: "你好",
},
});
</script>
</html>
15.2v-html(不好使)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<div>你好,{{name}}</div>
<div v-html="str">喝可乐咯</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
name: "杜沿河",
str:"<h1>天机</h1>",
},
});
</script>
</html>
15.3v-cloak
15.4v-once(初始化的数值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1 v-once>初始:{{n}}</h1>
<h1>目前:{{n}}</h1>
<button @click="n++">点击加一</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
n:1
},
});
</script>
</html>
15.5v-pre
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1 v-pre>hello world</h1>
<h1 v-pre>目前:{{n}}</h1>
<button v-pre @click="n++">点击加一</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
n:1
},
});
</script>
</html>
16.自定义指令
16.1函数式
big函数何时会调用?
1.一开始,加载页面
2.指令所在模板重新解析时(模板内容改变时)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1>当前值:<span v-text="n"></span></h1>
<h1>放大10倍后:<span v-big="n"></span></h1>
<button @click="n++">n++</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
name: "你好",
n:1,
},
directives:{
big(eliment,binding)
{
// big函数何时会调用,1.一开始,加载页面 2.指令所在模板重新解析时(模板内容改变时)
eliment.innerHTML = binding.value*10;
console.log(eliment)
console.log(binding)
}
}
});
</script>
</html>
16.2对象式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<h1>当前值:<span v-text="n"></span></h1>
<h1>放大10倍后:<span v-big="n"></span></h1>
<button @click="n++">n++</button>
<hr>
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@对象式【全局】@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// Vue.directive("fbind",{
// //绑定
// //指定与元素成功绑定
// bind(eliment,binding)
// {
// // console.log("bind");
// //绑定时 focus()没有用
// eliment.value = binding.value;
// },
// //呈现
// //指令所在元素被插入页面时
// inserted(eliment,binding)
// {
// // console.log("inserted");
// eliment.focus();//呈现到页面上才会有效果
// },
// //更新
// //指令所在模板被重新解析时
// update(eliment,binding)
// {
// // console.log("update");
// eliment.value = binding.value;
// }
// })
// Vue.directive("fbind",function(eliment,binding)
// {
// console.log("@@@@@@@@");
// eliment.value = binding.value;
// eliment.focus();
// })
new Vue({ //el指定Vue为哪个容器服务
el: "#root",
data: { //data数据供el指定的容器使用
name: "你好",
n:1,
},
directives:{
big(eliment,binding)
{
// big函数何时会调用,1.一开始,加载页面 2.指令所在模板重新解析时(模板内容改变时)
eliment.innerHTML = binding.value*10;
},
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@对象式【局部】@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
fbind:{
//绑定
//指定与元素成功绑定
bind(eliment,binding)
{
// console.log("bind");
//绑定时 focus()没有用
eliment.value = binding.value;
},
//呈现
//指令所在元素被插入页面时
inserted(eliment,binding)
{
// console.log("inserted");
eliment.focus();//呈现到页面上才会有效果
},
//更新
//指令所在模板被重新解析时
update(eliment,binding)
{
// console.log("update");
eliment.value = binding.value;
}
},
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@函数式【局部】@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
// fbind(eliment,binding)
// {
// console.log("@@@@@@@@");
// eliment.value = binding.value;
// eliment.focus();
// }
}
});
</script>
</html>
17.生命周期
<title>分析生命周期</title>
<script type="text/javascript" src="../js/vue.js"></script>
<div id="root" :x="n">
<h2 v-text="n"></h2>
<h2>当前的n值是:{{ n }}</h2>
<button @click="add">点我n+1</button>
<button @click="bye">点我销毁vm</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
// template:`
// <div>
// <h2>当前的n值是:{{n}}</h2>
// <button @click="add">点我n+1</button>
// </div>
// `,
data: {
n: 1
},
methods: {
add() { console.log('add')
this.n++
},
bye() {
console.log('bye')
this.$destroy()
}
},
watch: {
n() {
console.log('n变了')
}
},
beforeCreate() {console.log('beforeCreate')},
created() {console.log('created')},
beforeMount() {console.log('beforeMount')},
mounted() {console.log('mounted')},
beforeUpdate() {console.log('beforeUpdate')},
updated() {console.log('updated')},
beforeDestroy() {console.log('beforeDestroy')},
destroyed() {console.log('destroyed')},
})
</script>
初始
点我n+1
点我销毁vm
18.非单文件组件
18.1基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root1">
<!-- 3.编写标签 -->
<sl></sl>
<hr>
<he></he>
<!-- 不能用 -->
<!-- <st></st> -->
</div>
<hr>
<div id="root2">
<!-- 不能用 -->
<!-- <sl></sl> -->
<he></he>
<hr>
<st></st>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
//1.创建组件
const school = Vue.extend({
template:`
<div>
<h1>学校名称:{{name}}</h1>
<h1>学校地址:{{address}}</h1>
</div>
`,
data()
{
return {
name:"河南中医药大学",
address:"郑州",
}
}
})
const student = Vue.extend({
template:`
<div>
<h1>学生姓名:{{name}}</h1>
<h1>学生年龄:{{age}}</h1>
</div>
`,
data()
{
return {
name:"张三",
age:18,
}
}
})
const hello = Vue.extend({
template:`
<div>
<h1>Hello,{{name}}</h1>
</div>
`,
data(){
return {
name:"Tom",
}
}
})
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 全局设置 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Vue.component("he",hello)//直接使用
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 局部设置 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
new Vue({
el: "#root1",
//2.注册组件
components:{
sl:school,
}
});
new Vue({
el: "#root2",
//2.注册组件
components:{
st:student,
}
});
</script>
</html>
18.2注意点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root1">
<sl></sl>
<hr>
<sl/>
<!-- 简写 -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
// const school = Vue.extend({
// name: 'duyanhe',
// template:`
// <div>
// <h1>学校名称:{{name}}</h1>
// <h1>学校地址:{{address}}</h1>
// </div>
// `,
// data()
// {
// return {
// name:"河南中医药大学",
// address:"郑州",
// }
// }
// })
// @@@@@@@@@@@@@@@@@@@@@@@@@@ 简写 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
const school = {
name: 'duyanhe',//Vue开发工具体现的名称
template:`
<div>
<h1>学校名称:{{name}}</h1>
<h1>学校地址:{{address}}</h1>
</div>
`,
data()
{
return {
name:"河南中医药大学",
address:"郑州",
}
}
}
new Vue({
el: "#root1",
components:{
sl:school,
//school School
//'my-school' MySchool
}
});
</script>
</html>
18.3组件的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root1">
<school></school>
<student></student>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;//启动Vue禁止出现报错信息
const hello = Vue.extend({
template:`
<h1>你好,{{name}}</h1>
`,
data(){
return {
name:"dyh",
}
}
})
const school = Vue.extend({
template:`
<div>
<h1>学校名称:{{name}}</h1>
<h1>学校地址:{{address}}</h1>
<hello></hello>
</div>
`,
data()
{
return {
name:"河南中医药大学",
address:"郑州",
}
},
// 嵌套关键
components:{
hello
}
})
const student = Vue.extend({
template:`
<div>
<h1>学生姓名:{{name}}</h1>
<h1>学生年龄:{{age}}</h1>
</div>
`,
data()
{
return {
name:"张三",
age:18,
}
}
})
new Vue({
el: "#root1",
components:{
school,
student,
}
});
</script>
</html>
18.4 VueComponent函数
18.5 一个重要的内置函数
19.单文件组件(略)
enumerable可枚举的