Vue简介

尤雨溪：Vue.js的创建者

  • 2014年2月，Vue.js正式公布
  • 2015年10月27日，正式公布1.0.0
  • 2016年4月27日，公布2.0的预览版本

Vue：渐进式JavaScript框架

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

Vue的长处

  • 易用：相熟HTML、CSS、JavaScript常识后，可疾速上手Vue
  • 灵便：在一个库和一套残缺框架之间自若伸缩
  • 高效：20kB运行大小，超快虚构 DOM

Vue的根本应用

传统模式

Vue的根本应用

Vue的根本应用

1. 提供标签用于填充数据2.引入Vue的库文件3.能够应用Vue相干的语法性能4.把Vue提供的数据填充到html标签中

Vue实例的参数

  • el：元素的挂载地位
  • data：模型数据（值是一个对象或函数）
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Vue的根本应用</title></head><body>    <div id="app">        <div>{{msg}}</div>        <div>{{5>3?'正确':'不正确'}}</div>        <div>{{20+40}}</div>    </div></body><script src="./vue.js"></script><script>    let vm = new Vue({        el: "#app",        data() {            return {                msg: 'hello word'            }        },    })</script></html>

插值表达式的作用

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

Vue代码运行的原理

前端渲染

把数据填充到HTML标签中

前端渲染的形式

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

Vue的模板语法

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

插值表达式

插值表达式：{{}}
  • 把数据填充到html标签中
  • 插值表达式反对根本的计算操作

指令

自定义指令的实质

自定义属性。指令的格局：以v-开始

v-clock

v-clock是为了解决插值表达式的闪动问题，先暗藏，替换好值之后显示最终的后果