(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的更多相关文章

  1. vue小结

    一:MVVM模型的理解 Model:数据模型,数据和业务逻辑都在这里定义:View代表视图,负责数据的展示:ViewModel:负责监听model中数据的改变并且控制视图的更新,处理用户交互操作:Mo ...

  2. 初识vue小结

    初识vue 大家都那么热爱他一定有原因,我也特想了解. 我来咯, 首先用vue开发版,用一个标签在head中插入,script标签src属性引入vue文件,就像jquey一样在script,但是放在h ...

  3. 002——vue小结

    1.new 一个vue对象的时候你可以设置他的属性,其中最重要的包括三个,分别是:data,methods,watch. 2.其中data代表vue对象的数据,methods代表vue对象的方法,wa ...

  4. [js]vue小结

    vue基础 - vue是一个渐进式框架 vue (视图渲染) components(路由机制) vue-router(路由管理) vuex (状态管理) vuecli (构建工具) - 库和框架 库如 ...

  5. 第10章-Vue.js 项目实战

    一.本节内容 掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装 能够使用axios进行数据请求 二.webpack项目的目 ...

  6. Vue和Element基础使用,综合案例学生列表实现

    知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...

  7. Vue2和Vue3技术整理1 - 入门篇 - 更新完毕

    Vue2 0.前言 首先说明:要直接上手简单得很,看官网熟悉大概有哪些东西.怎么用的,然后简单练一下就可以做出程序来了,最多两天,无论Vue2还是Vue3,就都完全可以了,Vue3就是比Vue2多了一 ...

  8. Vue学习小结(二)

    接上一批,小结(二). 三.导航内容(含左侧导航及顶部面包屑导航) 其实导航条主要根据element-ui的教程进行编写,官网:http://element-ui.cn/#/zh-CN/compone ...

  9. Vue学习小结(一)安装依赖与数据来源

    不多说啥了,生活中都是各种阵痛与惊喜.最近在学习vue框架,刚写完一个小型的后台管理系统(https://github.com/michaelzhengzm/info-manager-systerm_ ...

随机推荐

  1. I.MX6 AW-NB177NF wifi reset

    /*********************************************************************** * I.MX6 AW-NB177NF wifi res ...

  2. Mysql操作符号

    1.比较运算符:  =  相等  <> 不等于 != 这个也可以  >  大于  <  小于  >= 大于等于  <= 小于等于 2.逻辑运算符:  is null ...

  3. bzoj 2216: [Poi2011]Lightning Conductor【决策单调性dp+分治】

    参考:https://blog.csdn.net/clove_unique/article/details/57405845 死活不过样例看了题解才发现要用double.... \[ a_j \leq ...

  4. 洛谷 P4016 负载平衡问题 【最小费用最大流】

    求出平均数sum,对于大于sum的点连接(s,i,a[i]-sum,0),表示这个点可以流出多余的部分,对于小于sum的点连接(i,t,sum-a[i],0)表示这个点可以接受少的部分,然后每个点向相 ...

  5. phpstorm最新破解办法(2016-10-30)

    还是选择license server.然后复制http://jetbrains.tencent.click/ 这个地址进去就可以啦.不行的时候欢迎留言告知,更新破解方法

  6. 用set和shopt设置bash选项

    1.set命令 -o打开选项,+o关闭选项#set -o //显示选项设置#set -o noclobber //打开该选项,重定向将覆盖已存在的文件#set +o noclobber //关闭该选项 ...

  7. springboot(四)拦截器和全局异常捕捉

    github代码:https://github.com/showkawa/springBoot_2017/tree/master/spb-demo/spb-brian-query-service 全部 ...

  8. Springboot整合elasticsearch以及接口开发

    Springboot整合elasticsearch以及接口开发 搭建elasticsearch集群 搭建过程略(我这里用的是elasticsearch5.5.2版本) 写入测试数据 新建索引book( ...

  9. Python上下文管理器(Context managers)

    上下文管理器(Context managers) 上下文管理器允许你在有需要的时候,精确地分配和释放资源. 使用上下文管理器最广泛的案例就是with语句了.想象下你有两个需要结对执行的相关操作,然后还 ...

  10. 转-关于UIView的autoresizingMask属性的研究

    在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. 1 2 3 4 5 6 7 8 9 enum  ...