闲聊:
自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻。
视频地址:Vue 入门到实战1、Vue 入门到实战2
学习内容:
什么是vue?
官网回答:
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
视频笔记:
vue是目前最火的前端框架、react是目前最流行的前端框架(react除了开发网站,还可以开发手机app,vue语法也可以用于开发手机app,需借助Weex)
vue是一套构建用户界面的框架,只关注视图层,所以易上手,而且也便于与第三方库或既有项目整合。(vue的优点)
库和框架的区别
框架:是一套完整的解决方案,对项目的侵入性比较大,项目如果需要换框架,则需重新搭建整个项目。
库:提供一个小功能,对项目的入侵性比较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
如何理解MVVM
MVVM是前端视图层的分层开发思想,分成M、V和VM,其中VM是MVVM核心思想,因为VM是M和V之间的调度者。
——>取 ——> 取 M:ajax获取的数据
M VM V VM:M、V之间的调度者
< ——存 <—— 存 V:每个页面中的html代码
使用MVVM的优点:为了我们开发更加方便,因为MVVM提供了数据的双向绑定。(数据的双向绑定是由VM提供的)。
vue指令:
v-cloak:能解决插值表达式闪烁问题。(经验证目前版本不存在闪烁问题 Vue.js v2.5.16)
v-text:更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。
示例:
复制代码
{{msg}}
复制代码
v-text与插值表达式({{}})的区别
v-text会覆盖元素中原来的内容,但是差值表达式只会替换自己的占位符,不会把整个元素内容清空。
示例:
复制代码
vue测试
复制代码
v-html:更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。
注意:
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用在用户提交的内容上。
在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局