• Vue 模板语法 v-bind

    红色框里面的都是vue的模板。有了模板就得有模板的特殊语法。上面只是简单的双括号加上表达式，这种叫做插值语法，除了这种语法还有其他语法吗？

    插值语法实现的功能很单一，就是将指定的值放到指定的位置。还有一种叫做指令语法，它能够完成的就相对高端一些。

    vue里面的指令很多，都是以v-开头。下面其实就是将执行的结果绑定给v-bind

    1. <a v-bind:href="url">点击我去百度a>   
    2. //如果加上v-bind:，那么vue会将引号里面包着的东西url拿出来当js表达式去执行，url就相对于变量
    3.  
    4.       new Vue({    
    5.           el: "#app",   
    6.           data:{ 
    7.             name: "lucas",
    8.             url: "https://www.baidu.com",
    9.           }
    10.        })

    v-bind可以指定任何一个属性。bind可以给标签里面任何一个标签属性动态的绑定值。v-bind:可以简写为:冒号。

    1.     <div id="app">
    2.         <h1>hello world name:{{name}}h1>
    3.         <a v-bind:href="url" v-bind:x="hello">点击我去百度a>
    4.     div>
    5.          
    6.     <script type="text/javascript"> 
    7.  
    8.     Vue.config.productionTip = false     
    9.       new Vue({    
    10.           el: "#app",   
    11.           data:{ 
    12.             name: "lucas",
    13.             url: "https://www.baidu.com",
    14.             hello: "xxx",
    15.           }
    16.        })

    通过上面可以看到插值语法往往用于指定标签体内容，也即是html元素中间部分。这部分需要渲染可以使用插值语法。

    v-bind不管理标签里面的内容，它是用于管理标签的属性。

    Vue模板语法有2大类：

    1.插值语法；

    • 功能：用于解析标签体内容。
    • 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

    2.指令语法：

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

    在data当中，不仅仅可以是基本的数据类型，还可以是对象。所以data里面的数据可以是多级的结构。

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>首页title>
    6.     
    7.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    8. head>
    9.  
    10. <body>  
    11.  
    12.     <div id="app">
    13.         <h1>hello world name:{{name}} school里面的name:{{school.name}}h1>
    14.         <a v-bind:href="school.url" v-bind:x="hello">点击我去百度a>
    15.     div>
    16.          
    17.     <script type="text/javascript"> 
    18.  
    19.     Vue.config.productionTip = false     
    20.       new Vue({    
    21.           el: "#app",   
    22.           data:{ 
    23.             name: "lucas",
    24.             school:{
    25.                 name: "jerry",
    26.                 url: "https://www.baidu.com",
    27.             },
    28.           }
    29.        })
    30.     script>
    31.  
    32. body>
    33. html>

     对于插值语法没有什么高深的玩法，就两对花括号{{}}里面写上表达式

  • 相关阅读:
    Stanford CS143 速通PA1教程
    NumPy 舍入小数、对数、求和和乘积运算详解
    win10 sourcetree打开一闪就退出
    Util应用框架基础(二) - 对象到对象映射(AutoMapper)
    企业推行OKR的必要条件
    fluent鱼儿游动，保存为gif动图，python代码
    SVN如何删除文件名包含空格的文件
    【车载开发系列】UDS诊断---写入数据（$0x2E）
    Android 10.0 wifi的随机mac地址修改为固定不变
    Ubuntu 切换输入法
  • 原文地址：https://blog.csdn.net/qq_34556414/article/details/134400837