美文网首页
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 模板语法笔记一

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