vue基础_3.模板语法

最新推荐文章于 2024-05-24 16:48:39 发布

前端小佩奇

最新推荐文章于 2024-05-24 16:48:39 发布

阅读量105

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_44761755/article/details/118828483

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.纯文本渲染

使用双大括号,使用data数据里声明的或props里的(后面组件间传值时用到,这里先不介绍) 或一段表达式

<body>
    <p id="app"> 
        {{msg}} <br/>
        {{obj.name}} <br/>
        {{1>2?true:false}} <br/>
    </p>

    <script>
        var vm=new Vue({    //注意这里 V要 大写
           el:"#app",      //将Vue实例绑定到 p 标签上
           data:{
               msg:"这是一段话", //绑定数据 msg 的值
               obj:{
                   name:"张三",
                   age:20
               }
            },   
        })
    </script>
</body>

网页显示结果:
在这里插入图片描述

2.原始html代码渲染

关键字 : v-html
在标签里添加 v-html=“msg_html”

<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-html="msg_html"></p>
    </div>
    
    <script>
        var vm=new Vue({    
           el:"#app",  
           data:{
               msg:"<p style='color:red'>这是html代码</p>",
               msg_html:"<p style='color:red'>这是html代码</p>",
            },   
        })
    </script>
</body>

网页显示结果:
在这里插入图片描述
上面可见用{{ }}双大括号并不能渲染原始代码,而v-html可以,由此在渲染原始代码时要注意网络安全,防止被别人注入危险的代码

3.基础指令

指令: 带有 v- 前缀的特殊属性. 指令 attribute(属性) 的值预期是单个 JavaScript 表达式(v-for 是个特殊的情况) , 例如:

v-bind , 绑定标签属性, 其简便写法 v-bind:src="#" 简写成 :src="#"
v-if , 判断语句常常与v-else一起用
v-show , 与v-if相似作用,单独使用
v-on , 绑定事件, 其简便写法 v-on:click=“say” 简写成 @click=“say”
v-model, 双向绑定（即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。）
等等

 <body>
    <div id="app">
     
      <p v-bind:id="userId"></p>
      <!-- <img :src="#"/> -->
      
      <p v-show="isOn"> 当isOn为true时显示 </p>
      
      <button v-on:click="say()"></button>
      
      <p v-if="isOn"> isOn为true时显示 </p>
      <p v-else> isOn为false时显示 </p>
      
      <input type="text" v-model="inputValue" />
      <p>{{userId}}随着input值变化而变化</p>
      
    </div>

    <script>
        var vm=new Vue({    
           el:"#app",  
           data:{
              userId:"1234",
              msg:"www",
              isOn:true
              inputValue:'sss'
            },
            methods:{
                say(){
                   this.msg="我说话了" 
                }
            }
        })
    </script>
</body>