vue基础（一）
1.vue基础概念
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <!-- <p id="pp">我爱你赵丽颖</p> --> <p>{{msg}}</p> <!-- <a v-bind:href="url">点我去百度</a> --> <!-- 简写 --> <a :href="url">点我去百度</a> <p>{{msg.toUpperCase()}}</p> <p>{{msg+'哈哈'}}</p> </div> <script src="./js/vue.js"></script> <script> const vm = new Vue({ //每一个页面都至少要有一个Vue的实例去对应 //实例化vm对象的时候，要传一个配置对象，属性名固定，属性值可以更改的对象叫配置对象，axios({})也是 el:'#root',//是一个字符串类型的数据，字符串是css选择器字符串 //这个选择器选中的元素，被称作挂载点 //挂载点的内部所有的东西叫模板，但是不包括挂载点本身 //模板当中有模板语法：插值语法和指令语法 // {{}}就是插值语法，它的作用是操作模板元素的内容 // 指令语法有很多，我们先说一个v-bind: 它可以绑定数据到属性身上，数据是动态的，简写：就是冒号 // 模板语法当中里面的数据都不再是静态的，而是动态的，而且是js表达式 data:{ msg:'woainiqiwei', url:'https://www.baidu.com', persons:[ {id:1,name:'赵丽颖',age:33}, {id:2,name:'杨幂',age:34}, {id:3,name:'戚薇',age:40}, ] } //data当中所有的属性数据，最终都会变为vm实例化对象身上的同名属性数据 //模板当中所使用的所有数据看似是data里面的，其实拿的是vm的 }) </script> </body> </html>
2、数据绑定MVVM及事件的添加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <!-- v-bind:简写: --> <!-- <input type="text" :value="msg"> --> <input type="text" v-model="msg"> <p>我爱你{{msg}}</p> </div> <script src="./js/vue.js"></script> <script> const vm = new Vue({ el: '#root', // data:function(){ // this // }, // data:() => { // this // } //data有两种写法，一种是对象写法 //另一种data的函数写法,要求必须return一个对象 //数据的单相绑定其实说的就是指令v-bind: 只能从data中单向获取数据展示，并且和模板绑定到一起 //数据的双向数据绑定说的一般就是表单类元素的v-model指令,只要以后我们看到了表单元素，几乎都双向 // MVVM要深入理解 data() { return { msg:'赵丽颖' } }, }) </script> </body> </html>
3，事件的绑定基础
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <!-- 点击事件 --> <!-- <p v-on:click="update">我爱你{{msg}}</p> --> <!-- 简写形式 --> <p @mouseenter="update">我爱你{{msg}}</p> </div> <script src="./js/vue.js"></script> <script> const vm = new Vue({ // el:'#root', // data:{ // }, //属性 data(){ return { msg:'赵丽颖' } }, //方法 methods: { update(){ //在vue的方法当中，this都是指向vm实例化对象的 this.msg = '杨幂' } }, }) vm.$mount('#root') //相当于el:'#root', </script> </body> </html>
4，Object.defineProperty使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let obj = { firstName:'zhao', lastName:'liying', // fullName:'zhaoliying' } // obj.fullName = 'zhaoliying' // console.log(obj) // obj.firstName = 'liu' // console.log(obj) //不管之前对象有没有这个属性 //都可以使用 //让这个属性变为一个响应式的属性（和别的数据有关联的，自己变,别的数据也变，别的数据变自己也变） Object.defineProperty(obj,'fullName',{ get(){ //getter 当读取这个属性的时候就会自动的调用get() return this.firstName + '-' + this.lastName }, set(data){ //setter 当写这个属性的时候，就会自动调用set() let arr = data.split('-') this.firstName = arr[0] this.lastName = arr[1] } }) // console.log(obj.fullName) //自动调用get函数 //覆盖之前的fullName obj.fullName = 'liu-liying' //自动调用set函数 console.log(obj) //{firstName: "liu", lastName: "liying"} </script> </body> </html>
5.计算属性-computed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> 名：<input type="text" v-model="lastName"> 姓名1(单向绑定)：<input type="text" v-bind:value="fullName1"> 姓名2(双向绑定)：<input type="text" v-model="fullName2"> <p>{{fullName1}}</p> <p>{{fullName1}}</p> <p>{{fullName1}}</p> <p>{{fullName1}}</p> </div> <script src="./js/vue.js"></script> <script> new Vue({ el:'#root', data(){ return { //写非函数数据 firstName:'zhao', lastName:'liying' } }, methods: { //我们写方法和函数 }, computed: { // fullName1:{ // //如果你的页面操作数据有读有写，那么get和set都得有 // get(){ // }, // //如果只有读取，set没必要写，set如果没必要写，那么可以简化写为一个方法 // set(){ // } // }, fullName1(){ //没有set方法，代表的就是get 只能读取 console.log(11111) return this.firstName + '-' + this.lastName }, fullName2:{ //如果你的页面操作数据有读有写，那么get和set都得有 get(){ return this.firstName + '-' + this.lastName }, //如果只有读取，set没必要写，set如果没必要写，那么可以简化写为一个方法 set(value){ let arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } }, //什么时候用计算属性是我们大家刚开始想不到的 // 当你有一个数据需要 但是不存在 又是根据已有的数据计算而来的 必然用到计算属性 }, }) </script> </body> </html>
6,监视属性，watch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <input type="text" v-model="fullName"> </div> <script src="./js/vue.js"></script> <script> new Vue({ el:'#root', data:{ firstName:'zhao', lastName:'liying', fullName:'zhao-liying' }, watch:{ //只监视firstName,新值和旧值 firstName(newVal,oldVal){ console.log(newVal,oldVal) this.fullName = newVal + this.lastName }, lastName(newVal, oldVal){ console.log(newVal, oldVal) this.fullName= this.firstName+ newVal } //什么时候用监视属性 //属性值是存在的，才能监视 不存在需要计算 } }) </script> </body> </html>
