coderwhy vue课件_第二章 vue的学习

  01 Vue中的MVVM思想

看图肯定是很晕的，看代码比较直观

解析计算器的MVVM：

View依然是我们的DOM

Model就是我们我们抽离出来的obj

ViewModel就是我们创建的Vue对象实例

这里可以看到所谓的MVVM其实就是：

model数据(动态变化的，服务器请求的)

view视图(页面所展示的)DOM

vuemodel视图模型(model 和 view的中转站，即监听DOM，又绑定数据，实时反馈)

ps：应该可以理解了吧？不理解的私下q我哈哈。这个思想很重要。

　02 Vue的生命周期

这个图是老师课件里头翻译过的，我怕有一天自己忘了，先挂上。生命周期是每个事物出生就会有的东西，start--end。

　03 基础语法

{{ }}Mustache 胡子语法(内容)

v-once 只会在首次展示，比较特殊

v-html=“url”解析网站地址

v-text=“message” 类似于mustache,比较笨笨，只会展示本身，会覆盖标签里面的新增

v-pre=“”原封不动展示标签内的内容。不解析

v-cloak 插值闪烁，过渡不友好。在vue2.6以后淘汰。

　04 v-bind

作用：动态绑定属性

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

v-bind : src=“logourl”动态绑定图片

v-bind : href“link”动态绑定网站

v-bind : class 动态绑定 

“{}”对象语法：

用法一：

直接通过{}绑定一个类

Hello World

用法二：

也可以通过判断，传入多个值

Hello World

用法三：

和普通的类同时存在，并不冲突

注：如果isActive和isLine都为true，那么会有title/active/line三个类

<:>Hello World

用法四：

如果过于复杂，可以放在一个methods或者computed中

注：classes是一个计算属性

Hello World

“[] ”数组语法

用法一：

直接通过{}绑定一个类

Hello World

用法二：

也可以传入多个值

Hello World

用法三：

和普通的类同时存在，并不冲突

注：会有title/active/line三个类

Hello World

用法四：

同上

//

语法糖 : 

v-bind绑定style

对象：

:style="{color: currentColor, fontSize: fontSize + 'px'}"

style后面跟的是一个对象类型

对象的key是CSS属性名称

对象的value是具体赋的值，值可以来自于data中的属性

数组：

style后面跟的是一个数组类型

多个值，分割即可

　05 计算属性

计算属性基本使用：

computed : { 

f : funtion(){

return this.a+this.b

 }

}

计算属性复杂使用：

computed :{

f ：fuction(){

let result=0

for(let i=0；i)

result + = this.books[i].price

}

return result

}

计算属性的setter和getter：

计算属性的缓存(多次使用时 计算属性只会调用一次)：

写在最后：

这是我记录学习的过程

每周一更，不定时更新

如果有什么好的建议或意见

可以通过小程序给我留言哈

学无止境，一起加油！

END -

文字 | sunny学习笔记?

图片 | coderwhy老师课件