乐趣区

关于vue.js:Vue基础之模板语法

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>

退出移动版