Vue学习()-vue
Vue学习()
1.初识Vue
<!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>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <!-- 双括号里写js表达式，注意区分表达式和代码 1.一个表达式可以生成一个值，放在任何一个需要值的地方 拿一个变量的可以接到表达式的值，例子 a,a+b,.demo(1) 2.代码，例子 if(){},for(){} 3.真实开发中只有1个vue实例，并且会配合着组件一起使用 --> <div id="root"> <h1>Hello,{{name}}</h1> </div> <script> //创建vue实例，一个Vue实例只能对应一个容器！！ var x=new Vue({ el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器 data:{//data中用于存储数据，数据供el所指定的容器使用 name:'cc' } }) </script> </body> </html> <div id="root"> <h1>插值语法</h1> <h3>你好，{{name}}</h3> <hr> <h1>指令语法</h1> <!-- Vue指令，bind，绑定，v-bind:可以简写为: 功能：用于解析标签， 举例：v-bind:href="xxx"，xxx同样写js表达式 --> <a href="#">点我去{{school.name}}学习</a> <a :href="url">点我进入百度</a> </div> <script> var x=new Vue({ el:"#root", data:{ name:"cc", url:'http://www.baidu.com', school:{ name:233 } } }) </script>数据绑定
<div id="root"> 单向数据绑定：<input type="text" v-bind:value="name"> 双向数据绑定：<input type="text" v-model="name"> <!-- v-model只能应用在表单类元素，（能输入，有value值），注意简写写法 --> </div> <script> var x=new Vue({ el:"#root", data:{ name:"cc", } }) </script> <!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>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="root"> <h1>你好，{{name}}</h1> </div> <!-- data与el的两种写法 1.el的两种写法（1），.new Vue时配置el属性 （2），先创建Vue实例，后通过vm.$mount('#root')指定el的值 2.data有两种写法 （1）对象式 （2）函数式 3.Vue所管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是实例了，变成Window--> <script> var x=new Vue({ //el:"#root",//第一种写法 //data的第一种写法，对象式 // data:{ // name:"cc", // } //data的第二种写法：函数式（Vue调用的，此处this是Vue实例对象） data:function(){ return{ name:"cc" } } }) x.$mount('#root')//第二种写法 </script> </body> </html>理解MVVM
- M：模型Model：对应data中的数据
- V：视图：模板
- VM：视图模型：Vue实例对象
Object.defineProperty方法
//Property属性 //Object.defineProperty let number=18 let person={ name:'张三', sex:'男', } Object.defineProperty(person,'age',{ //value:18, enumerable:true,//控制属性是否可以枚举 writable:true,//控制属性是否可以修改 configurable:true,//控制属性是否可以被删除 //想让person增加age属性，属性值为number，可随着number更改而变化 //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get:function(){ return number }, //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ number=value }, }) //Object.keys(person)可以将传入的对象属性名遍历出来，形成一个数组 // Object.defineProperty通过这个方法加入的属性不可枚举(不可遍历)，不可更改,可加入 enumerable:true使其可以遍历 数据代理
<!-- 1.Vue中的数据代理： 通过vm对象来代理data对象中属性的操作(读/写) 2. Vue中数据代理的好处： 更加方便的操作data中的数据 3.基本原理： 通过Object.defineProperty()把data对象中所有属性添加到cn上， 为每一个添加到cn上的属性都指定一个getter/setter 在getter/setter内部去操作(读/写)data中对应的属性 --> <script> const cn=new Vue({ el:'#root', data:{ name:'ss', address:'广东', } }) //cn._data就是cn中的data </script>事件处理
<div id="root"> <h1>你好，{{name}}</h1> <button @click="showInfo">点我提示</button> <!-- v-on:可简写成@ --> <button @click="showInfo2(66,$event)">点我提示2(传参 )</button> </div> <!-- 事件的基本使用： 1.使用v-on:xxx或@xxx 绑定事件，其中xxx是事件名： 2.事件的回调需要配置在methods对象中，最终会在vm上 3.methods中配置的函数，不要用箭头函数，否则this就不是vm了 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象： 5.@click="demo"和@click="demo($event)"效果一致，但后者可以传参 --> <script> const vm=new Vue({ el:"#root", data:{ name:'cc', }, methods:{ showInfo(event){ //console.log(this)//此处的this是vm alert('hello') }, showInfo2(number,a){ //console.log(this)//此处的this是vm alert(number) console.log(a) alert('hello') } } }) </script>事件修饰符
<div id="root"> <h1>你好，{{name}}</h1> <a href="http://www.baidu.com"@click.prevent="showInfo">点我提示信息</a> </div> <!-- Vue中的事件修饰符： 1.prevent：阻止默认事件 * 2.stop：阻止事件冒泡 * 3.once：事件只触发一次 * 4.capture：使用事件的捕获模式(先捕获再冒泡) 5. self：只有event.target是当前元素才触发事件 6.passive：事件的默认为立即执行，无需等待回调执行完毕 --> 可连着写，例如@click.prevent.stop组织冒泡并不允许跳转键盘事件
<div id="root"> <h1>你好，{{name}}</h1> <input type="text" placeholder="按下回车提交" @keyup.enter="showInfo"> </div> 若想只按下ctrl+y触发，可以写成@keyup.ctrl.y <!-- 1.Vue中常用到的按键别名 1.回车=>enter 2.删除=>delete(捕获'删除'和'退格'键) 3.退出=>esc 4.空格=>space 5.换行=>tab (配合keydown适用) 6.上=>up 7.下=>down 8.左=>left 9.右=>right 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但需要注意转为kebab-case(短线命名)，两个单词组成的，如capslock要写成caps-lock 3.系统修饰键(用法特殊)：ctrl，alt，shift，meta (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发 (2).配合keydown使用：正常触发事件 4.也可以通过keyCode(不推荐，以移除) -->计算属性
<div id="root"> <h1>你好，{{name}}</h1> 姓<input type="text" v-model="firstname"> 名<input type="text" v-model="lastname"> 全名：<span>{{fullname}}</span> </div> <!-- 计算属性： 1.定义：要用的属性不存在，要通过已有的属性计算得来 2.原理：底层借助了Object.defineproperty方法提供gatter和setter 3.get函数什么时候执行？ (1).初次调用时 (2).当依赖数据更改时 4.优势：与methods相比，内部缓存机制(复用)，效率更高，调式方便 5.备注： 1.计算属性最终会出现在vm上，直接读取使用即可 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变 --> <script> const vm=new Vue({ el:"#root", data:{ firstname:'cc', lastname:'yy', }, computed:{ fullname:{ //此处的this是vm //get什么时候调用？1，初次读取时调用。2，所依赖的数据改变时发生调用(比如此处firstname和lastname改变时调用) get(){ return this.firstname+'-'+this.lastname } } } }) //computed计算 </script>计算属性简写
确定只读不改，才能用简写 computed:{ fullname:function(){ return this.firstname+'-'+this.lastname//function当get用 } }监视属性
————————
1.初识Vue
<!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>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <!-- 双括号里写js表达式，注意区分表达式和代码 1.一个表达式可以生成一个值，放在任何一个需要值的地方 拿一个变量的可以接到表达式的值，例子 a,a+b,.demo(1) 2.代码，例子 if(){},for(){} 3.真实开发中只有1个vue实例，并且会配合着组件一起使用 --> <div id="root"> <h1>Hello,{{name}}</h1> </div> <script> //创建vue实例，一个Vue实例只能对应一个容器！！ var x=new Vue({ el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器 data:{//data中用于存储数据，数据供el所指定的容器使用 name:'cc' } }) </script> </body> </html> <div id="root"> <h1>插值语法</h1> <h3>你好，{{name}}</h3> <hr> <h1>指令语法</h1> <!-- Vue指令，bind，绑定，v-bind:可以简写为: 功能：用于解析标签， 举例：v-bind:href="xxx"，xxx同样写js表达式 --> <a href="#">点我去{{school.name}}学习</a> <a :href="url">点我进入百度</a> </div> <script> var x=new Vue({ el:"#root", data:{ name:"cc", url:'http://www.baidu.com', school:{ name:233 } } }) </script>数据绑定
<div id="root"> 单向数据绑定：<input type="text" v-bind:value="name"> 双向数据绑定：<input type="text" v-model="name"> <!-- v-model只能应用在表单类元素，（能输入，有value值），注意简写写法 --> </div> <script> var x=new Vue({ el:"#root", data:{ name:"cc", } }) </script> <!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>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="root"> <h1>你好，{{name}}</h1> </div> <!-- data与el的两种写法 1.el的两种写法（1），.new Vue时配置el属性 （2），先创建Vue实例，后通过vm.$mount('#root')指定el的值 2.data有两种写法 （1）对象式 （2）函数式 3.Vue所管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是实例了，变成Window--> <script> var x=new Vue({ //el:"#root",//第一种写法 //data的第一种写法，对象式 // data:{ // name:"cc", // } //data的第二种写法：函数式（Vue调用的，此处this是Vue实例对象） data:function(){ return{ name:"cc" } } }) x.$mount('#root')//第二种写法 </script> </body> </html>理解MVVM
- M：模型Model：对应data中的数据
- V：视图：模板
- VM：视图模型：Vue实例对象
Object.defineProperty方法
//Property属性 //Object.defineProperty let number=18 let person={ name:'张三', sex:'男', } Object.defineProperty(person,'age',{ //value:18, enumerable:true,//控制属性是否可以枚举 writable:true,//控制属性是否可以修改 configurable:true,//控制属性是否可以被删除 //想让person增加age属性，属性值为number，可随着number更改而变化 //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get:function(){ return number }, //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ number=value }, }) //Object.keys(person)可以将传入的对象属性名遍历出来，形成一个数组 // Object.defineProperty通过这个方法加入的属性不可枚举(不可遍历)，不可更改,可加入 enumerable:true使其可以遍历 数据代理
<!-- 1.Vue中的数据代理： 通过vm对象来代理data对象中属性的操作(读/写) 2. Vue中数据代理的好处： 更加方便的操作data中的数据 3.基本原理： 通过Object.defineProperty()把data对象中所有属性添加到cn上， 为每一个添加到cn上的属性都指定一个getter/setter 在getter/setter内部去操作(读/写)data中对应的属性 --> <script> const cn=new Vue({ el:'#root', data:{ name:'ss', address:'广东', } }) //cn._data就是cn中的data </script>事件处理
<div id="root"> <h1>你好，{{name}}</h1> <button @click="showInfo">点我提示</button> <!-- v-on:可简写成@ --> <button @click="showInfo2(66,$event)">点我提示2(传参 )</button> </div> <!-- 事件的基本使用： 1.使用v-on:xxx或@xxx 绑定事件，其中xxx是事件名： 2.事件的回调需要配置在methods对象中，最终会在vm上 3.methods中配置的函数，不要用箭头函数，否则this就不是vm了 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象： 5.@click="demo"和@click="demo($event)"效果一致，但后者可以传参 --> <script> const vm=new Vue({ el:"#root", data:{ name:'cc', }, methods:{ showInfo(event){ //console.log(this)//此处的this是vm alert('hello') }, showInfo2(number,a){ //console.log(this)//此处的this是vm alert(number) console.log(a) alert('hello') } } }) </script>事件修饰符
<div id="root"> <h1>你好，{{name}}</h1> <a href="http://www.baidu.com"@click.prevent="showInfo">点我提示信息</a> </div> <!-- Vue中的事件修饰符： 1.prevent：阻止默认事件 * 2.stop：阻止事件冒泡 * 3.once：事件只触发一次 * 4.capture：使用事件的捕获模式(先捕获再冒泡) 5. self：只有event.target是当前元素才触发事件 6.passive：事件的默认为立即执行，无需等待回调执行完毕 --> 可连着写，例如@click.prevent.stop组织冒泡并不允许跳转键盘事件
<div id="root"> <h1>你好，{{name}}</h1> <input type="text" placeholder="按下回车提交" @keyup.enter="showInfo"> </div> 若想只按下ctrl+y触发，可以写成@keyup.ctrl.y <!-- 1.Vue中常用到的按键别名 1.回车=>enter 2.删除=>delete(捕获'删除'和'退格'键) 3.退出=>esc 4.空格=>space 5.换行=>tab (配合keydown适用) 6.上=>up 7.下=>down 8.左=>left 9.右=>right 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但需要注意转为kebab-case(短线命名)，两个单词组成的，如capslock要写成caps-lock 3.系统修饰键(用法特殊)：ctrl，alt，shift，meta (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发 (2).配合keydown使用：正常触发事件 4.也可以通过keyCode(不推荐，以移除) -->计算属性
<div id="root"> <h1>你好，{{name}}</h1> 姓<input type="text" v-model="firstname"> 名<input type="text" v-model="lastname"> 全名：<span>{{fullname}}</span> </div> <!-- 计算属性： 1.定义：要用的属性不存在，要通过已有的属性计算得来 2.原理：底层借助了Object.defineproperty方法提供gatter和setter 3.get函数什么时候执行？ (1).初次调用时 (2).当依赖数据更改时 4.优势：与methods相比，内部缓存机制(复用)，效率更高，调式方便 5.备注： 1.计算属性最终会出现在vm上，直接读取使用即可 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变 --> <script> const vm=new Vue({ el:"#root", data:{ firstname:'cc', lastname:'yy', }, computed:{ fullname:{ //此处的this是vm //get什么时候调用？1，初次读取时调用。2，所依赖的数据改变时发生调用(比如此处firstname和lastname改变时调用) get(){ return this.firstname+'-'+this.lastname } } } }) //computed计算 </script>计算属性简写
确定只读不改，才能用简写 computed:{ fullname:function(){ return this.firstname+'-'+this.lastname//function当get用 } }