• Vue插值语法、指令语法、单向绑定、双向绑定（详细解释）

    目录

    一、插值语法

    二、指令语法

    三、数据绑定

       1.单向数据绑定

       2.双向数据绑定

    Vue模板语法有两大类

       1.插值语法：

             功能：用于解析标签体的内容

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

       2.指令语法：

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

             举例：v-bind：href="xxx" 或简写成 ：href="xxx"，xxx同样要写js表达式

                       且可以直接读取到data中的所有属性

              备注：Vue中有很多的指令，且形式都是：v-????

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

         1.单向绑定（v-bind）：数据只能从data流向页面

         2.双向绑定（v-model）：数据能从data和页面互相流向

          备注：

              1.双向绑定一般都应用在表单类元素上（如：input、select等）

              2.v-model：value  可以简写为v-model，因为v-model默认手机的就是value值

    一、插值语法

        

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.  
    11.         <div id="root">
    12.            <h1>插值语法h1>
    13.            <h3>你好,{{name}} h3>
    14.            <hr/>
    15.         div>
    16.  
    17.  
    18.         <script type="text/javascript">
    19.             //阻止vue在启动时生成生产提示
    20.             Vue.config.productionTip=false 
    21.  
    22.             new  Vue({
    23.               el:'#root',
    24.               data:{
    25.                 name:'jack'
    26.               }
    27.  
    28.             })
    29.  
    30.         script>   
    31.  
    32.  
    33.     body>
    34. html>
    35.  
    36.

    二、指令语法

              带有v-的都是指令语法  bind是绑定的意思
               在这个地方吧url的结构绑定给href   url为js表达式
               v-bind可以动态的给属性绑定值
               点我去一个好地方
               其中v-bind都可以省略写成 ： 

    1.         <div id="root">
    2.            <h1>插值语法h1>
    3.            <h3>你好,{{name}} h3>
    4.            <hr/>
    5.            <h1>指令语法h1>
    6.            
    7.            
    8.            
    9.            
    10.            
    11.            <a  :href="url">点我去一个好地方a>
    12.         div>
    1.  
    2.         <script type="text/javascript">
    3.             //阻止vue在启动时生成生产提示
    4.             Vue.config.productionTip=false 
    5.  
    6.             new  Vue({
    7.               el:'#root',
    8.               data:{
    9.                 name:'jack',
    10.                 url:'http://www.baidu.com'
    11.               }
    12.  
    13.             })
    14.  
    15.         script>

    三、数据绑定

       1.单向数据绑定

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.  
    11.         <div id="root">
    12.             单行数据绑定： <input type="text"  :value="name">
    13.         div>
    14.  
    15.  
    16.         <script type="text/javascript">
    17.             //阻止vue在启动时生成生产提示
    18.             Vue.config.productionTip=false 
    19.  
    20.             new  Vue({
    21.               el:'#root',
    22.               data:{
    23.                 name:'尚硅谷123'
    24.               }
    25.               
    26.             })
    27.         script>   
    28.  
    29.  
    30.     body>

    当我们在Vue中修改name的值的时候，页面的值也会随着修改，如下图

    但是我们在文本框中修改内容的时候，Vue中的name值不会改变

    原因：  单向绑定的关系

    2.双向数据绑定

    1.         <div id="root">
    2.             单行数据绑定： <input type="text"  :value="name">
    3.             <br>
    4.             双行数据绑定： <input type="text"  v-model:value="name">
    5.         div>

    结果如下图

    当我们修改Vue中name时，我们发现两个文本框都会改变

    当我们修改双向绑定文本框的时候，我们发现Vue的name值也会改变  （单向文本框也会改变的原因是因为Vue的name值改变了）

    产生了一个类似下图的连锁反应

  • 相关阅读:
    使用 vue-element-admin 开发后台管理系统【安装】
    除了走路，40-60岁的人，还可以进行哪些运动？3种运动可供参考
    ＜学习笔记＞从零开始自学Python-之-web应用框架Django（ 八）Django表单
    KVM API docs
    QT基础教程(文本绘制)
    【面试题】synchronized和lock的区别/手写生产者消费者
    说一下 TCP/IP 协议？以及每层的作用？
    【计算机网络】图解路由器（二）
    Kali实现ARP欺骗
    Spring boot 如何使用视图解析器 thymeleaf 模板引擎整合html公共部分详情
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126560835