01-自定义指令
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2 v-color>{{msg}}h2>
<h2 v-color>好谷就业力h2>
div>
<div id="app2">
<h2 v-color>{{msg}}h2>
div>
body>
<script>
Vue.directive("color", {
bind: function(el) {
el.style.color = "red";
}
})
new Vue({
el: "#app",
data: {
msg: "好谷学堂"
}
})
new Vue({
el: "#app2",
data: {
msg: "好谷二哥"
}
})
script>
html>
02-自定义指令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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2 v-color>{{msg}}h2>
<h2 v-color>好谷就业力h2>
div>
<div id="app2">
<h2 v-color>{{msg}}h2>
div>
body>
<script>
Vue.directive("color", {
inserted: function(el) {
el.style.color = "red";
}
})
new Vue({
el: "#app",
data: {
msg: "好谷学堂"
}
})
new Vue({
el: "#app2",
data: {
msg: "好谷二哥"
}
})
script>
html>
03-bind和inserted钩子函数的区别
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2 v-color>{{msg}}h2>
<h2 v-color>好谷就业力h2>
div>
<div id="app2">
<h2 v-color>{{msg}}h2>
div>
body>
<script>
Vue.directive("color", {
bind: function(el) {
console.log(el.parentNode);
el.style.color = "red";
},
inserted: function(el) {
console.log(el.parentNode);
el.style.color = "red";
}
})
new Vue({
el: "#app",
data: {
msg: "好谷学堂"
}
})
new Vue({
el: "#app2",
data: {
msg: "好谷二哥"
}
})
script>
html>
04-自定义指令传参
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2 v-color="oRed">{{msg}}h2>
div>
<div id="app2" v-color="oGreen">
<h2>{{msg}}h2>
div>
body>
<script>
Vue.directive("color", {
bind: function(el, args) {
console.log(args);
console.log(args.value);
el.style.color = args.value;
}
});
new Vue({
el: "#app",
data: {
msg: "许嵩",
oRed: "red"
}
})
new Vue({
el: "#app2",
data: {
msg: "vae",
oGreen: "green"
}
})
script>
html>
05-常见的钩子函数
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2 v-color="oRed">{{msg}}h2>
<button @click="changeMsg()">修改msgbutton>
div>
body>
<script>
Vue.directive("color", {
bind: function(el, args) {
el.style.color = args.value;
},
inserted: function(el) {
console.log("inserted");
},
update: function(el) {
console.log("修改数据时执行了update钩子函数");
},
componentUpdated: function(el) {
console.log("数据修改完执行了componentUpdated钩子函数");
},
unbind: function() {
console.log("元素与指令解绑后调用unbind钩子函数");
}
});
let vm = new Vue({
el: "#app",
data: {
msg: "八个",
oRed: "red"
},
methods: {
changeMsg() {
this.msg = "msg被修改了";
}
}
})
vm.$destroy();
script>
html>
06-私有指令
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2 v-color="oRed">{{msg}}h2>
<button @click="changeMsg()">修改msgbutton>
<br>
<input type="text" v-focus>
div>
body>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "你过来呀!",
oRed: "red"
},
methods: {
changeMsg() {
this.msg = "求求你们别打了";
}
},
directives: {
color: {
bind: function(el, args) {
el.style.color = args.value;
},
inserted: function(el) {
console.log("inserted");
},
update: function(el) {
console.log("修改数据时执行了update钩子函数");
},
componentUpdated: function(el) {
console.log("数据修改完执行了componentUpdated钩子函数");
},
unbind: function() {
console.log("元素与指令解绑后调用unbind钩子函数");
}
},
focus: {
inserted: function(el) {
el.focus();
}
}
}
});
vm.$destroy();
script>
html>
07-自定义指令简写
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2 v-color="oPurple">{{msg}}h2>
<h2 v-haogu="txt">h2>
<h2 v-erge="{color:'orange'}">字面量形式自定义指令h2>
div>
body>
<script>
Vue.directive("color", {
bind: function(el, args) {
el.style.color = args.value;
}
});
Vue.directive("erge", {
bind: function(el, args) {
el.innerHTML = args.value.color;
}
});
new Vue({
el: "#app",
data: {
msg: "Hui",
oPurple: "purple",
txt: "Yan I love You"
},
directives: {
haogu: function(el, args) {
el.innerHTML = args.value;
}
}
})
script>
html>
08-计算属性computed
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2>{{msg}}h2>
<h2>方法形式:{{formatMsg()}}h2>
<h2>方法形式:{{formatMsg()}}h2>
<h2>计算属性形式:{{msgFormat}}h2>
<h2>计算属性形式:{{msgFormat}}h2>
<button @click="changeMsg()">修改msgbutton>
div>
body>
<script>
new Vue({
el: "#app",
data: {
msg: "好谷学堂"
},
methods: {
changeMsg() {
this.msg = "已修改!"
},
formatMsg() {
console.log("方法形式每次都执行");
return this.msg.split("").join("-");
}
},
computed: {
msgFormat() {
console.log("计算属性出来的字符串只执行一次");
return this.msg.split("").join("-");
}
}
})
script>
html>
09-侦听器
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="msg">
<div>{{tips}}div>
div>
body>
<script>
new Vue({
el: "#app",
data: {
msg: "哈哈哈",
tips: ""
},
watch: {
msg: function(newVal, oldVal) {
console.log("newVal:", newVal);
console.log("oldVal:", oldVal);
if (newVal == "二哥") {
this.tips = "用户名可用"
} else {
this.tips = "用户名不可用"
}
console.log("msg变化了");
}
}
})
script>
html>
10-侦听器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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2>{{obj.username}}h2>
<button @click="changeObj()">修改usernamebutton>
div>
body>
<script>
new Vue({
el: "#app",
data: {
obj: {
username: "好谷"
}
},
methods: {
changeObj() {
this.obj.username = "二哥";
}
},
watch: {
obj: {
handler(newVal) {
console.log(newVal);
},
deep: true
}
}
})
script>
html>
11-全局过滤器
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2>{{msg|formatMsg}}h2>
div>
body>
<script>
console.log(Vue);
Vue.filter("formatMsg", function(value) {
return value.split("").join("-");
})
new Vue({
el: "#app",
data: {
msg: "好谷学堂"
}
})
script>
html>
12-私有过滤器
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2>{{msg|formatMsg}}h2>
div>
body>
<script>
new Vue({
el: "#app",
data: {
msg: "好谷学堂"
},
filters: {
formatMsg: function(value) {
return value.split("").join("-");
}
}
})
script>
html>
13-过滤器传递参数
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2>{{msg|formatMsg}}h2>
<h3>{{time | formatTime("YYYY-MM-DD")}}h3>
div>
body>
<script>
new Vue({
el: "#app",
data: {
msg: "好谷学堂",
time: new Date()
},
filters: {
formatMsg: function(value) {
return value.split("").join("-");
},
formatTime: function(value, args) {
if (args == "YYYY-MM-DD") {
return value.getFullYear() + "-" + (value.getMonth() + 1) + "-" + value.getDate();
}
}
}
})
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2>{{msg}}h2>
<button @click="changeMsg()">更新数据button>
<button @click="destroyFn()">销毁实例button>
div>
body>
<script>
new Vue({
el: "#app",
data: {
msg: "好谷学堂"
},
methods: {
changeMsg() {
this.msg = "更新数据";
},
destroyFn() {
this.$destroy();
}
},
beforeCreate() {
console.log("beforeCreate--实例创建之前");
console.log(this.$data);
console.log(this.$el);
},
created() {
console.log("created实例创建之后--最早可以在该生命周期中修改数据");
console.log(this.$data);
console.log(this.$el);
},
beforeMount() {
console.log("beforeMount--模板编译之前");
console.log(this.$el);
console.log(this.msg);
},
mounted() {
console.log("mounted--模板编译完成");
},
beforeUpdate() {
console.log("beforeUpdate--数据更新之前");
},
updated() {
console.log("updated--数据更新之后");
},
beforeDestroy() {
console.log("beforeDestroy--实例销毁之前");
},
destroyed() {
console.log("destroyed--实例销毁之后");
}
})
script>
html>
15-数组变异方法
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">
<title>Documenttitle>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
<h2>{{msg}}h2>
<input type="text" v-model="str">
<ul>
<li v-for="(item,index) in arr" :key="index">{{item}}li>
ul>
<button @click="add()">添加button>
<button @click="add2()">替换2button>
div>
body>
<script>
new Vue({
el: "#app",
data: {
msg: "好谷学堂",
str: "",
arr: []
},
methods: {
add() {
this.arr.push(this.str);
this.str = "";
},
add2() {
this.$set(this.arr, 0, this.str);
}
}
})
script>
html>
