vue小结1
（1）渐进式vue
构建用户界面的渐进式框架
只关注视图层
（2）vue中的两个核心点
- 响应的数据绑定：当数据发生改变时，自动更新视图
利用Object.definedProperty（该属性IE8不兼容）中的setter/getter代理数据，监控对数据的操作
- 组合的视图组件：UI界面映射为组件树；划分组件可维护、可重用、可测试
（3）虚拟DOM
大量dom操作会很慢，通常在更新数据后重新渲染页面。如果只改变发生改变的部分，减少资源的浪费。利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM.
当数据发生变化时，能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
当数据改变时，渲染，然后对比两个虚拟DOM树改变的地方，以最小代价渲染出真实的DOM
虚拟DOM在js中的映射可以理解为对象嵌套对象
（4）MVVM模式
利用其可以实现双向数据绑定
M:Model 数据模型
V:view视图模板
VM:view-Model视图模型，执行数据绑定及监听dom事件
（5）vue实例
vue实例：每一个应用都是通过Vue这个构造函数创建根实例启动
new Vue（选项对象）
其中，需传入选项对象，对象包括挂载元素、数据、模板、方法等
el: 挂载元素选择器 String|HtmlElement
data：代理数据 Object|Function
methods：定义方法 Object
vue代理data数据：
每个vue都会代理其data对象里所有的属性，这些被代理的属性是响应式的，新添加的属性不具备响应功能，改变后不会更新视图
Vue实例自身的属性和方法
暴露自身的属性和方法，以开头，如开头，如el $data
（6）实例
demo1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<!--模板-->
<div id="demo">
{{message}}
</div>
<script>
//数据
let data={
message:"hello vue" //这里的数据用于呈现在页面中的数据
}
//vm实例,通过vue声明一个参数，该参数为一个对象
var vm=new Vue({
el:"#demo", //html的挂载元素，里面直接写上选择器即可，一般用id，也可以用class的类名
data:data //上面定义的数据
});
//响应式数据绑定，则当数据发生改变时，页面也应该发生改变，这里可以用chrome浏览器的检查功能进行验证
console.dir(document);
</script>
</body>
</html>
demo2双向数据绑定：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<!--模板-->
<div id="demo">
<input type="text" v-model="message" /> <!--//v-model为指令-->
<p>{{message}}</p>
</div>
<script>
//数据
let data={
message:"hello vue" //这里的数据用于呈现在页面中的数据
}
//vm实例,通过vue声明一个参数，该参数为一个对象
var vm=new Vue({
el:"#demo", //html的挂载元素，里面直接写上选择器即可，一般用id，也可以用class的类名
data:data //上面定义的数据
});
//响应式数据绑定，则当数据发生改变时，页面也应该发生改变，这里可以用chrome浏览器的检查功能进行验证
</script>
</body>
</html>
（7）声明式渲染
声明式渲染：只需要声明在哪里做什么，而无需关心如何实现
Eg. 求数组中每一项的倍数：
使用for循环拿出每一项，然后求值完成后，再放入另一数组中。
命令式渲染：需要以具体的代码表达在哪里做什么，怎么实现
Eg. 求数组中每一项的倍数：
使用map方法关注如何求值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var arr=[,,,,] //球数组中每一项的倍数，然后放入另一个数组中 /* //命令式地渲染
var newArr=[];
for(var i=0;i<arr.length;i++){
newArr.push(arr[i]*2);
}
*/ //声明式渲染
var newArr=arr.map(function(item){
return item* ;
});
console.log(newArr);
</script>
</body>
</html>
Vue声明式渲染：初始化根实例，vue自动将数据绑定在DOM模板上。
（8）指令
一种特殊的自定义行间属性
指令的职责：当其表达式的值改变时相应地将某些行为应用到dom上，如绑定事件处理函数
在vue中指令以v-开头
（9）模板
①Html模板：
基于DOM的模板，模板都是可解析的有效的html
②插值：文本：使用双大括号{{value}}
作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
③ 原生的html：双大括号输出的是文本，不会解析html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<span>{{html}}</span>
</div>
<script>
//数据
let obj={
html:"<div>hello,miaov</div>"
}
var vm=new Vue({
el:"#demo",
data:obj
})
</script>
</body>
</html>
输出：<div>hello,miaov</div>
如果需要将文本解析成html，输出hello，miaov，则需要用到v-html指令，具体如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<div v-html="html"></div>//v-html指令将文本解析成html
</div>
<script>
//数据
let obj={
html:"<div>hello,miaov</div>"
}
var vm=new Vue({
el:"#demo",
data:obj
})
</script>
</body>
</html>
属性：使用v-bind进行绑定，可以响应变化
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo" v-bind:custom="abc"><!--可以通过v-bind绑定自定义属性-->
<div v-html="html"></div><!--//v-html指令将文本解析成html-->
</div>
<script>
//数据
let obj={
html:"<div>hello,miaov</div>",
abc:
}
var vm=new Vue({
el:"#demo",
data:obj
})
</script>
</body>
</html>
④使用JavaScript表达式： 写简单的表达式
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo" v-bind:custom="abc"><!--可以通过v-bind绑定自定义属性-->
{{+}}
{{true?"yes":"no"}}
<div v-html="html"></div><!--//v-html指令将文本解析成html-->
</div>
<script>
//数据
let obj={
html:"<div>hello,miaov</div>",
abc:
}
var vm=new Vue({
el:"#demo",
data:obj
})
</script>
</body>
</html>
⑤字符串模板：
template字符串：
template选项对象的属性，模板将会替换挂载的元素。挂载元素的内容都将被忽略。（模板和template不能共存）
根节点只能有一个
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<span>miaov ketang</span>
</div>
<script>
let obj={
html:"<div>hello,miaov</div>",
abc:
};
var str="<div>hello，{{abc}}</div>"
//根节点只能有一个，即不能有并列的元素标签，但可以有包含的元素标签
var vm=new Vue({
el:"#demo",
data:obj,
template:str /*将新渲染的str替换掉前面的整个div*/
})
</script>
</body>
</html>
输出：hello，1
⑥将html结构写在一对script标签中，设置type=“x-template”
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<span>miaov ketang</span>
</div>
<script type="x-template" id="temp">
<div>
hello {{abc}}
<span>miaov</span>
</div>
</script>
<script>
let obj={
html:"<div>hello,miaov</div>",
abc:
};
var vm=new Vue({
el:"#demo",
data:obj,
template:"#temp" /*将新渲染的str替换掉前面的整个div*/
//
})
</script>
</body>
</html>
⑦render模板：render函数，render选项对象的属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
</div>
<script>
let obj={
html:"<div>hello,miaov</div>",
abc:
};
var vm=new Vue({
el:"#demo",
data:obj,
render:function(createElement){
return createElement(
"ul",
[
createElement("li",),
createElement("li",),
createElement("li",) ]
);
}
/* render(){ //es6
}*/
})
</script>
</body>
</html>
⑧createElement（标签名，[数据对象],子元素）；子元素为文本或数组。数据对象属性：
class:{} //绑定class，和 `v-bind:class`一样的API
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.red{
color:red;
}
.fontSize{
font-size: 50px;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<span class="fontSize" v-bind:class='{red:addClass}'>hello</span>
<!--绑定的class和原生的class是可以共存的-->
</div>
<script>
let obj={
addClass:true //这里的数据会影响前面页面内容的呈现
}; var vm=new Vue({
el: "#demo",
data: obj
});
</script>
</body>
</html>
style：{} //绑定样式，和`v-bind:style` 一样的API
attrs:{} //添加行间属性
domProps：{} //DOM元素属性
on:{} //绑定事件
nativeOn：{} //监听原生事件
directives:{} //自定义指令
scopeSlots:{} //slot作用域
slot：{} //定义slot名称
key：”key” //给元素添加唯一标示
ref:”ref” //引用信息
.
vue小结1的更多相关文章
- vue小结
一:MVVM模型的理解 Model:数据模型,数据和业务逻辑都在这里定义:View代表视图,负责数据的展示:ViewModel:负责监听model中数据的改变并且控制视图的更新,处理用户交互操作:Mo ...
- 初识vue小结
初识vue 大家都那么热爱他一定有原因,我也特想了解. 我来咯, 首先用vue开发版,用一个标签在head中插入,script标签src属性引入vue文件,就像jquey一样在script,但是放在h ...
- 002——vue小结
1.new 一个vue对象的时候你可以设置他的属性,其中最重要的包括三个,分别是:data,methods,watch. 2.其中data代表vue对象的数据,methods代表vue对象的方法,wa ...
- [js]vue小结
vue基础 - vue是一个渐进式框架 vue (视图渲染) components(路由机制) vue-router(路由管理) vuex (状态管理) vuecli (构建工具) - 库和框架 库如 ...
- 第10章-Vue.js 项目实战
一.本节内容 掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装 能够使用axios进行数据请求 二.webpack项目的目 ...
- Vue和Element基础使用,综合案例学生列表实现
知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...
- Vue2和Vue3技术整理1 - 入门篇 - 更新完毕
Vue2 0.前言 首先说明:要直接上手简单得很,看官网熟悉大概有哪些东西.怎么用的,然后简单练一下就可以做出程序来了,最多两天,无论Vue2还是Vue3,就都完全可以了,Vue3就是比Vue2多了一 ...
- Vue学习小结(二)
接上一批,小结(二). 三.导航内容(含左侧导航及顶部面包屑导航) 其实导航条主要根据element-ui的教程进行编写,官网:http://element-ui.cn/#/zh-CN/compone ...
- Vue学习小结(一)安装依赖与数据来源
不多说啥了,生活中都是各种阵痛与惊喜.最近在学习vue框架,刚写完一个小型的后台管理系统(https://github.com/michaelzhengzm/info-manager-systerm_ ...
随机推荐
- jQuery - AJAX 级联变动
此篇文章主要是用来记忆使用JQUERY+AJAX技术实现 二级级联变动 : 当第一个下拉框变动时,第二个下拉列表框中也将会随之变动. JSP: ---------------------------- ...
- Jquery与Dom对象相互转化
Jquery与Dom对象相互转化 jQurey对象和DOM对象的相互转换 在讨论jQurey对象和DOM对象的相互转换之前,我们先约定定义变量的风格.如果我们获取的对象是jQuery对象,那么我们 ...
- Serializable 接口与 Java 序列化与反序列化
0. 序列化的意义 从内存到本地即为本地化或者在网络中进行传输,或叫序列化,持久化. 某 Java 类实现 Serializable 接口的目的是为了可持久化(简单理解为本地化),比如网络传输或本地存 ...
- 【187】◀▶ 编辑博客的文本格式 & 装饰
参考:博客园页面设置 参考:共享一下我的自定义CSS博客皮肤(2012.3) 一.文字周围带框框 插入一个代码,要折叠式,如下图所示: 史蒂夫 示例 选中“示例”,将其拷贝,然后黏贴,就有如下的效 ...
- 洛谷 P3254 圆桌问题【最大流】
s向所有单位连流量为人数的边,所有饭桌向t连流量为饭桌容量的边,每个单位向每个饭桌连容量为1的边表示这个饭桌只能坐这个单位的一个人.跑dinic如果小于总人数则无解,否则对于每个单位for与它相连.满 ...
- Spring boot下，集成任务调度中心（XXL-JOB）
一.使用背景 目前项目中,采用的是微服务框架,由于在微服务中,存在需要定时的任务.但如果定时任务维护在每个微服务下,当微服务部署多个实例的情况下,会出现定事任务多次执行的情况.并且在解决问题的基础上, ...
- BIOS 和UEFI的区别
BIOS先要对CPU初始化,然后跳转到BIOS启动处进行POST自检,此过程如有严重错误,则电脑会用不同的报警声音提醒,接下来采用读中断的方式加载各种硬件,完成硬件初始化后进入操作系统启动过程:而UE ...
- Intellij IDEA 快捷键整理（史上最全）
[常规] Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Shift+Click,可以关 ...
- 51nod 1154 回文串划分
1154 回文串划分 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 有一个字符串S,求S最少可以被划分为多少个回文串. 例如:abbaabaa,有 ...
- Xors on Segments Codeforces - 620F
http://codeforces.com/problemset/problem/620/F 此题是莫队,但是不能用一般的莫队做,因为是最优化问题,没有办法在删除元素的时候维护答案. 这题的方法(好像 ...