搜索到
26
篇与
的结果
-
ref属性、props配置、mixin混入、插件、scoped样式 ref属性被用来给元素或子组件注册引用信息（id的替代者）；应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）；使用方式：标识：<h1 ref="xxx">孙笑川</h1> 或 <Demo ref="xxx"/>获取：this.$refs.xxxprops配置功能：让组件接收外部传过来的数据传递数据：<Demo name="xxx"/>接收数据：//1.简单接收 props: ['name','sex','age'] //2.接收的同时对是数据进行类型限制 props: { name: String, sex: String, age: Number, } //3.类型限制，默认值指定，是否必传 props: { name: { type: String, required: true }, sex: { type: String, required: true }, age: { type: Number, default: 99 } }注：props是只读的，Vue底层会监测你对propos的修改，如果进行了修改，会发出警告；若业务中确实需要修改，可以将该属性复制到data中并定义，修改后定义的数据mixin混入功能：可以把多个组件共用的配置提取成一个混入对象使用方式：定义混合{ data() { ... }, methods: { xxx } }使用（1）全局引入：Vue.mixin(xxx)（2）局部混入：mixins: [xxx]插件功能：用于增强Vue本质：包含install方法的一个对象，install的第一个参数是vue，第二个以后的参数是插件使用者传递的参数定义插件：//定义plugins.js export default { install(Vue,x,y,z) { console.log('插件被调用了', Vue,x,y,z) //全局过滤器 Vue.filter('mySlice', function (value) { return value.slice(0,3) }) //自定义全局指令 Vue.directive('fbind', { bind(element, binding) { element.value = binding.value }, inserted(element) { element.focus() }, update(element, binding) { element.value = binding.value } }) //全局混入 Vue.mixin({ data() { return { x: 100, y: 200 } } }) //给Vue原型上添加一个方法 Vue.prototype.hello = () => { alert('给Vue原型上添加一个方法') } } }使用插件：在main.js中import之后使用Vue.use(plugin)scoped样式作用：让样式在局部生效，防止冲突写法：<style scoped> -
生命周期 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 还有三个待更新定义：又名：生命周期回调函数、生命周期函数、生命周期钩子；Vue在关键时刻帮我们调用的一些特殊名称的函数；名称不可更改，函数的具体内容根据实际情况编写；生命周期函数中的this指向的是vm 或 组件实例对象常用的生命周期钩子：mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等；beforeDestroy：清除定时器、解绑自定义事件、取消订阅等；关于销毁Vue实例：销毁后Vue开发者工具看不到任何信息；销毁后自定义事件会失效，但原生DOM事件依然有效；一般不在beforeDestroy操作数据，在这个钩子函数中即使操作了数据，也不会再触发更新流程<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引出生命周期</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- <h2 :style="{opacity: opacity}">你好，孙笑川</h2> --> <h2 :style="{opacity}">你好，孙笑川</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { opacity: 1 }, //Vue完成模板解析，并把初始的真实DOM元素放入页面后调用mounted mounted() { console.log('mounted'); setInterval(() => { this.opacity -= 0.01 if (this.opacity <= 0) { this.opacity = 1 } }, 16) } }) //通过外部的定时器实现（不推荐） /* setInterval(() => { vm.opacity -= 0.01 if (vm.opacity <= 0) { vm.opacity = 1 } }, 16) */ </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分析生命周期</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>当前的n值是：{{n}}</h2> <button @click="add">点我n+1</button> <button @click="bye">销毁vm</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', // template: ` // <div> // <h2>当前的n值是：{{n}}</h2> // <button @click="add">点我n+1</button> // </div> // `, data: { n: 1 }, methods: { add() { console.log('add'); this.n++ }, bye() { console.log('销毁vm'); this.$destroy(); } }, watch: { n() { console.log('n变了') } }, beforeCreate() { //无法通过vm访问到data中的数据，methods中的方法 console.log('beforeCreate') }, created() { //可以通过vm访问到data中的数据，methods中的方法 console.log('created') }, beforeMount() { //页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作最终都不奏效 console.log('beforeMount') }, mounted() { //页面呈现的是Vue编译过的DOM结构，所有对DOM的操作均有效（Vue不推荐直接操作DOM） console.log('mounted') }, beforeUpdate() { console.log('beforeUpdate') //页面和数据尚未保持同步 //console.log(this.n) //debugger; }, updated() { console.log('updated') //页面和数据保持同步 //console.log(this.n) //debugger; }, beforeDestroy() { console.log('beforeDestroy') //能访问数据，能调用方法，但销毁之前对数据的所有操作都不再会触发更新 this.add() }, destroyed() { console.log('destroyed') } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引出生命周期</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 :style="{opacity}">你好，孙笑川</h2> <button @click="stop">停止变换</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { opacity: 1 }, methods: { stop() { clearInterval(this.timer) } }, //Vue完成模板解析，并把初始的真实DOM元素放入页面后调用mounted mounted() { console.log('mounted'); this.timer = setInterval(() => { this.opacity -= 0.01 if (this.opacity <= 0) { this.opacity = 1 } }, 16) }, beforeDestroy() { clearInterval(this.timer) } }) </script> </body> </html>
-
组件 概念：局部功能或代码的集合1.使用组件的三个步骤（1）定义（创建组件）（2）注册组件（3）使用组件（写组件标签）2. 如何定义一个组件使用Vue.extend(options)创建，其中options 和 new Vue(options)传入的options几乎一致，区别如下：（1）组件中不写el，因为最终所有的组件都要经过一个vm管理，由vm中的 el决定服务于哪个容器；（2）data必须写成函数，避免组件被复用时数据存在引用关系；注：使用template可以配置组件结构3. 如何注册组件（1）局部注册：new Vue()时传入components选项；（2）全局注册：Vue.component('组件名', 组件位置)4. 编写组件标签<demo></demo><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 3.组件标签 --> <hello></hello> <hr> <school></school> <hr> <student></student> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //1.创建组件 //school组件 const school = Vue.extend({ template: ` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">学校信息</button> </div> `, data() { return { schoolName: '家里蹲', address: '北京' } }, methods: { showName() { alert(this.schoolName) } } }) //student组件 const student = Vue.extend({ template: ` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data() { return { studentName: '孙笑川', age: 33 } } }) //hello组件 const hello = Vue.extend({ template: ` <div> <h2>你好</h2> </div> ` }) //2.全局注册组件 Vue.component('hello', hello) //创建Vue实例 new Vue({ el: '#root', //2.注册组件（局部注册） components: { school,student } }) </script> </body> </html>5. 几个注意事项（1）组件名：一个单词组成：首字母小写 demo首字母大写 Demo多个单词组成kebab-case：my-demoCamelCase（大驼峰）：MyDemo（需在vue-cli脚手架环境中）注：组件名尽可能回避html关键字；可以使用name配置项指定组件的名称（2）组件标签第一种写法：第二种写法：<demo/>==注：第二种写法如果不在脚手架环境中，会导致后续组件无法渲染==（3）简写形式const demo = Vue.extend(options) 可简写为：const demo = options<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>几个注意的点</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>{{msg}}</h2> <school></school> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false const school = Vue.extend({ template: ` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data() { return { schoolName: '家里蹲', address: '北京' } } }) //创建Vue实例 new Vue({ el: '#root', data: { msg: '几个注意的点' }, components: { school } }) </script> </body> </html>6. VueComponent（1）demo组件本质是一个名为VueComponent的构造函数，由Vue.extend生成；（2）只需写<demo> 或 <demo></demo>，Vue解析时会帮我们创建demo组件的实例对象；（3）每次调用Vue.extend，返回的都是一个全新的VueComponent（4）关于this指向组件配置中：data，methods，watch，computed等函数中，它们的this指向均是VueComponentnew Vue(options)配置中：data，methods，watch，computed等函数中，它们的this指向均是Vue实例对象（5）VueComponent简称组件实例对象（vc）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件的嵌套</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <app></app> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //student组件 const student = Vue.extend({ template: ` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data() { return { studentName: '孙笑川', age: 33 } } }) //school组件 const school = Vue.extend({ template: ` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <student></student> </div> `, data() { return { schoolName: '家里蹲', address: '北京' } }, components: { student } }) //hello组件 const hello = Vue.extend({ template: ` <div> <h2>你好</h2> </div> ` }) const app = Vue.extend({ template: ` <div> <hello></hello> <school></school> </div> `, components: { school,hello } }) //创建Vue实例 new Vue({ el: '#root', //注册组件 components: { app } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueComponent</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <school></school> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false const school = Vue.extend({ template: ` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data() { return { schoolName: '家里蹲', address: '北京' } } }) console.log(school) //创建Vue实例 new Vue({ el: '#root', components: { school } }) </script> </body> </html>7. 一个重要的内置关系VueComponent.prototype.__proto__ === Vue.prototype为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一个重要的内置关系</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- vm与vc严格来说不能划等号，vc与vm接收相同的选项，如data，computed，watch，methods以及生命周期钩子函数等，但像el这样的根实例配置项仅vm有 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype 为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法 --> <div id="root"> <school></school> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false Vue.prototype.x = 99; const school = Vue.extend({ template: ` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data() { return { schoolName: '家里蹲', address: '北京' } } }) console.log(school.prototype.__proto__.x) /* //定义一个构造函数 function Demo() { this.a = 1; this.b = 2; } //创建一个demo的实例对象 const c = new Demo(); //显示原型属性 console.log(Demo.prototype); //隐式原型属性 console.log(c.__proto__); console.log(Demo.prototype === c.__proto__); //通过显示原型属性操作原型对象，追加一个属性 Demo.prototype.x = 99; */ </script> </body> </html>
-
过滤器 定义：对要显示的数据进行特点格式化后再显示语法：注册过滤器：Vue.filter(name,callback) 或 new Vue(filters:{})使用：{{xxx | filterName}}（全局注册） 或 v-bind:xxx="xxx | filterName" （局部过滤器）注：过滤器可以接受额外的参数，多个过滤器可以串联（使用管道符 |连接 ），并按顺序执行没有改变原有的数据，是产生新的对应的数据<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤器</title> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="../js/dayjs.min.js"></script> </head> <body> <div id="root"> <h2>显示格式化后的时间</h2> <h3>现在是：{{time}}</h3> <!-- 计算属性实现 --> <h3>格式化后为（计算属性）：{{fmtTime}}</h3> <!-- methods实现 --> <h3>格式化后为（methods方法）：{{getFmtTime()}}</h3> <!-- 过滤器实现 --> <h3>格式化后为（过滤器）：{{time | timeFormat}}</h3> <!-- 过滤器实现（传参） --> <h3>格式化后为（过滤器传参）：{{time | timeFormat('YYYY-MM-DD HH:mm:ss') | strSub}}</h3> <h3 :str="str | strSub">{{str}}</h3> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //全局过滤器 Vue.filter('strSub',function (value) { return value.slice(0,4) }) //创建Vue实例 new Vue({ el: '#root', data: { str: 'ABCDEFG', time: Date.now() }, computed: { fmtTime() { return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss') } }, methods: { getFmtTime() { return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss') } }, //局部过滤器 filters: { timeFormat(value, str='YYYY-MM-DD HH:mm:ss') { // return dayjs(value).format('YYYY-MM-DD HH:mm:ss') return dayjs(value).format(str) } } }) </script> </body> </html>
-
内置指令 1. v-text作用：向其所在的节点中渲染文本内容注：v-text会替换掉节点中的内容，{{xxx}}则不会<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-text指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- v-bind：单向绑定，可简写为:xxx v-model：双向数据绑定 v-for：遍历数组、对象、字符串 v-on：绑定事件监听，可简写为@ v-if：条件渲染 v-else：同理 v-show：同理 --> <div id="root"> <div>你好，{{name}}</div> <div v-text="name">你好，</div> <div v-text="str"></div> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川', str: '<h3>孙笑川</h3>' } }) </script> </body> </html>2. v-html作用：向指定节点渲染包含html结构的内容与插值语法的区别：1. v-html会替换掉节点中所有的内容，{{xxx}}不会；2. v-html可以识别html结构注：存在安全性问题，1. 在网站上动态渲染任意html很危险，容易导致XSS攻击；2. 提交内容上不使用html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-html指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <div>你好，{{name}}</div> <div v-html="str"></div> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川', str: '<h3>孙笑川</h3>' } }) </script> </body> </html>3. v-cloak定义：本质是一个特殊属性（没有值），Vue实例创建完毕并接管容器后，会删掉v-cloak属性使用css配合该指令，可以解决网速慢等原因引起的页面直接展示{{xxx}}的问题<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-cloak指令</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="root"> <div v-cloak>你好，{{name}}</div> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { name: '孙笑川', } }) </script> </body> </html>4. v-once定义：v-once所在节点在初次动态渲染后，就视为静态内容了以后数据的改变不会引起v-once所在结构的更新，可用于性能优化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-once指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 v-once>初始值：{{n}}</h2> <h2>当前值：{{n}}</h2> <button @click="n++">点我n+1</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { n: 1 } }) </script> </body> </html>5. v-pre定义：跳过其所在节点的编译过程可以利用该指令跳过：没有使用指令语法、插值语法的节点，加快编译<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-pre指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 v-pre>你好，孙笑川</h2> <h2>当前值：{{n}}</h2> <button @click="n++">点我n+1</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { n: 1, } }) </script> </body> </html>
-
自定义指令 语法：局部指令new Vue({ directives: {指令名:配置对象} }) 或 new Vue({ directives: {指令名:回调函数} })全局指令Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)配置对象中常用的三个回调：bind：指令与元素成功绑定时调用inserted：指令所在元素被插入页面时调用update：指令所在的模板被重新解析时调用注：指令定义时不加 v-，但使用时要加 v-指令名如果是多个单词，要使用kebab-case（短横杠）命名方式，不使用camelCase命名方式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数据放大10倍 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点 --> <div id="root"> <h3>当前的n值是：<span v-text="n"></span></h3> <h3>放大10倍后的n值是：<span v-big="n"></span></h3> <!-- 多个单词命名方式 --> <!-- <h3>放大10倍后的n值是：<span v-big-number="n"></span></h3> --> <button @click="n++">点我n+1</button> <hr> <input type="text" v-fbind:value="n"> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //自定义全局指令 Vue.directive('fbind', { //指令与元素成功绑定时调用 bind(element, binding) { console.log('bind', this) //此处的this是window element.value = binding.value }, //指令所在元素被插入页面时调用 inserted(element) { console.log('inserted') element.focus() }, //指令所在的模板被重新解析时调用 update(element, binding) { console.log('update') element.value = binding.value element.focus() } }) //创建Vue实例 new Vue({ el: '#root', data: { n: 1 }, directives: { //big函数什么时候被调用？ //1.指令与元素成功绑定时 //2.指令所在的模板被重新解析时 big(element, binding) { element.innerText = binding.value * 10 }, /* 'big-number'(element,binding) { element.innerText = binding.value * 10 }, */ /* fbind: { //指令与元素成功绑定时调用 bind(element, binding) { console.log('bind', this) //此处的this是window element.value = binding.value }, //指令所在元素被插入页面时调用 inserted(element) { console.log('inserted') element.focus() }, //指令所在的模板被重新解析时调用 update(element, binding) { console.log('update') element.value = binding.value element.focus() } } */ } }) </script> </body> </html>
-
列表渲染 1. 基本列表v-for指令：用于展示列表数据语法：v-for="(item,index) in list" :key="index"可以遍历数组，对象，字符串，指定次数<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本列表</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 遍历数组 --> <h2>用户信息（遍历数组）</h2> <ul> <li v-for="p in persons" :key="p.id"> {{p.name}} - {{p.age}} </li> </ul> <!-- 遍历对象 --> <h2>汽车信息（遍历对象）</h2> <ul> <li v-for="(c, index) in car" :key="index"> {{index}} - {{c}} </li> </ul> <!-- 遍历字符串 --> <h2>遍历字符串</h2> <ul> <li v-for="(char, index) in str" :key="index"> {{index}} - {{char}} </li> </ul> <!-- 遍历指定次数 --> <h2>遍历指定次数</h2> <ul> <li v-for="(num, index) in 5" :key="index"> {{index}} - {{num}} </li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { persons:[ {id:1,name:'孙笑川',age:33}, {id:2,name:'刘波',age:32}, {id:3,name:'Giao哥',age:34} ], car: { name: '五菱宏光Mini', price: '3-4万', color: 'pink' }, str: 'hello' } }) </script> </body> </html>2. key的原理虚拟DOM中key的作用：key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后进行新旧虚拟DOM的差异比较（diff算法）；对比规则（1）旧虚拟DOM中找到了与新虚拟DOM相同的key若虚拟DOM中内容没变，直接使用之前的真实DOM；若虚拟DOM中内容改变，则生成新的真实DOM，随后替换页面中之前的真实DOM（2）旧虚拟DOM中没有找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到页面用index作为key可能引发的问题（1）若对数据进行逆序添加、删除等破坏原有顺序的操作，会产生没必要的真实DOM更新（界面没问题，但效率低）（2）如果结构中还包含输入类的DOM，会产生错误的DOM更新，界面出现问题如何选择key（1）建议使用每条数据的唯一标识作为key（2）如果不存在对数据进行逆序添加、删除等破坏原有顺序的操作，仅用于渲染列表进行展示，也可以使用index下标索引作为key<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>key的原理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 遍历数组 --> <h2>用户信息（遍历数组）</h2> <button @click.once="add">添加用户</button> <ul> <li v-for="p in persons" :key="p.id"> {{p.name}} - {{p.age}} <input type="text"> </li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { persons:[ {id:1,name:'孙笑川',age:33}, {id:2,name:'刘波',age:32}, {id:3,name:'Giao哥',age:34} ] }, methods: { add() { const p = {id:4,name:'药水哥',age:33}; this.persons.unshift(p) } } }) </script> </body> </html>3. Vue监视数据的原理Vue会监视data中所有层次的数据如何监测对象中的数据？通过setter，在new Vue时就传入要监测的数据（1）对象中后追加的属性，Vue默认不做响应式处理（2）针对（1）中的问题，可以使用如下API：Vue.set(target, propertyName/index, value) 或 vm.$set(target, propertyName/index, value)如何监测数组中的数据？通过包裹数组更新元素的方法实现，即：（1）调用原生对应的方法（2）重新解析模板 ---> 更新页面修改数组元素的方法（1）API：push(),pop(),shift(),unshift(),ssplice(),sort(),reverse()（2）Vue.set()或vm.$set注：Vue.set()或vm.$set 不能给vm或vm的根数据对象添加属性<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue监测数据改变的原理（对象）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>姓名：{{name}}</h2> <h2>年龄：{{33}}</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川', age: 33 } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue监测数据改变的原理（数组）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>老师姓名：{{name}}</h2> <h2>老师年龄：{{33}}</h2> <hr> <button @click="addSex">添加性别属性,默认值男</button> <h2>学生姓名：{{student.name}}</h2> <h2 v-if="student.sex">学生性别：{{student.sex}}</h2> <h2>学生年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2> <h2>爱好：</h2> <ul> <li v-for="(h,index) in student.hobbies" :key="index"> {{h}} </li> </ul> <hr> <h2>朋友们</h2> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}} - {{f.age}} </li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川', age: 33, student: { name: '刘波', sex: '', age: { rAge: 30, sAge: 18, }, hobbies: ['跑步','游泳','打篮球'], friends: [ {name:'张三',age:18}, {name:'李四',age:19}, {name:'王五',age:10} ] } }, methods: { addSex() { //Vue.set(this.student, 'sex', '男'); this.$set(this.student, 'sex', '男'); } } }) </script> </body> </html>
-
收集表单数据 <input type="text">，v-model收集的是value值，用户输入的就是value值；<input type="radio">，v-model收集的是value值，且要给标签配置value属性；<input type="checkbox">（1）如果没有配置input的value属性，那么收集的是checked（勾选/未勾选，布尔值）；（2）配置了input的value属性： a. v-model的初始值是非数组，那么收集的是checked（勾选/未勾选，布尔值）； b. 反之，初始值是数组，那么收集的就是value组成的数组注：v-model的三个修饰符：lazy：失去焦点再收集数据；number：输入字符串转为有效的数字；trim：输入首尾空格过滤<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>收集表单数据</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <form @submit="demo"> <!-- <label for="demo">账号：</label> --> <!-- <input type="text" id="demo"> --> 账号：<input type="text" v-model.trim="userInfo.account"> <br><br> 密码：<input type="password" v-model="userInfo.password"> <br><br> 性别： 男<input type="radio" name="sex" value="male" v-model="userInfo.sex"> 女<input type="radio" name="sex" value="female" v-model="userInfo.sex"> <br><br> 年龄：<input type="number" name="age" v-model.number="userInfo.age"> <br><br> 爱好： <input type="checkbox" value="eat" v-model="userInfo.hobby">吃饭 <input type="checkbox" value="sleep" v-model="userInfo.hobby">睡觉 <input type="checkbox" value="play" v-model="userInfo.hobby">打豆豆 <br><br> 所属校区： <select v-model="userInfo.city"> <option value="">请选择</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> <br><br> 其他信息： <textarea v-model.lazy="userInfo.other"></textarea> <br><br> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a> <br> <button>提交</button> </form> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { userInfo: { account: '', password: '', sex: 'male', age: '', hobby: [], city: '', other: '', agree: '' } }, methods: { demo() { console.log(JSON.stringify(this.userInfo)) alert('提交成功') } } }) </script> </body> </html>
