• Vue的模版代码与数据绑定方式

    目录

    模版代码

    插值语法

    指令语法

    数据多层访问

     vue模版语小结

    数据绑定方式

    模版代码

    插值语法

    插值语法就是使用{{xxx}}描述的

    1. <div id="root">
    2.     {{name}}
    3. div>

    指令语法

    1. <div id="root">
    2.  
    3.     <a :href="school.url">url地址名a>
    4. div>

    在普通的url指定中，如果直接写{{url}}，则会把""里面的值当成字符串，所以应该加上v-bind:href

    或者直接简写为:href

    1. <body>
    3. <div id="root">
    4.     {{name}}
    5.     <a v-bind:href="url">url地址a>
    6.     <a :href="url">url地址a>
    7. div>
    8.  
    9.  
    10. <script>
    11.     new Vue({
    12.         el:"#root",
    13.        data:{
    14.            name:"kc",
    15.            url:"http://www.baidu.com"
    16.        }
    17.     });
    18. script>
    19.  
    20. body>

      

     加上了v-bind之后，vue会将里面的字符串当成一个表达式，执行的结果绑定给这个标签。

    数据多层访问

    当存在多层时，data层下还有层如

    1.  
    2. <script>
    3.     new Vue({
    4.         el:"#root",
    5.        data:{
    6.            name:"kc",
    7.            school:{
    8.                name:"百度",
    9.                url:"http://www.baidu.com"
    10.            }
    11.        }
    12.     });
    13. script>

    {{}}访问到的是data层的数据，若要访问school层的name，只需{{school.name}}即可访问。

    2. <div id="root">
    3.     {{name}}
    4.     <a v-bind:href="school.url">url地址名为:{{school.name}}a>
    5.     <a :href="school.url">url地址名为:{{school.name}}a>
    6. div>
    7.  
    8.  
    9. <script>
    10.     new Vue({
    11.         el:"#root",
    12.        data:{
    13.            name:"kc",
    14.            school:{
    15.                name:"百度",
    16.                url:"http://www.baidu.com"
    17.            }
    18.        }
    19.     });
    20. script>

     vue模版语小结

     vue模版语法有两大类：

    1、插值语法：

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

    2、指令语法：

    • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
    • 举例：v-band:href="xxx"或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

    注：vue中有许多指定，都是形如v-xxx

    插值在<>外的，指令在<>内

    数据绑定方式

    • v-bind单向绑定
    • v-model双向绑定
    1. html>
    3. <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>数据绑定title>
    7.     <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js">script>
    8.  
    9. head>
    10. <body>
    11.  
    12. <div id="root">
    13.  
    14.     单向数据绑定<input v-bind:value="name"><br/>
    15.     双向数据绑定<input v-model:value="name">
    16.  
    17. div>
    18.  
    19.  
    20. <script>
    21.  vm= new Vue({
    22.      el:'#root',
    23.      data:{
    24.          name:'数据'
    25.      }
    26.  
    27.     });
    28.  
    29.  
    30. script>
    31. body>
    32. html>

     单向绑定只有data到value的值，就是说，当data中的值发生改变时，value就会发生改变

    双向绑定data和value是双向的，data可以到value，value也可以到data。

     Vue中的两种数据绑定的方式：

    1、单向绑定(v-bind):数据只能从data流向页面。

    2、双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。

    注：

    • 双向绑定一般都应用在表单类元素上（如：input、select等）
    • v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
  • 相关阅读:
    1.1 git常规操作
    PaDiM 原理与代码解析
    Win 10以管理员身份运行Powershell的3种方法
    SkyWalking分布式系统应用程序性能监控工具-中
    在创建的关于tensorflow的envs环境中无法import出pip中显示的包
    2022河南萌新联赛第（五）场：信息工程大学 K - 矩阵生成
    阿里云服务器10m带宽能支持多少人访问？
    基于单片机的事务管理系统
    5 运算符、表达式和语句
    vscode远程链接下的python环境配置
  • 原文地址：https://blog.csdn.net/weixin_60719453/article/details/128008087