第三章、vue基础精讲

3.1VUE实例

组件:全局组件,局部组件,vue的每个组件也是一个实例,有自己的实例属性和实例方法。

在console中调试vue,vm为vue的实例,凡是以$开头的都是vue的实例属性或者vue的实例方法。销毁实例,用vm.$destory()

第三章、vue基础精讲

3-2.vue实例生命周期

beforeMount及Mounted执行的时候的结果

第三章、vue基础精讲

第三章、vue基础精讲

3.3vue的模板语法

v-text及{{}}差值表达式的展示效果一样,v-html是可以输出html标签片段的转译,带有 “v-“ 的指令或者差值表达式{{}},都是js表达式,可以做js的一些操作。

3.4vue中的计算属性,方法和侦听器

怎么显示全名?

第一、用差值表达式

但是差值表达式显示内容就好,最好不要写逻辑

第三章、vue基础精讲

第二、计算属性,内置缓存,页面展示的时候会调用一次计算属性,如果计算属性(fullName)中所依赖的属性(this.firstName/this.lastName)不改变,这个计算属性就不会重新计算也就是不会再变,会一直用上一次计算的结果,这样会提高性能。

第三章、vue基础精讲

第三,使用方法实现,不如计算属性的性能好。

第三章、vue基础精讲

第四、使用侦听器,侦听器是监听什么的改变,可以监听属性是否改变。侦听器是侦听谁的改变,然后做一些操作

第三章、vue基础精讲

第三章、vue基础精讲

比较下计算属性和侦听器,computed、watch都具有缓存的机制,computed的语法比watch的语法简单很多,相反复杂很多,所以建议用computed计算属性。

3.5计算属性的getter和setter

1.用计算属性做一个初始用法

第三章、vue基础精讲

2.get是读取属性的意思,如下的最终结果跟上面一样。

第三章、vue基础精讲

3.set的用法是设置值

(1)打印set中设置的值

第三章、vue基础精讲

(2)在console中设置计算属性的值

第三章、vue基础精讲

(3)试着改变值得时候给依赖赋值

第三章、vue基础精讲

第三章、vue基础精讲

3.6Vue中的样式绑定

(1)class绑定

第一、对象的绑定是,class等于对象的属性,是否为对象的属性,取决于属性值

第三章、vue基础精讲

第二、class绑定数组

第三章、vue基础精讲

(2)style样式绑定

第一,绑定对象

第三章、vue基础精讲

第二,绑定数组

第三章、vue基础精讲

数组中也可以放入对象

第三章、vue基础精讲

3.7vue中的条件渲染

第一,v-if,v-else

第三章、vue基础精讲

第二,

第三章、vue基础精讲

第三、给标签加key值

第三章、vue基础精讲

第三章、vue基础精讲

第三章、vue基础精讲

3.8vue中的列表渲染

列表循环上要加key值,为了循环性能的提升。

模板占位符,就是循环两层的时候,必须外围加div,但是渲染会渲染多余的div所以用template代替div

第三章、vue基础精讲

对象做循环怎么做?

第三章、vue基础精讲

第三章、vue基础精讲

打印出来为

第三章、vue基础精讲

换成如下为

第三章、vue基础精讲

第三章、vue基础精讲

换成如下为

第三章、vue基础精讲

第三章、vue基础精讲

3.9、Vue中的set方法

数组-----改变数组页面也跟着改变

第一、直接改变引用

第二、用数组的的实例方法(比如push,pop,unshift,shifit等)

第三、用vue的set方法

第三章、vue基础精讲

第三章、vue基础精讲

第三章、vue基础精讲

第三章、vue基础精讲

改变对象,页面也跟着改变

第一、直接改变引用

第二、用vue的set方法(Vue.set || vm.$set)

上一篇:VUE.js入门学习(2)-基础精讲


下一篇:SpringMVC 参数传递