Vue基本用法

Posted 2023-03-09

参考技术A Vue:渐进式javascript框架
声明式渲染-->组件系统-->客户端路由-->集中状态管理-->项目构建

Vue的基本使用

Vue的两种挂载方式:

模板语法:
1.插值表达式
存在闪动问题:快速刷新浏览器时,有时会显示xxx内容,然后替换为要显示的值.解决的办法-->指令(先隐藏,替换好值之后再显示)
2.指令(指令的本身就是自定义属性)
以v-开头 例如v-cloak
html:

js

效果:

使用v-cloak
html:

css:

效果:

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

双向数据绑定:v-model

2.MVVM私享
M(model)
V(view)
VM(view-model)

mvc,mvp和mvvm的区别:
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

3.事件绑定
事件冒泡和事件捕获
3.1v-on指令
示例:

效果:

3.2事件函数的调用方式
html:

js

3.3事件函数参数传递
普通参数和事件对象

3.4事件修饰符
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

html:

js:

e.prevent等同于
event.preventDefault()

3.5按键修饰符
在Vue中可以通过 config.keyCodes 自定义按键修饰符别名
示例:Vue.config.keyCodes.aaa = 65;

自定义按键:

4.属性绑定
v-bind指令:被用来响应地更新 HTML 属性

html:

js:

效果:

5.v-model的实现原理分析
①

等价于
②

第一种实现只是后面两种写法的语法糖.
当在input元素中使用v-model实现双数据绑定，其实就是在输入的时候触发元素的input事件，通过这个语法糖，也能够实现父子组件数据的双向绑定.
父组件:

子组件:

6.样式绑定v-bind:class
1️⃣class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
①动态切换多个class
html

css

js

效果:

②样式绑定到对象

③数组语法:

默认class会被保留合并

2️⃣style

三元表达式:

7.分支循环结构
7.1

v-show与v-if的区别:

v-show:

v-if:

1.原理

2.应用场景

7.2 循环结构

为什么需要独一无二的key的简单示例:

效果:

点击查看更多:
v-for:需要key的原因:
v-for遍历对象