Vue的概述

尤雨溪：Vue.js的创建者

  • 2014.2：Vue.js正式公布
  • 2015.10.27:正式公布1.0版本
  • 2016.4.27 公布2.0版本

Vue:渐进式javascript框架

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

Vue的官网：https://cn.vuejs.org/

为什么Vue这么受欢迎？

  • 易用：只须要html css javascript根底即可上手Vue
  • 灵便：在框架与库之间来回切换
  • 高效：20kb文件大小，超快虚构DOM

Vue的根本应用

实例参数剖析

  • el:元素的挂载地位（值能够为css选择器或者DOM元素）
  • data:模型数据（值为一个对象）

插值表达式的用法

  • 将数据填充到HTML标签中
  • 插值表达式反对根本的计算操作

Vue的应用步骤

  • 须要提供标签用于填充数据
  • 引入Vue.js文件
  • 能够应用Vue的相干语法
  • 把Vue的数据渲染到HTML标签中
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>hello vue</title></head><body>    <div id="app">        <div>{{msg}}</div>        <div>{{1+2 }}</div>    </div></body><script src="./vue.min.js"></script><script>    let vm = new Vue({        el: "#app",        data: {            msg: "hello vue"        }    })</script></html>

Vue代码运行原理剖析

Vue语法--->原生语法

模板语法概述

如何了解前端渲染

把数据填充到HTML标签中

### 前端渲染形式

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

Vue模板语法概述

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

指令

什么是指令?

  • 指令的实质便是自定义属性
  • 指令的格局:以v-结尾 (如V-cloak)

v-clock的指令用法

  • 为了解决插值表达式中的 "闪动"问题
  • 如何解决该问题,应用V-cloak指令

原理:先设置款式暗藏,在内存中把值替换结束后再进行显示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>v-cloak指令的用法</title>    <style>        /* 第一步:先在款式中暗藏 */                [v-cloak] {            display: none;        }    </style></head><body>    <div id="app">        <!-- 第二步:应用v-cloak指令 -->        <div v-cloak>{{msg}}</div>    </div></body><script src="./vue.min.js"></script><script>    var vm = new Vue({        el: "#app",        data: {            msg: "hello Vue"        }    })</script></html>

数据绑定指令

  • 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>数据绑定的三种形式</title></head><body>    <div id="app">        <div v-text='msg'></div>        <div v-html='msg2'></div>        <div v-pre>{{msg}}</div>    </div></body><script src="./vue.min.js"></script><script>    let vm = new Vue({        el: "#app",        data: {            msg: "hello vue",            msg2: "<h1>hello vue</h1>"        }    })</script></html>