学习Vue 入门到实战——学习笔记

闲聊: 自从进了现在的公司,小颖就再没怎么接触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测试

+++{{msg}}---

====

复制代码 v-html:更新元素的 innerHTML 。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。 注意: 在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用在用户提交的内容上。 在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局
复制代码 .stop 阻止事件冒泡 复制代码
复制代码 点击两个div中的按钮后只执行了 btnClick 事件 不加.stop时 .prevent 阻止默认行为 有问题找百度 点击a标签 页面不跳转 .capture 添加事件侦听器时,使用事件的捕获模式 复制代码
复制代码 点击按钮 .self 只出发元素自身的事件 复制代码
复制代码 点击按钮 .once 事件只触发一次 有问题找百度 点击a标签只有第一次会阻止默认事件,并且触发a标签的点击事件,第二次就不会了阻止默认事件,也不会触发a标签的点击事件。 未完待续············· 作者:爱喝酸奶的吃货 出处:http://www.cnblogs.com/yingzi1028/ 本博客文章大多为原创,转载请请在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。https://www.cnblogs.com/yingzi1028/p/10310255.html
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信