（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. android编程取消标题栏方法（appcompat_v7、Theme.NoTitleBar）

    方式一:编码方式 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstance ...

  2. BZOJ3224：普通平衡树（splay练习）

    您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作:1. 插入x数2. 删除x数(若有多个相同的数,因只删除一个)3. 查询x数的排名(若有多个相同的数,因输出最小的排名)4. ...

  3. Servlet启动运行顺序

    1.web项目执行属性 启动web项目后,web容器首先回去找web.xml文件,读取这个文件. 容器会创建一个 ServletContext ( servlet 上下文),整个 web 项目的所有部 ...

  4. [USACO 2017DEC] Barn Painting

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=5141 [算法] 树形DP 时间复杂度 : O(N) [代码] #include< ...

  5. 关于XAMPP Apache无法启动问题解决方案

    安装好XAMPP后,启动Apache服务启动失败,然后从xampp安装目录下执行apache_start.bat文件,如下图 显示443端口被占用. 解决方法: 启动cmd,输入netstat -a  ...

  6. java笔记之IO4文本复制

    * 复制文本文件. *  * 数据源:从哪里来 * a.txt -- 读取数据 -- FileInputStream  *  * 目的地:到哪里去 * b.txt -- 写数据  -- FileOut ...

  7. 洛谷P4374 [USACO18OPEN]Disruption（树链剖分+线段树）

    传送门 不难发现,每一条额外修的路径,会对原树上$(u,v)$路径上的所有边产生贡献 于是这就变成了一个路径修改 那么我们把每一条边赋值到它连接的两个点中深度较大的那个上面,然后每一次用树剖+线段树做 ...

  8. python数据库连接例子

    import sqlite3 conn = sqlite3.connect('food.db') curs = conn.cursor() curs.execute(''' CREATE TABLE ...

  9. git基本操作（入门）

    下面以一个最简单的开发过程,呈现git最基本的操作命令 1.下载代码(以code命名仓库为例) git clone xxxxx/code.git cd code 2.查看所有分支 git branch ...

  10. C#课程设计

    一.问题描述 监视文件和文件夹的变化(FileSystemWatcher 类):选择一个文件夹,单击"开始监视",该文件夹处于监视状态,此时对该文件夹如果进行操作,这些行为将显示出 ...