VUE全家桶之VUE基础
前言
核心思想
数据的双向绑定
组件系统
MVVM设计思想
M(model) V(view) VM(View-Model)
model,数据层 Vue 中数据层都放在 data 里面
view,视图 即我们的 HTML 界面
view-model控制器,将数据和视图层建立联系 Vue 的实例就是 vm
插值表达式 mustache 胡子语法
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}}