VUE全家桶之VUE基础

前言

核心思想

数据的双向绑定
组件系统

MVVM设计思想

M(model) V(view) VM(View-Model)
model,数据层 Vue 中数据层都放在 data 里面
view,视图 即我们的 HTML 界面
view-model控制器,将数据和视图层建立联系 Vue 的实例就是 vm

插值表达式 mustache 胡子语法

{{msg}}
{{1 + 2}}
{{1 > 3 ? 1 : 3}}
有闪动的问题(绑定v-cloak解决)

vue指令

本质 自定义属性

格式 以v-开头的属性
注意: 在指令中不要写插值语法 直接写对应的变量名称
例如在 v-text 中赋值的时候不要在写插值语法
一般属性中不加 {{}} 直接写对应的数据名
Vue 中只有在标签的内容中才用插值语法

v-model 双向数据绑定

限制在 components中使用
v-model的低层实现原理分析

双向数据绑定
当数据发生变化的时候,视图也就发生变化
当视图发生变化的时候,数据也会跟着同步变化

v-on (缩写@click)

用来绑定事件的
形式如:v-on:click,缩写为 @click
@(需要绑定的事件) 在VM的methods里写绑定的对应方法

v-bind (缩写 :需要被绑定的属性)

v-bind是用来绑定属性的,属性值是data中的成员。
简写形式b-bind:属性名 -> :属性名 加了: 后 属性名里的值就是变量名 在Vue实例的data里面找
用法跳转

属性绑定
对象语法
<div v-bind:class="{ active: isActive }"></div>
数组语法
<div v-bind:class="[activeClass, errorClass]"></div>

样式绑定
对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-if ,v-else, v-else-if

v-if
根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ,将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果

v-else
限制:前一兄弟元素必须有 v-if 或 v-else-if。
用法:为 v-if 或者 v-else-if 添加“else 块”

v-else-if
限制:前一兄弟元素必须有 v-if 或 v-else-if。
用法:表示 v-if 的“else if 块”。可以链式调用

v-show

根据表达式之真假值,切换元素的 display CSS property。
当条件变化时该指令触发过渡效果

v-show 和 v-if的区别

v-show 本质就是标签 display 设置为 none,控制隐藏
v-show 只编译一次,后面其实就是控制 css,而 v-if 不停的销毁和创建,故 v-show 性能更好一点
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
v-if 切换有一个局部编译/卸载的过程,切换过程中会销毁和重建内部的事件监听和子组件

v-for

基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression,为当前遍历的元素提供别名
用于循环的数组里面的值可以是对象,也可以是普通元素
不推荐同时使用v-if和v-for
当 v-if与v-for一起使用时 v-for具有比v-if更高的优先级(即每次边执行循环再边判断)

对象形式


<div v-if='v==13' v-for='(v,k,i) in obj' :key="k">
{{v + '---' + k + '---' + i}}
</div>

数组形式

<ul :key="item.id" v-for="(item,index) in list">
<li>{{index}}</li>
<li>{{item.name}}</li>
<li>{{item.age}}</li>
<li>{{item.hobby}}</li>
</ul>

key 的作用,每个节点做一个唯一标识,为了高效的更新虚拟 DOM

v-solt

详见插槽(重要)

不常用指令

v-cloak

目的 解决插值表达式闪动的问题
原理 以自定义属性样式隐藏内容 在内存中进行替换 替换完成后 去除这个自定义属性 所以数据显示出来
用法 在差值表达式中添加 v-cloak 指令

v-text

目的 以纯文本的形式填充内容 比插值表达式更简洁 没有闪动问题
用法


注意 此处为单向绑定,数据对象上的值改变,插值会发生变化,如果数据中有 HTML 标签会将 html 标签一并输出,不会解析,但是当插值发生变化并不会影响数据对象的值

v-html

与 v-text 区别在于 v-text 输出的是纯文本,浏览器不会对其再进行 html 解析,但 v-html 会将其当 html 标签解析后输出
存在安全问题 本网站内部数据可以使用 来自第三方的数据不可使用
用法

v-pre

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程
一些静态的内容不需要编译加这个指令可以加快渲染
用法 {{msg}}

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
用法 {{ msg}}

vue全局API

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值