Vue

尤雨溪：Vue.js的创建者
⚫ 2014年2月，Vue.js正式公布
⚫ 2015年10月27日，正式公布1.0.0
⚫ 2016年4月27日，公布2.0的预览版本

Vue的简介

Vue:渐进式javascript框架

申明式渲染--->组件零碎---->客户端路由---->集中式状态治理----->我的项目构建

易用：曾经会了 HTML、CSS、JavaScript？即刻浏览指南开始构建利用！

灵便：一直凋敝的生态系统，能够在一个库和一套残缺框架之间自若伸缩。

高效：20kB min+gzip 运行大小，超快虚构 DOM，最省心的优化

Vue的根本应用

传统开发模式比照

Vue之Hello word细节剖析

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Vue的根本应用</title></head><body>    <div id="app">        <div>{{msg}}</div>    </div></body><script src="./vue.min.js"></script><script>    var vm = new Vue({        el: "#app",        data: {            msg: 'hello Vue'        }    })</script></html>

实例参数剖析

  • el:元素的挂载地位（CSS选择器及DOM对象）
  • data:模型数据（值是一个对象）

差值表达式

  • 将Vue的数据填充到HTML标签中
  • 反对根本的计算操作

Vue代码运行原理

Vue模板语法

前端渲染

把数据填充到HTML标签中

前端渲染的语法

  • 应用原生JS拼接字符串
  • 应用前端模板引擎
  • 应用Vue模板语法

模板语法概览

  • 插值表达式
  • 指令
  • 属性绑定
  • 事件绑定
  • 款式绑定
  • 分支循环构造

指令

指令的实质便是自定义属性，但以V-结尾（比方v-clock）

V-clock

插值表达式存在的问题：’闪动‘,应用v-clock可解决闪动问题

原理：先设置款式进行暗藏，数据中把值替换结束之后，再进行值的显示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>v-clock</title>    <style>        /* 设置款式进行暗藏 */                [v-v-clock] {            display: none;        }    </style></head><body>    <div id="app">        <!-- 增加v-clock指令 -->        <div v-clock>{{msg}}</div>    </div></body><script src="./vue.min.js"></script><script>    let vm = new Vue({        el: "#app",        data: {            msg: "hello Vue"        }    })</script></html>

Vue数据绑定的三种形式

v-text:填充纯文本  相当于插值表达式而言且没有闪动的问题v-html:填充HTML片段  存在平安问题v-pre:显示原始信息 跳过编译过程
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <div id="app">        <div>{{msg}}</div>        <div v-text='text'></div>        <div v-html='html'></div>        <div v-pre>{{pre}}</div>    </div></body><script src="./vue.min.js"></script><script>    let vm = new Vue({        el: "#app",        data: {            msg: "hello Vue",            text: "v-text",            html: '<h1>v-html</h1>',            pre: "v-pre"        }    })</script></html>

数据响应式

html5中的响应式：屏幕尺寸的变动会导致款式的变动
数据的响应式：数据的变动会导致款式的变动。

数据绑定：把数据填充到HTML标签中

V-once

v-once:只编译一次 显示内容之后便不再具备响应式的性能

v-once的长处：应用v-once之后，Vue便不再进行事件监听，从而可能节俭性能

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>V-once</title></head><body>    <div id="app">        <div>{{msg}}</div>    </div></body><script src="vue.min.js"></script><script>    let vm = new Vue({        el:"#app",        data:{            msg:"v-once"        }    })</script></html>

双向数据绑定

v-model

双向数据绑定：表单的内容发生变化时，从而会导致数据的变动，而数据的变动会影响页面的变动

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>v-model</title></head><body>    <div id="app">        <div>{{msg}}</div>        <input type="text" v-model="msg">    </div></body><script src="vue.min.js"></script><script>    let vm = new Vue({        el:"#app",        data:{            msg:"hello Vue"        }    })</script></html>

MVVM

  • M(model)
  • V(view)
  • VM(View-model)：实现逻辑性能