Vue特性介绍
渐进式框架
什么是渐进式框架
按需应用
- 声明式渲染： 核心库，只当作模版引擎使用，将数据渲染到视图中
- 组件系统：将界面划分n个小模块
- 客户端路由： 做移动端SPA单页应用
- 大规模状态管理： 组件过多，共享数据
- 构建工具 ： 模块化，打包
Vue中的两个核心点
1. 响应的数据绑定
- 当数据发生改变====>自动更新视图。(双向绑定)
- 核心机制: 主要是利用
Object.defineProperty()方法中的setter和getter来代理数据，并且监控对数据的操作。
get
一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。
set
一个给属性提供 setter 的方法，如果没有 getter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。
2.组合的视图组件
- UI 页面映射为组件树
-
划分组件可维护、可重用、可调试
视图组件
虚拟DOM
- 运行js的速度很快，但是大量操作DOM的效率就相对很慢。时常在更新数据后会重新渲染页面，这样造成没有改变数据的地方也重新渲染DOM节点，这样就会造成了很大程度上的资源浪费和性能降低。
- 利用在内存中生成与真实环境DOM与之相对应的数据结构，这个在内存中生成的结构称之为虚拟DOm。
虚拟DOM渲染过程
-
当数据发生变化时，能够以最小代价按规则计算出重新渲染组件并应用到DOM操作上。
只修改有数据更改的地方
MVVM模式
- M： Model 数据类型
- V ：View 视图模版
- VM ： view-Model 视图模型,也就是
new Vue()
M层和V层是相对独立的，通过VM层做联系
声明式渲染
var arr = [1, 2, 3, 4, 5];
// 命令式渲染
//**需要以具体代码表达在哪里做什么，以及如何实现
var newArr1 = [];
for (var i = 0; i < arr.length; i++) {
newArr1.push(arr[i] * 2);
}
// 声明式渲染
//**只需声明在哪里做什么，无需关心如何实现
var newArr2 = arr.map(function(i) {
return i * 2;
})
console.clear();
console.log(newArr1);
console.log(newArr2);
Vue实例
- Vue实例
每一个应用都是通过Vue这个构造函数创建根实例来启动new Vue（选项对象）
需要传入的选项对象包含挂在元素、模版、方法等。
| 选项对象 | 用途 | 类型 |
|---|---|---|
| el | 挂载元素选择器 | String|HtmlElement |
| data | 代理数据 | Object|Function |
| methods | 定义方法，放置事件处理函数 | Object |
- Vue代理data数据
每个Vue实例都会代理其data对象里所有的属性，这些被代理的属性是响应的。新添加的属性不具备相应功能，改变后不会更新视图。
- Vue实例自身属性及方法
暴露自身的属性和方法，以&开头，例如:&el,&data....
vue实例的自身属性和方法
指令
什么是指令?
- 指令是一种特殊的自定义行间属性;
- 指令的职责是当其表达式的值发生改变时，相应的将某些行为应用到DOM上;
- 在Vue中，指令以
v-开头
Vue的内置指令
| 指令 | 说明 |
|---|---|
| v-bind | 动态的绑定数据。简写为:
|
| v-on | 绑定事件监听器。简写为@
|
| v-text | 更新数据，会覆盖已有结构。 |
| v-html | 可解析数据中的html结构。 |
| v-show | 根据值来获取真假，切换元素的display属性。true为显示，false为隐藏。 |
| v-if | 根据值来获取真假，切换元素会被销毁和重建。true为重建，false为销毁。 |
| v-else-if | 多条件判断，条件为真则渲染。 |
| v-else | 条件都不符合时渲染。 |
| v-for | 基于源数据多次渲染元素或者模版块。 |
| v-model | 在表单控件元素上创建双向数据绑定。 |
| v-pre | 跳过元素及其子元素的编译过程。 |
| v-cloak | 隐藏未编译的Mustache语法,css中设置{v-cloack}{display:none}
|
| v-once | 仅渲染一次，随后数据更新也不会重新渲染。 |
模版
html模版
插值
<div id="demo" :custom="abc">
<!--简单的表达式-->
{{ true? 123:456}} {{1+2+3+46+5}}
<div v-html="html"> </div>
</div>
<script>
let obj = {
html: "<h1>这里是H1标签</h1>",//避免恶意攻击，此处必须是可信的html结构
abc: 1
}
var vm = new Vue({
el: '#demo',
data: obj
})
</script>
渲染结果
字符串模版
template字符串
-
template选项对象的属性。 - 模版会替换挂在的元素，挂载元素的内容都将被忽略。
- 根节点只能有一个,允许嵌套，禁止并列。因为是映射的是一个对象嵌套对象的形式。
- 将html结构写在一对
script标签中，并设置type="x-template"属性。
- 使用字符串:
//错误写法=>根节点仅能有一个，不允许有兄弟节点
var errorStr = `<div>hello ,Vue!{{abc}}</div><div>test text</div>`;
<div id="demo" v-html="html" :data-id="abc"> </div>
<script>
let obj = {
abc: 1
}
// 正确写法
var str = `<div>hello ,Vue!{{abc}} <div>Test text</div> </div>`;
var vm = new Vue({
el: '#demo',
data: obj,
template: str // template权限更高会冲掉静态Dom
})
</script>
渲染结果
- 使用
x-template:
缺点：不能跨文件使用，同样只能允许有一个根节点,类似于<style>标签。
<div id="demo">
<span>测试文字</span>
</div>
<script type="x-template" id="temp">
<div>
hello,{{abc}}
<span>{{message}}</span>
<div v-html="html">
</div>
</div>
</script>
<script>
let obj = {
message: "我是个message",
html: "<p>这里是一个段落</p>",
abc: "test"
}
var vm = new Vue({
el: "#demo",
data: obj,
template: "#temp"
});
</script>
渲染结果
render函数
render() 属于选项对象的属性，”最接近编译器的“方法。
数据对象属性
| 语法 | 定义 |
|---|---|
| class:{} | 绑定class,和v-bind:class的API通用 |
| style:{} | 绑定行间样式，和v-bind:style的API通用 |
| attrs:{} | 添加行间属性 |
| domProps:{} | DOM元素的属性 |
| on:{} | 绑定事件 |
| nativeOn:{} | 监听原生事件 |
| directives:{} | 自定义命令 |
| scopedSlots:{} | slot作用域 |
| slot:{} | 定义slot名称 |
| key:"key" | 给元素添加唯一标识 |
| ref:"ref" | 引用信息 |
render里的class
render里的class是使用v-bind来通过数据驱动添加或者移除的，它与原生的class能够共存。
<style>
.bg { background: #9f0;}
.fontSize {font-size: 50px;}
</style>
<div id="demo" class="fontSize" :class="{bg:addClass}">测试文字</div>
<script>
let obj = {
addClass: true
}
var vm = new Vue({
el: "#demo",
data: obj,
});
</script>
渲染结果
render里的creatElement
语法: createElement(tagName,data,childElement)
参数说明:
参1 tagName ：标签名
参2 data ：数据对象{}
参3 childElement:子元素（文本或数组）
<div id="demo"> </div>
<script>
var vm = new Vue({
el: "#demo",
render(creatElement) {
// creatElement(标签名，{数据对象},子元素)
//此处return的就是VNode对象(虚拟DOM)
return creatElement(
"ul",
//自定义属性
{
class: {
bg: true,
fontSize: true
},
// 添加行内样式
style: {
padding: "10px",
margin: "0",
listStyle: "none"
},
// 添加自定义属性
attrs: {
abc: "xyz"
},
// domProps的innerHTML权重比createElement高
domProps: {
innerHTML: "<li class='bg2'>我的权重更高</li>"
}
}, [
creatElement("li", 1),
creatElement("li", 2),
creatElement("li", 3)
]
)
}
});
</script>
输出DOM结果以及控制台打印return creatElement
网友评论