黄金网站app视频下载小说,怎么对页面颜色进行设计,郑州网站排名优化公司,宣传片拍摄计划方案一.Vue实例内存图#xff1a;1.把Vue的实例命名为vm#xff0c;vm对象封装了对视图的所有操作包括数据读写、事件绑定、DOM更新2.vm的构造函数是Vue#xff0c;按照ES6的说法vm所属的类是Vue3.options是new Vue的参数一般称为选项或构造选项1.options里面有什么英文文档搜op…一.Vue实例内存图1.把Vue的实例命名为vmvm对象封装了对视图的所有操作包括数据读写、事件绑定、DOM更新2.vm的构造函数是Vue按照ES6的说法vm所属的类是Vue3.options是new Vue的参数一般称为选项或构造选项1.options里面有什么英文文档搜options中文文档搜选项即可得相关所有文档options的五类属性★数据data,props,propsData,computed,methods,watch★Domeltemplate,render,renderError★生命周期钩子beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed,errorCaptured★资源directives,filters,components★组合parent,mixins,extends,provide,inject★其他templateHTML模板语法展示内容表达式★{{ object.a }}表达式★{{ n1 }}可以写任何运算符★{{ fn(n) }}可以调用函数★如果值为undefined或者null就不显示★另一种写法为div v-text表达式/divHTML内容★假设data.x的值为stronghi/strong★div v-htmldata.x/div即可显示粗体的hi我就想展示{{ n }}★div v-pre{{ n }}/div★v-pre不会对模板进行编译2.绑定属性★绑定srcimg v-bind:srcx/★v-bind简写为img :srcx/★绑定对象
div :style{border:1px solid red,height:100}/div
//注意这里把100px’写成1003.绑定事件★v-on:事件名button v-on:clickadd1/button//点击之后Vue会运行add()
button v-on:clickxxx(1)xxx/button//点击之后Vue会运行xxx(1)
button v-on:clickn1xxx/button//点击之后Vue会运行n1
//即发现函数就加括号调用之否则直接运行代码★缩写button clickadd1/button//正常人都用缩写4.条件判断★if...elsediv v-ifx0x大于0/div
div v-else-ifx0x等于0/div
div v-elsex小于0/div5.循环★for(value,key) in 对象或数组ul
li v-for(u,index) in users :keyindex
索引{{index}} 值{{u.name}}
/li
/ul
ul
li v-for(value, name) in obj :keyname
属性名{{name}} 属性值{{value}}
/li
/ul6.显示、隐藏★v-showdiv v-shown%20 n 是偶数/div★近似等于div :style{display:n%20?block:none}n是偶数 /div其他指令cn.vuejs.org7.指令★什么是指令div v-textx/div
div v-htmlx/div
//以v-开头的就是指令★语法v-指令名:参数值如v-on:click-prevent8.修饰符★有些指令支持修饰符click.stopadd//表示阻止事件传播/冒泡
click.preventadd//表示阻止默认动作
click.stop.preventadd//同时表示两种意思★一共有多少修饰符呢v-on支持的有.{keycode|keyAlias}.stop.prevent.capture.self.once.passive.native快捷键相关.ctrl.alt.shift.meta.exect鼠标相关.left.right.middlev-bind支持的有.prop.camel.syncv-model支持的有.lazy.number.trim★总结★Vue模板主要特点有使用XML语法不是HTML
使用{{}}插入表达式
使用v-bind,v-on,v-html等指令操作DOM
使用v-ifv-for等指令实现条件判断与循环1入门属性el-挂载点可用$mount代替data-内部数据支持对象和函数优先用函数main.js对象的方式函数的方式浏览器methods-方法事件处理函数或者普通函数main.js浏览器components-Vue组件注意大小写,组件内的data必须以函数的形式显示main.jsdemo.vue的内容浏览器渲染或者main.js浏览器渲染四个钩子created,mounted,updated,destroyed★created-实例出现在内存中★mounted-实例出现在页面中★updated-实例更新了★destroyed-实例从页面和内存中消亡了main.jsDemo.vue浏览器渲染props-外部数据属性main.jsmessagen(传入字符串):messagen(传入this.n数据):fn(add)传入this.add函数Demo.vue浏览器渲染重要议题------数据响应式深入响应式原理 — Vue.jscn.vuejs.orgObject.defineProperty()developer.mozilla.orgObject.defineProperty★可以给属性添加value★可以给对象添加getter/setter★getter和setter用于对属性的读写和监控2.代理设计模式★对myData对象的属性进行读写全权由另一个vm负责★vm就是myData的代理类比房东租房★比如myData.n不用非要用vm.n来操作myData.n3.vmnew Vue({data:myData})★会让vm成为myData的代理proxy★会对myData的所有属性进行监控当data不存在object.b时的解决方法★把key声明好★使用Vue.set或者this.$setdata中有数组怎么办变更方法cn.vuejs.org2进阶属性computed-计算属性会根据依赖是否变化来缓存★如果依赖的属性没有变化就不会重新计算★getter/setter默认不会做缓存Vue做了特殊处理列表展示watch-侦听属性当数据变化时执行一个函数watchcn.vuejs.orgdeep:true是干什么的★object.a变了如果让object也变了设置deeptrue★object.a变了如果让object没有变设置deepfalse★deep的意思是监听object的时候是否往深了看directive-自定义指令属性自定义指令函数cn.vuejs.org声明一个局部指令声明一个全局指令mixins-混入属性混入就是复制示例main.jsapp.vuecomponents/Child1.vuemixins/log.js浏览器渲染选项智能合并等更多mixins描述cn.vuejs.orgextends-继承属性MyVue.js/Child1.vueprovide和inject-提供和注入main.jsApp.vuestyle
.app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.app.theme-blue button {background: blue;color: white;
}
.app.theme-blue {color: darkblue;
}.app.theme-red button {background: red;color: white;
}
.app.theme-red {color: darkred;
}
.app.fontSize-normal {font-size: 16px;
}
.app button {font-size: inherit;
}
.app.fontSize-small {font-size: 12px;
}
.app.fontSize-big {font-size: 20px;
}
/styleChild1.vue/Child2.vue...ChangeThemeButton.vue浏览器渲染
