02 Vue基础语法之插值语法

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

文章目录

    • 插值语法
    • 指令语法
      • 1.Mustache语法
      • 2.v-text指令
      • 3.v-html指令
      • 4.v-once指令
      • 5.v-pre指令
      • 6.v-cloak指令

前言

记录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指令

用法:


功能:用途和{{}}一致,但没有{{}}灵活
代码示例:

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

3.v-html指令

用法:

{{url}}


功能:将内容按照HTML格式进行解析并显示对应内容
代码实例:

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

4.v-once指令

用法:

{{message}}


功能 表示元素和组件只渲染一次,不会随着数据的改变而改变
代码示例:

<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指令

用法:

{{message}}


功能:用于跳过元素的编译过程,显示原本的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指令

用法:


功能:在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用于一次性展示,比如需要同时展示变化前后数据的场景

你可能感兴趣的:(vue3,vue.js,前端)