美文网首页
Vue.js 模板语法笔记一

Vue.js 模板语法笔记一

作者: stlacapy | 来源:发表于2019-08-08 13:32 被阅读0次

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上

数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:

<div id="app">

  <p>{{ message }}</p>

</div>

使用 v-html 指令用于输出 html 代码:

v-html 指令

<div id="app">

    <div v-html="message"></div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: '<h1>笔记</h1>'

  }

})

</script>

最终代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <div v-html="message"></div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: '<h1>笔记</h1>'

  }

})

</script>

</body>

</html>

相关文章

  • Vue.js模板语法

    Vue.js模板语法 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的教...

  • 2017/09/13 VUE模板语法

    一. 模板语法 *** Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 ...

  • Vue.js 模板语法笔记一

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vu...

  • 模板语法

    Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 ...

  • Vue.js 模板语法

    Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 ...

  • 用 Vue.js 做代办事宜列表

    前提条件 Vue.js 介绍 Vue.js 模板语法 Vue.js 组件 概要 类型:实践难度:中等 任务描述 做...

  • Vue模板语法

    模板语法 一、概要 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vu...

  • Vue.js初次尝试,模板语法(六)

    模板语法对于高效的编写web页面提供了便利。如果你有其他框架或者模板引擎的学习经验那么对于Vue.js的模板语法会...

  • Vue学习的第三天

    模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的...

  • Vue.js学习笔记(3)

    模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的...

网友评论

      本文标题:Vue.js 模板语法笔记一

      本文链接:https://www.haomeiwen.com/subject/chcxjctx.html