2018-09-24 指令(补充)

1.v-html
2.v-text
3.v-once:只绑定一次
4.v-pre:原样输出

<body>
   <div id='app'>
       <input type="text" v-model='msg'>
       <p v-html='msg'>{{msg}}</p>
       <h3 v-text='msg'>{{msg}}</h3>
       
       <a href="" v-once>{{msg}}</a>
       
       <h1 v-pre>{{msg}}</h1>
       
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello'
           }
       })
    </script>
</body>

5.v-cloak

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
   <div id='app'>
       <h1 v-cloak>{{msg}}</h1>
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeMount:function(){
               alert('beforeMount')
           }
       })
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、Vue常用指令 v-once 也是双向数据绑定,但数据只绑定一次 v-pre 原样输出 v-bind ...
    乔乔_老师阅读 410评论 0 2
  • 1、v-html 例: 运行结果为: 2、v-text 例: 运行结果为: 3、v-once v-once只绑定一...
    大宝贝_4c6e阅读 265评论 0 0
  • 指令 指令是可以写在DOM元素的小命令,他们以v-为前缀,Vue就能识别这是一个指令并保持语法的一致性。如果你需要...
    Pretend_ebb0阅读 396评论 1 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,948评论 18 139
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,274评论 0 25