主要内容:https://pizzali.github.io/B%A4/
1 vue.js的使用方式及文本插值
<div id="app">{{ greeting }}</div>
<script>
new Vue({
el: "#app",
data: {
greeting: "Hello Vue",
}
})
</script>
采用原生的dom
// 原生js
let odiv = document.getElementById("app-01");
odiv.innerText = "Hello Vue!";
2 常用指令:
2.1 v-text: 类似于双大括号渲染数据的另外一种方式
<div id="app" v-text="greeting"></div>
<script>
new Vue({
el: '#app',
data: {
greeting: "Hello World"
}
})
</script>
2.2 v-html: 由于v-test无法渲染标签字符串, 所以引出v-html
<div id="app" v-html="greeting"></div>
<script>
new Vue({
el: "#app",
data: {
greeting: "<h1>Hello Vue</h1>"
}
})
</script>
2.3 v-for : 数组和对象的渲染方式
<div id="app"> <ul> <li v-for="aihao in fuming">{{aihao}}</li> </ul> <ul> <li v-for="student in students">姓名:{{student.name}}年龄:{{student.age}}爱好:{{student.hobby}}</li> </ul> </div> <script> new Vue({ el: '#app', data: { fuming: ['黄袍哥', '吃鸡', '大鱼大肉'], students:[ { name: '张敏聪', age: 23, hobby: 'girls', }, { name:'毛尖妹妹', age: 18, hobby: 'study', }, ], } }) </script>
2.4 v-if: 渲染数据的时候根据条件进行判断
<div id="app">
<div v-if="role == 'cainingning'">
<h1>欢迎美女光临</h1>
</div>
<div v-else-if="role == 'juyingying'">
<h2>'''''</h2>
</div>
<div v-else>
<h1>努力学习</h1>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
role: 'cainingning'
}
})
</script>
2.5 v-show:
<div id="app">
<div v-show="isShow">Hello yiyi</div>
</div>
<script>
//v-开头的数据就是帮我们渲染数据用的
let vm = new Vue({
el: '#app',
data: {
isShow: true,
}
})
</script>
注意: v-if 的底层采用的是appendChild来实现的, v-show通过样式的display控制标签的显示
加载性能：v-if加载速度更快，v-show加载速度慢
切换开销：v-if切换开销大，v-show切换开销小
v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。
2.6 v-bind: 绑定属性, 冒号后面跟标签的属性, 属性后面的等号指向数据,
<div id="app">
<a v-bind:href="jingdong">去京东</a>
<div :class="[isActive]"></div>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
jingdong: "https://www.jd.com",
isActive: 'active',
}
})
</script>
2.7 v-on:使用v-on可以在标签上面绑定事件,注意新建的实例vue.app 中多了一个属性, methods, 在methods中, 是我们具体事件的实现方式
<div id="app">
<h1 :class="{ active: isActive}">闷骚哥</h1>
<button v-on:click="changeColor">点击变粉</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
isActive: false
},
methods: {
changeColor: function () {
this.isActive = !this.isActive
}
}
})
</script>
2.8 v-model: 当我们修改数据后, 修改后的数据能够及时的渲染到模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="name"/> <input type="checkbox" value="男" v-model="genders"/> <input type="checkbox" value="女" v-model="genders"/> <select v-model="girlfriends" multiple> <option>毛尖妹妹</option> <option>小萌芽</option> <option>宁宁</option> </select> <hr> {{name}} {{genders}} {{girlfriends}} </div> <!--v-model 当我们修改数据后, 修改后的数据能够及时的渲染到模板--> <script> let vm = new Vue({ el: "#app", data:{ name: 'juyingying', genders:[], girlfriends:[] } }) </script> </body> </html>
v-model: 计算属性和监听: ,(一下两个有一个有属性和监听的详细解释和区别)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>学科</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>python</td> <td><input type="text" v-model="python"></td> </tr> <tr> <td>vue</td> <td><input type="text" v-model="vue"></td> </tr> <tr> <td>go</td> <td><input type="text" v-model="go"></td> </tr> <tr> <td>总成绩</td> <td>{{sumScore}}</td> </tr> </tbody> </table> <hr> {{python}} {{sumScore}} </div> <script> let vm = new Vue({ el:"#app", data:{ python:88, vue:89, go:90, }, //计算 computed:{ //在页面加载的时候执行 sumScore: function () { console.log(1); return this.python + this.vue + this.go } }, //当计算的逻辑比较复杂时, 引入了watch //当data里面的数据发生改变的时候, 才会执行, 用于监听data的改变 watch:{ python: function () { console.log(2); alert("python 被修改了") } } }) </script> </body> </html>
监听补充内容:
<script>
let app = new Vue({
el: '#app',
data: {
name: 'juying',
hobby: ['抽烟', '喝酒', '烫头'],
obj: {
age: 32,
face: null
},
},
methods: {
my_click: function () {
//改变数据
// this.name = 'ju';
//改变数组的长度能能够被监听到, 新值和旧址相同
// this.hobby.push('学习');
//改变数组中的值 不能被监听到
// this.hobby[0] = 'no'
//用$set修改数组中的值能能够被监听到, 新值和旧址相同
// app.$set(this.hobby, 0, '学习')
//改变对象中的数据不能被监听到
// this.obj.face='yes'
}
},
watch: {
name: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal)
}
},
hobby: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal);
},
// deep: true
},
obj: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal);
},
// deep: true
}
}
}
)
</script>
2.9 常用指令之指令修饰符: number:可以转换成数字, lazy: 移除光标时计算
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>学科</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>python</td> <td><input type="text" v-model="python"></td> </tr> <tr> <td>vue</td> <td><input type="text" v-model="vue"></td> </tr> <tr> <td>go</td> <td><input type="text" v-model="go"></td> </tr> <tr> <td>总成绩</td> <td>{{sumScore}}</td> </tr> </tbody> </table> <hr> {{python}} {{sumScore}} </div> <script> let vm = new Vue({ el:"#app", data:{ python:88, vue:89, go:90, }, //计算 computed:{ //在页面加载的时候执行 sumScore: function () { console.log(1); return this.python + this.vue + this.go } }, //computes, 也可以实现监听事件,但是当计算逻辑比较复杂的时候, 加载速度慢, 所以不合适, //当data里面的数据发生改变的时候, 才会执行, 用于监听data的改变 watch:{ python: function () { console.log(2); alert("python 被修改了") } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>学科</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <!--number就是指令修饰符, 把他转换成数字 , lazy就是退出光标后计算--> <td>python</td> <td><input type="text" v-model.number.lazy="python"> </td> </tr> <tr> <td>vue</td> <td><input type="text" v-model.number.lazy="vue"> </td> </tr> <tr> <td>go</td> <td><input type="text" v-model.number.lazy="go"> </td> </tr> <tr> <td>总成绩</td> <td>{{sumScore}}</td> </tr> </tbody> </table> </div> <script> let vm = new Vue({ el: '#app', data: { python: 88, vue: 99, go: 100 }, computed:{ sumScore: function () { console.log(this); return this.python + this.vue + this.go } } }) </script> </body> </html>
2.10 常用指令之后去dom元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> <style> .active { background-color: #c1e2b3; } </style> </head> <body> <div id="app"> <div ref="myRe">peiqi</div> <!--<div :class="[isActive]">peiqi</div>--> <button v-on:click="changeColor">点击让佩奇变绿</button> <script> let vm = new Vue({ el: '#app', data: { isActive:'active', }, methods: { changeColor:function () { console.log(this); this.$refs.myRe.className = this.isActive } } }) </script> </div> </body> </html>
2.11 常用指令之自定义指令:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="static/vue.min.js"></script>
<style>
.box {
50px;
height: 60px;
background-color: #5bc0de;
}
</style>
</head>
<body>
<div id="app">
<div v-pos.right.bottom="post" class="box">Hello World</div>
<!--<div v-pos="post" class="box">Hello World</div>-->
</div>
<script>
Vue.directive('pos', function (el, bindding) {
console.log('el', el);
console.log('bindding', bindding);
let decorators = bindding.modifiers;
if(bindding.value){
//方法一
// el.style['position'] = 'fixed';
// el.style['right'] = 0;
// el.style['bottom'] = 0;
//加指令修饰符
el.style['position'] = 'fixed';
for(let key in decorators){
el.style[key] = 0
}
}
});
//自定义属性
let vm = new Vue({
el: '#app',
data:{
post: true
}
})
</script>
</body>
</html>
3 es6 的常用语法:
1 var 和 let的区别:
var有变量提升的性能, let没有
<script>
console.log(username);
//打印undefined, 变量提升, 相当于提前定义了username
var username = 'lili';
console.log(username);
console.log(user);
//在es6 中会报错, 无变量提升的作用
let user = 'meime'
</script>
var定义的变量: 全局作用域和函数作用域, let定义的作用域: 还有块级作用域
// var定义的变量: 只有全局作用域和函数定义域
// let定义的变量: 有全局作用域和函数作用域, 块级作用域
let user = 'meime';
if(true){
var username = 'aaa';
let age = 22
}
console.log(username); //可以打印
console.log(age) // 会报错
let定义的变量不能重复定义, var定义的变量可以
var username = 'pp';
var username = 'oo';
console.log(username); //可以打印
let username = 'll';
console.log(username) //会报错, let定义的变量不能重复定义
const定义常量
:定义时必须赋值, 定义之后不能修改
2 常用语法之模板字符串:${username1}
<div id="app">
</div>
<script>
let odiv = document.getElementById('app');
let username1 = 'a';
let username12 = 'b';
odiv.innerHTML = `
<h1>Hello ${username1}</h1>
<h1>Hello ${username12}</h1>
`
</script>
3 常用语法之对象的单例模式
//箭头函数的this,指向定义时当定义域
//普通函数的this谁定义它指向谁,
let obj = {
name: 'yingyin',
foo(){
console.log(this);//定义的obj对象
console.log(this.name);
}
};
obj.foo();
4 常用语法之类
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div id="app"></div> <script> /* ES5中实例化对象的方式 function Person() { this.username = "guyahui"; this.age = 20; } Person.prototype.showInfo = function () { console.log(this.username); }; let guyahui = new Person(); */ /* class Person { constructor (username, age) { this.username = username; this.age = age; } showInfo() { console.log(this.username, this.age); } } let guyahui = new Person("guyahui", 18); guyahui.showInfo(); */ class Wangjianwei { constructor (username, age, account=10000) { this.username = username; this.age = age; this.account = account; } showInfo() { console.log(this.username, this.age, this.account); } } class Peiqi extends Wangjianwei { constructor(username, age) { super(); this.username = username; this.age = age; } } let peiqi = new Peiqi("peiqi", 73); peiqi.showInfo(); </script> </body> </html>
5 常用语法之函数的扩展: 箭头函数, 默认值参数:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div id="app"></div> <script> // 默认值参数 /* function foo(x, y=10) { let number = y; return number; } ret = foo(1, 2); ret1 = foo(1); ret2 = foo(1, 0); console.log(ret); console.log(ret1); console.log(ret2); // 箭头函数 // 一个参数 let foo = v => v; ret1 = foo(10); console.log(ret1); // 0个或者多个参数 let bar = (x, y) => {return x+y;}; ret2 = bar(1, 2); console.log(ret2); */ function foo() { console.log(this); } let bar = () => console.log(this); let obj = { foo: foo, bar: bar, }; foo(); obj.foo(); obj.bar(); </script> </body> </html>
6 函数的解构和赋值
//函数的解构, 两端的类型必须一致
let ary = [1, 2, 3];
let [a, b, c] = ary;
console.log(a, b ,c);
let obj = {
username: 'a',
age:23
};
let {username: user, age: age} = obj;
console.log(user, age);
函数的赋值
//函数的赋值
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b)