河南省智慧团建,淄博seo外包公司,wordpress菜单高度,wordpress中文商城主题文章目录 Vue简介Vue的特点Hello, Vue Vue基本语法模板语法数据绑定#xff08;v-bind、v-model#xff09;el与data的两种写法 数据代理实现原理Object.defineProperty()数据代理 事件处理#xff08;v-on:click / click#xff09;事件修饰符键盘事件#xff08;略… 文章目录 Vue简介Vue的特点Hello, Vue Vue基本语法模板语法数据绑定v-bind、v-modelel与data的两种写法 数据代理实现原理Object.defineProperty()数据代理 事件处理v-on:click / click事件修饰符键盘事件略 计算属性与监视computed、watch计算属性-computed监视属性-watch深度监视-deepcomputed和watch的区别 样式渲染class与style绑定条件渲染 Vue简介 Vue的特点 3、使用虚拟DOM优秀的Diff算法尽量复用DOM节点。 Hello, Vue
1、Vue实例与HTML容器是一一对应的使用el属性让容器与Vue实例关联起来。 2、Vue可以使用插值语法双层花括号解析Vue的data属性插值语法还可以解析其他的js表达式所谓js表达式就是可以产生一个值的js语句一般为元素赋值语句的等号右边部分或者函数的返回值
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0script src../js/vue.js/scripttitle初始Vue/title
/head
bodyscript typetext/javascriptVue.config.productionTip false; // 开发环境 关闭vue对于生产环境的提示信息/scriptdiv id r1h1{{msg}} // vue的插值语法/h1/divscript typetext/javascriptconst x new Vue({el: #r1, // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器data: {msg: hello vue}});/script
/body/htmlVue基本语法
模板语法
Vue模板语法有2大类 1、插值语法
功能用于解析标签体开闭标签之间部分内容。写法{{****}} ****是js表达式且可以读取vue实例中data的所有属性。
2、指令语法
功能用于解析标签包括标签属性标签体内容绑定事件……举例v-bind:href *** 或简写为 ::href******同样要写js表达式且可以直接读取到data中的属性。注vue中除了v-bind还有很多v-???的属性。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0script src../js/vue.js/scripttitle初始Vue/title
/head
bodyscript typetext/javascriptVue.config.productionTip false; // 开发环境 关闭vue对于生产环境的提示信息/scriptdiv id rooth1差值语法h3{{name}}/h3 // vue的插值语法/h1h1指令语法a v-bind:hrefschool.url.toUpperCase()点我去{{school.url}}学习/a/h1/divscript typetext/javascriptconst x new Vue({el: #root, // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器data: {name: jackschool:{name:ULCA,url:https://www.ulca.com}}});/script
/body
/html数据绑定v-bind、v-model
Vue中有2中数据绑定方式
1、单向绑定v-bind数据只能从data流向页面2、双向绑定v-model数据不仅能从data流向页面也可以从页面流向data。 双向绑定一般应用在表单元素上如input、select等这些元素都有value属性v-model绑定的正是这个value属性v-model:value 可以简写为v-model因为v-model默认收集的就是value值。
el与data的两种写法
el
使用el属性绑定容器使用代码.$mount(#root)绑定
下边演示了一个案例使用一个定时器在1秒后再建立vue实例与html容器之间的关联。 data
使用data属性对象式使用函数返回值函数式。当学习组件时data必须使用函数式否则会报错。一个重要的原则由Vue管理的函数不可以写箭头式一旦写了箭头式this就不再是Vue实例了。 数据代理实现原理
Object.defineProperty()
Object.defineProperty()字面意思就是可以为对象设置属性且在设置属性时可以控制属性的一些高级选项
enumerable是否可以枚举writable是否可修改configurable是否可删除 此外可以设置属性的get()和set()方法。
数据代理
Vue中通过VM对象来代理data对象属性中的操作读/写数据代理可以更加方便的操作data中的数据实现原理通过Object.defineProperty()把data对象中所有属性添加到vm上为每一个属性指定getter和setter方法在这些方法中去读/写data中对于的属性。
事件处理v-on:click / click
使用v-on:××× 或×××绑定事件其中××× 是事件名。事件的回调需要配置在method对象中最终会在vm上。method中配置的函数都是被Vue管理的函数this指向的就是组件实例对象最好不要用箭头函数lambda表示。clickdemo 和 clickdeme($event)效果是一致的但是后者可以给函数传参数。
事件修饰符
Vue中的事件修饰符
prevent阻止默认事件常用stop阻止事件冒泡即事件不会向外层传播常用once事件只触发一次常用capture使用事件的捕获模式即外层容器的事件也会被捕获self只有event.target是当前操作的元素才触发事件passive事件的默认行为立即执行无需等待事件回调执行完毕。
键盘事件略
计算属性与监视computed、watch
计算属性-computed
计算属性的重点突出在属性两个字上(属性是名词)首先它是个属性其次这个属性有计算的能力(计算是动词)这里的计算就是个函数;简单点说它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)仅此而已;可以想象为缓存
计算在虚拟dom中进行计算结果在缓存中不会随时间变化当计算属性中的参数有更新时虚拟dom清空重新计算这时计算属性才会发生变化。 注意计算属性是vue component的属性可以用方法定义但不可用作方法调用。
计算属性的优势有缓存多次调用只计算一次。仅当计算所依赖的数据变化后才会重新修改。
computed: {fullname:{get(){return this.firstName - this.lastName;}}}计算属性也可以使用函数返回值设置但是methodscomputed 方法名不能重名重名字后只会调用methods的方法。
computed: {//计算属性methodscomputed 方法名不能重名重名字后只会调用methods的方法fullname: function () {return this.firstName - this.lastName;}// 或者函数也可直接这样写fullname() {return this.firstName - this.lastName;}}监视属性-watch
监视属性有两种配置方式
Vue实例中使用watch调用Vue实例的.$watch方法
主要是可以设置handler(new, old)方法每次监测的值变化时都会调用该方法。
和计算属性一样监测属性也可以进行简写
深度监视-deep
监视多级结构中的某个属性时使用’number.a’指定对象的key。 深度监视
Vue中的watch默认不监测对象内部值的改变配置deep:true则可以监测对象内部值的改变多层
在下边的例子中number对象开启了深度监测无论属性a还是b变化都会触发handler(。
computed和watch的区别
computed能完成的功能watch都可以完成。watch能完成的功能computed不一定能完成例如watch可以进行异步操作。
两个重要的小原则
被Vue管理的函数最好不要写为箭头函数即写成普通函数这样this的指向才是Vue实例对象。所有不被Vue管理的函数定时器回调函数Ajax的回调函数等最好写成箭头函数这样this的指向才是Vue实例对象。
样式渲染
class与style绑定
条件渲染
