主要内容: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>
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 {
width: 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>