02 Vue基础语法之插值语法

个人名片:
😊作者简介:一名大一在校生,web前端开发专业
🤡 个人主页:python学不会123
🐼
座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡


前言

记录vue的学习笔记,有什么不对的地方,欢迎各位大佬进行指正,共同学习进步

Vue的语法分为两种:
(1)插值语法:双大括号表达式 (“Mustache”语法)【一个】
(2)指令语法:指令(以v-开头的自定义标签属性)【很多】

插值语法

  • 功能:用于解析标签体内容,向页面输出数据
  • 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性,可以调用对象的方法
  • 备注:里面写js表达式:有返回值的js代码,而不是js语句

指令语法

  • 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
  • 举例:v-bind:href="xxx" 或 简写为:href=“xxx”,xxx同样要写js表达式,且可以直接读取到data中的所有属性
  • 备注:Vue中有很多的指令,且形式都是:v-??

今天我们先学习插值语法

1.Mustache语法

用法:通常用 {{}}
功能:用于将data中的文本数据插入到页面中

2.v-text指令

用法: <h2 v-text="message"></h2>
功能:用途和{{}}一致,但没有{{}}灵活
代码示例:

  <div id="app">
      <h2>
        {{message}}
      </h2>
      <h2 v-text="message"></h2>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
              message:'你好啊',
            },
            methods: {}
        });
    </script>

3.v-html指令

用法:<h2 v-html="url">{{url}}</h2>
功能:将内容按照HTML格式进行解析并显示对应内容
代码实例:

  <div id="app">
      {{message}} 
      <h2 v-html="url">{{url}}</h2>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
              message:'你好啊11',
              url:'<a href="https://www.baidu.com">百度一下</a>'
            },
            methods: {}
        });
    </script>

4.v-once指令

用法: <h2 v-once>{{message}}</h2>
功能 表示元素和组件只渲染一次,不会随着数据的改变而改变
代码示例:

<div id="app">
      <h2>{{message}}</h2>
      <h2 v-once>{{message}}</h2>
    </div>
    <script>
      
      const app = new Vue({
            el: '#app',
            data: {
              message:'你好啊11'
            },
            methods: {}
        });
    </script>

5.v-pre指令

用法: <h2 v-pre>{{message}}</h2>
功能:用于跳过元素的编译过程,显示原本的Mustache语法
代码示例:

 <div id="app">
      <h2> {{message}} </h2>
      <h2 v-pre>{{message}} </h2>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
              message:'你好哦'
            },
            methods: {}
        });
    </script>

6.v-cloak指令

用法:<div id="app" v-cloak>
功能:在vue解析之前,div中有一个属性v-cloak
在vue解析之后,div中没有一个属性v-cloak
代码示例:

<div id="app" v-cloak>
      <h2> {{message}} </h2>
      <h2></h2>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
              message:'111'
            },
            methods: {}
        });
         </script>

总结:
常用的:
v-textv-html 和{{}}

  • {{}}v-text为一组,均能将数据解析后插入到页面中,但{{}}更常用,因为其更灵活
  • v-textv-html为一组,二者用法一致,均用于向页面展示数据,后者会将内容按照html格式进行解析后再展示,会带来xss攻击问题(需要解决方案)

不常用的:
v-oncev-prev-cloak一般很少使用这三个除非特定场合比如:

  • v-prev-cloak为一组,v-pre用于展示原本的Mustache语法,v-cloak配合特定css样式可起到相反的效果
  • v-once用于一次性展示,比如需要同时展示变化前后数据的场景
  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值