vue基础知识
1. es6与es5的对比:
var a = '10' //es5 let b = '10' //es6 let 声明变量的特点 1 let申明的变量不再从属于顶层对象window let username = 'bob' window.username; 结果：undefined 2 let申明的变量var不能重复声明 3 let中不存在变量提升 es5中: console.log(hh2); var hh2 = 'ss'; 结果： undefined es6中 console.log(hh); // 报错 let hh = 'ss'; const可声明常量，不能修改 const Pi = 3.1415926.... const Pi = 11 //报错 模板语法 let a = '11' let name = `${a}22` name：结果"1122"
// es5 function add(x,y){ return x+y } add(1,2); // 匿名函数 var add = function(x){ return x } // es6 // 匿名函数 let add = function(x){ return x } // 箭头函数 let add = (x) => { return x } // 简写形式 let add = x => x ; let add = (x,y) => x+y
自定义对象中封装函数的写法
// es5中自定义对象里面封装函数 var name = 'bob' var person = { name:'jack', age:18, f1:function(){ console.log(this); console.log(this.name); // } } person.f1() //结果为Jack, 这个是谁调用this就指向谁 // 箭头函数 -- var var name = 'bob' var person = { name:'jack', age:18, f1:()=>{ console.log(this); //指向window console.log(this.name); // 结果为bob 箭头函数会将this指向上一级里的对象 } } person.f1() // 箭头函数 -- es6 let name = 'bob' let person = { name:'jack', age:18, f1:()=>{ console.log(this); // Window {parent: Window, opener: null, top: Window, length: 2, BigInt: ƒ, …} console.log(this.name); // 结果为undefined 因为let不会改变this的指向, 所以this指向window, 又let不会做变量提升, 所以不会把name从属于window, 所以结果undefined } } person.f1() // 函数单体模式 let name = 'bob' let person = { name:'jack', age:18, //f1:function(){ f1(){ //不会改变this的指向 console.log(this); console.log(this.name); // 结果为jack } } person.f1()
es5和es6中类写法
// es5 没有类的概念,写法 function Person(name,age){ this.name = name; // 类似于self this.age = age; } // 使用 var p1 = new Person('bob', 16); p1.name; 结果："bob" // es5封装方法,原型链 Person.prototype.f2 = function(){console.log('xxxxxx')}; p1.f2(); // 结果'xxxxxx' //es6 class声明类(了解) class Person2{ constructor(name,age){ this.name = name; this.age = age; } showName(){console.log(this.name)}; }; let p3 = new Person2('jack',16); p3.name; "jack" p3.showName(); jack
2. 视图中的简单语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{ name }}</h1> <h1>{{ num }}</h1> <h1>{{ data_list }}</h1> <h1>{{ info }}</h1> <h1>{{ info.weather }}</h1> <!-- 属性取值 --> <h1>{{ str_words }}</h1> <h1>{{ 3+2 }} </h1> <h1>{{ str_words.split("").reverse().join("") }}</h1> <!-- 字符串反转 --> <h1>{{ num+1 }}</h1> <!-- 四则运算 --> <h1>{{ 1>2?"真":"假" }}</h1> <!-- 三元运算、三目运算 --> <h1>{{ num>2?"真":"假" }}</h1> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { name: "bob", num: 100, data_list: [1,2,3], info: {weather: "cloud", sky: "blue"}, str_words: "love" } }) </script> </html>
通过vm对象获取vue的属性
vm.$el; // 获取vue对象
vm.$data; // 获取vue里面的属性
vm.$data.hobby_list; // 获取vue里面的属性里面的对象
3. vue指令系统: 指令系统="值"
文本操作: v-text, v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{ aele }}</p> <!-- <a href="">百度</a> --> <p v-text="aele"></p> <!-- <a href="">百度</a> --> <p v-html="aele"></p> <!-- 百度 --> <p v-html="name"></p> <!-- bob --> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { aele:'<a href="">百度</a>', name: 'bob', } }) </script> </html>
条件渲染: v-if 和 v-show
v-if 控制标签生成或者去除的
v-show 控制标签显示或者隐藏的
频繁切换标签显示与否，尽量使用v-show，不会重组文档结构，那么切换起来效率高
不频繁的可以用v-if，条件不成立，不会生成标签，渲染就快一些
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1 v-if="num<100">{{ name }}</h1> <h2 v-else-if="num>100">帅吗?</h2> <h3 v-else="num=100">你真帅</h3> <h4 v-show="num=100">{{ str_words }}</h4> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { name: 'bob', num: 100, str_words: "love" } }) </script> </html>
4. 属性绑定 v-bind, v-on, v-model: 动态属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1 aa="name"></h1> <!-- 静态属性 --> <h1 v-bind:aa="name"></h1> <!-- 动态属性 --> <h1 :aa="name"></h1> <!-- 简写形式 --> <h1 v-on:click="num++">点击</h1> <h1 @click="num++">再点击</h1> <!-- 点击事件, 点击一次,num值加一个 --> {{ num }} <br> <button @click="num++">+</button> <input type="text" v-model="num"> <!-- 双向数据绑定, 在输入框里修改数据也可以 --> <button @click="num--">-</button> {{ num }} </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data(){ // 这样写数据属性是最常用的方式，因为后面学和使用组件的功能时，必须要这样写数据属性 return{ name: 'bob', num: 100, str_words: "love" } } }) </script> </html>
5. methods属性: 可以在里面写一些函数逻辑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <button @click="num++">+</button> <input type="text" v-model="num"> <!-- 双向数据绑定, 在输入框里修改数据也可以 --> <button @click="Handler">-</button> <!-- 这样数字修改就不会为负数了 --> {{ num }} </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data(){ // 这样写数据属性是最常用的方式，因为后面学和使用组件的功能时，必须要这样写数据属性 return{ name: 'bob', num: 100, str_words: "love" } }, methods: { Handler() { if(this.num>=1){ this.num-- } } } }) </script> </html>
小示例: 显示和隐藏密码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input :type="type"> <button @click="show">{{text_str}}</button> </div> </body> <script src="vue.js"></script> <script> new Vue({ el:'#app', data(){ return { type: "password", text_str: "显示密码" } }, methods:{ show(){ if (this.type === "password"){ this.type='text'; this.text_str="显示密码" }else { this.type='password'; this.text_str="隐藏密码" } } } }) </script> </html>
6. class类值操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { color: red; } .c2 { background-color: #00c4ff; } </style> </head> <body> <div id="app"> <div :class="{c1:status, c2: num===10}">天气很热</div> <!-- 形式一 --> <hr> <div :class="status?'c1':'c2'">秋天到了</div> <!-- 形式二 --> <hr> <div :class="[m1, m2]">冬天也有</div> <!-- 数组形式 --> <button @click="status=!status">改变样式</button> </div> </body> <script src="vue.js"></script> <script> new Vue({ el:'#app', data(){ return { status: false, num: 10, m1: {"c1": true}, m2: {"c2": false} } }, methods:{ } }) </script> </html>
css样式操作: 三种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { color: red; } .c2 { background-color: #00c4ff; } </style> </head> <body> <div id="app"> <div :style="{backgroundColor:bgc, fontSize: xfont}">天气很热</div> <hr> <div :style="ss">秋天到了</div> <hr> <div :style="[ss,cc]">冬天也有</div> <!-- 数组形式 --> <button @click="">改变样式</button> </div> </body> <script src="vue.js"></script> <script> new Vue({ el:'#app', data(){ return { bgc: 'pink', xfont: '30px', ss: { backgroundColor: 'greenyellow', color: 'white', }, cc: { fontSize: '50px' } } }, methods:{ } }) </script> </html>
选项卡示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #card { width: 500px; height: 350px; } .title { height: 50px; } .title span { width: 100px; height: 50px; background-color: #ccc; display: inline-block; line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */ text-align: center; } .content .list { width: 500px; height: 300px; background-color: yellow; display: none; } .content .active { display: block; } .title .current { background-color: yellow; } </style> <script src="vue.js"></script> </head> <body> <div id="card"> <div class="title"> <span :class="{current:num===1}" @click="num=1">国内新闻</span> <span :class="{current:num===2}" @click="num=2">国际新闻</span> <span :class="{current:num===3}" @click="num=3">银河新闻</span> <!--<span>{{num}}</span>--> </div> <div class="content"> <div class="list" :class="{active:num===1}">国内新闻列表</div> <div class="list" :class="{active:num===2}">国际新闻列表</div> <div class="list" :class="{active:num===3}">银河新闻列表</div> </div> </div> <script src="vue.js"></script> <script> // 思路： // 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list] // 代码实现： var card = new Vue({ el: "#card", data: { num: 0, }, }); </script> </body> </html>
7. v-for循环指令系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <ul> <li :key="value.id" v-for="(value, index) in data_list">{{value.name}}--{{index}}</li> <li v-for="(value, index) in info">{{ value }}--{{ index }}</li> </ul> <!-- bob--0 bob2--1 bob3--2 111--username 222--age --> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data(){ return { data_list:[ {id: 1, name: "bob", age: 17}, {id: 2, name: "bob2", age: 18}, {id: 3, name: "bob3", age: 19}, ], info: { username: 111,age: 222 } } } }) </script> </html>
8. 全局和局部过滤器和计算属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{ name|aa }}</h1> <h1>{{ name|bb }}</h1> <h1>{{ "一元商品"|cc }}</h1> <h1>{{ dd }}</h1> <!-- 直接写计算属性的函数名 --> </div> </body> <script src="vue.js"></script> <script> // 定义全局过滤器 Vue.filter("aa", function (val) { return val+"真好看" }) let vm = new Vue({ el: "#app", data(){ return{ name: "666", name2: "888", } }, // 定义局部过滤器 filters: { "bb": function (val) { if(val==="666"){ return 520 } }, "cc"(val){ return val+"促销大放送" } }, // 计算属性 computed: { "dd": function () { let s1 = this.name + 111 + this.name2 return s1 } } }) </script> </html>
9. 阻止事件冒泡: @click.stop.prevent
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 100px; height: 100px; background-color: #00c4ff; } .c2 { width: 50px; height: 50px; background-color: #5A5CAD; } </style> </head> <body> <div id="app"> <div class="c1" @click="fatherHandler"> <div class="c2" @click.stop="sonHandler"></div> <!-- 阻止时间冒泡 --> <!-- <div class="c2" @click.stop.prevent="sonHandler"> 这种形式也可以 --> </div> <!-- 阻止页面刷新 --> <form action=""> <input type="text"> <input type="submit" @click.stop.prevent=""> <!-- 阻止submit按钮提交数据的动作 --> </form> <a href="" @click.stop.prevent="">百度</a> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data(){ return { } }, methods: { fatherHandler(){ alert("father") }, sonHandler(){ alert("son") } } }) </script> </html>
10. 生命周期钩子函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{ name }} {{ num }} </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data(){ return{ name: "bob", num: 100, } }, // 加载数据之前执行 beforeCreate: function () { console.log(this.el); // undefined console.log(this.$data) // undefined }, // vue对象加载数据属性之后，执行,比较常用 created: function () { console.log(this.el); // undefined console.log(this.$data) // name: "bob" // 这里就可以发请求，在加载页面时获取后台的数据来展示 }, // 数据属性已经有值了，将数据挂载到视图中之前触发 beforeMount: function () { console.log(this.el); // undefined console.log(this.$data) // 数据 }, // 数据挂载到对应视图中之后，触发 mounted: function () { console.log(this.el); // undefined console.log(this.$data) // 数据 }, // 某个视图发生变化之前触发，之后触发, 不然不会触发 beforeUpdate: function () { console.log(this.el); console.log(this.$data) }, updated: function () { console.log(this.el); console.log(this.$data) } }) </script> </html>
11. 监听属性: watch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <button @click="info.name='jack'">{{ info.name }}</button> <input type="text" v-model="str_text"> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el: '#app', data(){ return{ info: {name: "bob", age: 18}, str_text: "love", } }, watch:{ // 想监听哪个值的变化, 就以这个值作为函数名称, 注意, 如果里面有.的话, 要用引号引起来 'info.name':function (val) { console.log(val) }, // 监听用户输入 str_text: function (val) { console.log(val) } } }) </script> </html>
