vue2_模板语法、数据绑定

1、模板语法

Vue模板语法包括两大类

1 .插值语法

功能：用于解析标签体内容。插值语法往往用于指定标签体内容(双标签中间夹着的内容)
写法：{{xxx}} , xxx是js表达式，可以直接读取到data中的所有区域。

2 .指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：＜ a v-bind:href="xxx"＞ , xxx同样要写js表达式，可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是v-xxx ,此处只是拿v-bind举例。

例子：

即使用插值写法页面也无法进行标签内的解析如：

结果：

2、数据绑定

Vue中有2种数据绑定的方式
a.单向绑定v-bind数据只能从data流向页面
b.双向绑定v-model数据不仅能从data流向页面，还可以从页面流向data

备注
a.双向绑定一般都应用在表单类元素上，如</code>等<br> b. <code>v-model:value</code>可以简写为<code>v?model</code> ,因为v?model默认收集的就是value值</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初始vue</title>  <script src="/vueBaseJs/vue.js"></script> </head> <body>  <div id="root"> 单向数据绑定：<input type="text" v-bind:value="name"><br/><br/> 双向数据绑定：<input type="text" v-model:value="name"> </div> <script> Vue.config.productionTip = false;//阻止vue在启动时生成生产提示 //创建VUE实例 new Vue({ el:"#root", data:{ name:"张三" } }); </script> </body> </html> </code></pre> <h4 id="单向绑定结构图">单向绑定结构图：</h4> <p></p> <br> <h4 id="双向绑定结构图">双向绑定结构图：</h4> <p></p> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid18544-0.html' class='tagbtn' target='_blank'>vue基础</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-535287.html">19-前端核心技术-VUE基础使用</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-367617.html">Vue基础语法</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-359080.html">vue基础</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-221816.html">Vue学习笔记之Vue基础语法</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-90491.html">vue - vue基础/vue核心内容（2）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-42441.html">1.VUE基础入门</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-30335.html">vue基础</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="/skin/bootstrap.bundle.js"></script> </body> </html>