乐趣区

关于vue.js:Vue模板语法

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 是为了解决插值表达式的闪动问题,先暗藏,替换好值之后显示最终的后果

退出移动版