• Vue学习：模板语法

    容器里面的模板：对应的模板语法

                    {{xxx}}:插值语法

    指令语法： v-bind：vue指令 绑定  后面的数据会变成属性或者方法

    1.         <h1>指令语法h1>
    2.         
    3.         <a v-bind:href="url">点击去a>

    简写：v-bind: 写成  :

     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <script src="./js引入/测试版本/vue.js">script>
    10.     
    11. head>
    12.  
    13. <body>
    14.     
    15.     <div id="root">
    16.         <h1>插值语法h1> 
    17.         <h3>你好，{{name}}h3>
    18.         <hr>
    19.  
    20.         <h1>指令语法h1>
    21.         
    22.         <a v-bind:href="url" x="hello" v-bind:y="ye" :c="hello">点击去a>
    23.     div>
    24.  
    25.     <script>
    26.         //创建vue实例
    27.         new Vue({ //const x = new Vue是多余的 直接new就可以
    28.             el: '#root',//找到容器 通常为css选择器 选择对象
    29.             //  el:document.getElementById('root'),//
    30.             //变化的内容给实例 然后使用配置项目配置
    31.             data: {//用户存储数据，数据供给el所指定的容器去使用
    32.                 name: 'Amy',
    33.                 url:'http://www.baidu.com',
    34.                 ye:'dfff',
    35.                 hello:'dggg'
    36.  
    37.             },
    38.  
    39.         });//传递一个参数 参数是一个对象 传递配置对象
    40.  
    41.     script>
    42. body>
    43.  
    44. html>

    插值语法和指令语法=======Vue模板语法两大类

    插值语法：

            用于解析标签体数据：始标签和终止标签里面的内容

            {{xxx}}:xxx是js表达式，可以直接读取到data中的所有属性

    指令

    插值语法适合标签体数据：起始标签和终止标签内容 

    标签体所在位置

    指令语法：

            用于解析标签（包括：标签属性、标签体内容、绑定事件）

            v-bind：href="xxx" ===：href="xxx" ，xxx需要js表达式，可以直接读取到data中的 所有属性

              vue有许多指令。且形式都是v-？？？

        <a v-bind:href="url" x="hello" v-bind:y="ye.toUpperCase()" :c="Date.now()">点击去a>

     

     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <script src="./js引入/测试版本/vue.js">script>
    10.     
    11. head>
    12.  
    13. <body>
    14.     
    15.     <div id="root">
    16.         <h1>插值语法h1> 
    17.         <h3>你好，{{name}}h3>
    18.         <hr>
    19.  
    20.         <h1>指令语法h1>
    21.         
    22.         <a v-bind:href="adress.url" x="hello" v-bind:y="ye.toUpperCase()" :c="Date.now()">点击去{{adress.name}}a>
    23.         <a :href="adress.url">上面一样a>
    24.     div>
    25.  
    26.     <script>
    27.         //创建vue实例
    28.         new Vue({ //const x = new Vue是多余的 直接new就可以
    29.             el: '#root',//找到容器 通常为css选择器 选择对象
    30.             //  el:document.getElementById('root'),//
    31.             //变化的内容给实例 然后使用配置项目配置
    32.             data: {//用户存储数据，数据供给el所指定的容器去使用
    33.                 //如果两个变量名 相同 后面的会覆盖前面的
    34.                 name: 'Amy',
    35.                 adress:{
    36.                     url:'http://www.baidu.com',
    37.                     name:'baidu'
    38.                 },
    39.                 ye:'dfff',
    40.                 hello:'dggg'
    41.  
    42.             },
    43.  
    44.         });//传递一个参数 参数是一个对象 传递配置对象
    45.  
    46.     script>
    47. body>
    48.  
    49. html>

  • 相关阅读:
    《孙哥说Spring5》笔记汇总
    FFmpeg源码：AV_RB32宏定义分析
    2020-2023中国高等级自动驾驶产业发展趋势研究-中国高等级自动驾驶发展近况
    COO、CSR、adj_coo、adj_csr详解：稀疏矩阵与稀疏邻接矩阵的存储格式及转换
    人工智能(pytorch)搭建模型20-基于pytorch搭建文本生成视频的生成对抗网络，技术创新点介绍
    递归实现指数型枚举(DAY 91)
    RabbitMQ从入门到精通
    八、【Vue-Router】编程式路由导航
    docker push image 到私服
    千峰HTML5+CSS3学习笔记
  • 原文地址：https://blog.csdn.net/weixin_47295886/article/details/128182146