Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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

爱喝酸奶的吃货 2019-01-23 17:23:00 阅读数:263 评论数:0 点赞数:0 收藏数:0

闲聊:

     自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻。

视频地址:Vue 入门到实战1Vue 入门到实战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 或用一个额外的全局

1.数组

这是一个很大的h1

2.数组中使用三元表达式

这是一个很大的h1

3.数组中嵌套对象

这是一个很大的h1

4.直接使用对象

这是一个很大的h1

通过属性绑定为元素绑定style

1.直接在元素上,通过  :style  形式书写样式。

这是一个很大的h1

2.将样式对象,定义到data中,并直接引用到  :style 中

这是一个很大的h1

3. 在 :style 中通过数组,引用多个data中的样式对象。

这是一个很大的h1

事件修饰符的介绍

公用代码: vue测试

.stop 阻止事件冒泡

点击两个div中的按钮后只执行了 btnClick 事件

不加

.stop时

.prevent 阻止默认行为

有问题找百度

点击a标签

页面不跳转

.capture添加事件侦听器时,使用事件的捕获模式

点击按钮

 

.self 只出发元素自身的事件

点击按钮

.once事件只触发一次

有问题找百度

点击a标签只有第一次会阻止默认事件,并且触发a标签的点击事件,第二次就不会了阻止默认事件,也不会触发a标签的点击事件。

按键修饰符的介绍

用法:

全部的按键别名:

  1. .enter
  2. .tab
  3. .delete (捕获 删除 和 退格 键)
  4. .esc
  5. .space
  6. .up
  7. .down
  8. .left
  9. .right

小颖就不一一试了,拿    enter  键做个示例吧

.enter

代码: vue测试 添加

id:{{item.id}}---name:{{item.name}}

如何自定义按键修饰符呢

示例:

html中调用:

js:

Vue.config.keyCodes.f2 = 13;

 自定义指令

注意:vue中所有的指令,在调用的时候,都以 v-  开头

全局

示例:

私有(局部)

示例: {{1+1}}

 

版权声明
本文为[爱喝酸奶的吃货]所创,转载请带上原文链接,感谢

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领