vue数据双向绑定

刺骨的言语ヽ痛彻心扉 2024-03-30 09:50 280阅读 0赞

5.Vue数据双向绑定

5.1.什么是双向数据绑定

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

5.2 怎么实现双向数据绑定
v-model
  1. v-model 指令可以在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
  3. 注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

测试案例：

用非v-model方式的时候，是不能双向绑定的

  1. <div id="app">     
  2.         <input type="text"  :value="msg"  />
  3.         <div>{
  4.    {msg}}</div>
  5.     </div>
  7.      <script>
  8.          var app = new Vue({
  9.              el:'#app',
  10.              data:{
  11.                 msg:"hello"
  12.              }
  13.          });
  14.      </script>

在这里插入图片描述

改为v-model方式绑定：

  1. <div id="app">     
  2.         <input type="text"  v-model="msg"  />
  3.         <div>{
  4.    {msg}}</div>
  5.     </div>
  7.      <script>
  8.          var app = new Vue({
  9.              el:'#app',
  10.              data:{
  11.                 msg:"hello"
  12.              }
  13.          });
  14.      </script>

在这里插入图片描述

案例2：

  1. <div id="app">
  2.         <select v-model="selected">
  3.             <option value="">--请选择--</option>
  4.             <option value="北京">北京</option>
  5.             <option value="上海">上海</option>
  6.             <option value="武汉">武汉</option>
  7.         </select>
  8.         <p>{
  9.    {selected}}</p>
  10.     </div>
  11.      <script>
  12.          var v= new Vue({
  13.              el:"#app",
  14.              data:{selected:'' }
  15.          });
  16.      </script>

在这里插入图片描述

案例3：

  1. <div id="app">
  2.         <input type="checkbox" id="jack" value="吃饭" v-model="checkedValues">
  3.         <label for="jack">吃饭</label>
  4.         <input type="checkbox" id="john" value="睡觉" v-model="checkedValues">
  5.         <label for="john">睡觉</label>
  6.         <input type="checkbox" id="mike" value="打豆豆" v-model="checkedValues">
  7.         <label for="mike">打豆豆</label>
  9.         <div>选中的值: </div>
  10.         <ul>
  11.           <li v-for="item in checkedValues" >{
  12.    {item}}</li>
  13.         </ul>    
  14.     </div>
  16.     <script type="text/javascript">
  17.     var v = new Vue({
  18.         el: '#app',
  19.         data: {
  20.             checkedValues:[]
  21.         }
  22.     });
  23.     </script>

在这里插入图片描述

6.Vue事件绑定

v-on
  1.   v-on:事件名 = “方法名”
  2.   简写方式： @事件名 = “方法名”
  3.   事件名有哪些： click|keydown|keyup|mouseover|mouseout|自定义事件名

测试案例1：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/vue.js" ></script>
  7.     </head>
  8.     <body>
  10.         <div id="app">
  12.             <input type="button" value="-"  v-on:click="sub" />
  13.             <input type="text" v-model="num" />
  14.             <input type="button" value="+" @click="plus" />
  17.         </div>
  19.         <script>
  21.             var v=new Vue({
  23.                 el:"#app",
  24.                 data:{
  25.                     num:1
  26.                 },
  27.                 methods:{
  28.                     sub:function(){
  29.                         if(this.num>0)
  30.                           this.num-=1;
  31.                     },
  32.                     plus:function(){
  33.                         this.num=parseInt(this.num)+1; 
  34.                     }
  35.                 }
  37.             })
  39.         </script>
  41.     </body>
  42. </html>

在这里插入图片描述

在这里插入图片描述

v-on： 可以简化为@

  1. <div id="app">
  2.     <input type="button" value="-" @click="sub" />
  3.     <input type="text"  v-model="count" />
  4.     <input type="button" value="+" @click="plus" />
  5. </div>

测试案例2：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/vue.js" ></script>
  7.     </head>
  8.     <body>
  10.         输入分数，按回车，显示等级
  12.         <div id="app">
  14.             <div>等级:{
  15.    {level}}</div>
  17.             <input type="text"  v-on:keyup.enter="show" v-model="score" />
  19.         </div>
  22.          <script type="text/javascript">
  23.             var app = new Vue({
  24.                 el: '#app',
  25.                 data: {
  26.                     level: '',
  27.                     score:''
  28.                 },
  29.                 methods: {
  31.                     show: function () {
  32.                       if(this.score>=0 && this.score<60)
  33.                           this.level="D";
  34.                       else if(this.score<80)
  35.                           this.level="C";   
  36.                       else if(this.score<90)
  37.                           this.level="B";
  38.                       else
  39.                           this.level="A";
  40.                     }
  41.                 }
  43.             })
  44.         </script>
  47.     </body>
  48. </html>

测试结果：

在这里插入图片描述

7.综合案例

  1. 根据前面学习的vue的基础语法和事件绑定，实现一下商品的查询，添加，删除功能。

测试案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script type="text/javascript" src="js/vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <div style="text-align: center;" >
  11.             <div >
  12.                 <h3 >商品操作页面</h3>
  13.             </div>
  14.          <div  style="text-align:center">
  15.                          序号：<input type="text"  v-model="id"/>
  16.                          名称：<input type="text"  v-model="name"/>
  17.                          价格：<input type="text"  v-model="price"/>
  18.               <input type="button" value="添加" @click="add()"/><br/>
  19.                            搜索：<input type="text" v-model="searchKey"/>
  21.             </div>
  22.         </div>
  23.         <table style="width: 800px; margin-left: auto; margin-right: auto;" border="1">
  24.             <header>
  25.                 <tr>
  26.                     <td>序号</td>
  27.                     <td>名称</td>
  28.                     <td>价格</td>
  29.                     <td>操作</td>
  30.                 </tr>
  31.             </header>
  32.         <tbody>
  33.             <tr v-for="item in search(searchKey)" :key="item.id">
  34.                 <td>{
  35.    { item.id }}</td>
  36.                 <td>{
  37.    { item.name }}</td>
  38.                 <td>{
  39.    { item.price }}</td>
  40.                 <!-- .prevent阻止事件的默认行为，这里是阻止超链接默认的跳转功能-->
  41.                 <td><a href="" @click.prevent="del(item.id)">删除</a></td>
  42.             </tr>
  43.         </tbody>
  44.       </table>
  45.     </div>
  47.     <script type="text/javascript">
  48.         var vm = new Vue({
  49.             el : "#app",
  50.             data:{
  51.                 id:'',
  52.                 name:'',
  53.                 searchKey:'',
  54.                 list:[
  55.                     {id:1,name:'T恤',price:100},
  56.                     {id:2,name:'西装',price:500},
  57.                     {id:3,name:'连衣裙',price:200},
  58.                     {id:4,name:'衬衫',price:150}
  59.                 ]
  60.             },
  61.             methods:{
  62.                 add(){
  63.                     //将表单中的数据组装为一个商品对象
  64.                     var good = {
  65.                             id:this.id,
  66.                             name:this.name,
  67.                             price:this.price
  68.                         };
  69.                     //存入list中
  70.                     this.list.push(good);
  71.                     //将表单数据清空
  72.                     this.id = this.name = this.price='';
  73.                 },
  74.                 del(id){
  75.                     //遍历查询
  76.                     var index = this.list.findIndex( item => {
  77.                         if(id == item.id){
  78.                             return true;
  79.                         }
  80.                     });
  81.                     this.list.splice(index,1);//JavaScript中的splice(index,i)方法：从已知数组的index下标开始，删除i个元素
  82.                 },
  83.                 search(searchKey){
  84.                     //filter() 方法创建一个新的数组，新数组中的元素是数组中符合条件的所有元素组合而成
  85.                     return this.list.filter(item => {
  86.                         if(item.name.includes(searchKey)){
  87.                             return item;
  88.                         }
  89.                     });
  90.                 }
  91.             }
  92.         })
  93.     </script>
  94. </body>
  95. </html>

测试结果：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

8.Template 标签

  1. template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上

比如：

  1. <div v-for="value in user">{
  2.    {value}}</div>

这个循环是做在div上面的，如果需要循环的内容很多，比如span标签也要做这个循环

  1. <div v-for="value in user">{
  2.    {value}}</div>
  3. <span v-for="value in user">{
  4.    {value}}</span>

则需要把循环提出来,但这样会多一个div标签

  1. <div v-for="value in user">
  2.     <div>{
  3.    {value}}</div>
  4.     <span>{
  5.    {value}}</span>
  6. </div>

如果不想多一个标签，可以用template，template不会渲染到页面上

  1. <template v-for="value in user">
  2.     <div>{
  3.    {value}}</div>
  4.     <span>{
  5.    {value}}</span>
  6. </template>

另外，template可以用到制作模板。

方法1：直接在vue对象中定义

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/vue.js" ></script>
  7.     </head>
  8.     <body>
  9.    <!--这里会显示template里的内容-->
  10.     <div id="app">
  12.     </div>
  14.     <script>
  15.         var  v = new Vue({
  16.             el:"#app",
  17.             data:{
  18.                 msg:"daimenglaoshi"
  19.             },
  20.             template:"<div>{
  21.    {msg}}</div>"//模板中只能有一个根元素
  22.         });
  23.     </script>
  24.     </body>
  25. </html>

方法2：写在template标签里

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/vue.js" ></script>
  7.     </head>
  8.     <body>
  11.     <!--这里会显示template标签里的内容-->
  12.     <div id="app"></div>
  14.     <!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
  15.     <template id="temp">
  16.         <div>{
  17.    {msg}}<div>      
  18.     </template>
  20.     <script>
  21.         let vm = new Vue({
  22.             el:"#app",
  23.             data:{
  24.                 msg:"daimenglaoshi"
  25.             },
  26.             //通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
  27.             template:"#temp"
  29.         });
  30.     </script>        
  31.     </body>
  32. </html>

方法3：写在script标签里

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/vue.js" ></script>
  7.     </head>
  8.     <body>
  10.     <div id="app"></div>
  12.     <script type="x-template" id="temp">
  13.        <div>{
  14.    {msg}}</div>
  15.    </script>
  17.     <script>
  18.         var  v = new Vue({
  19.             el:"#app",
  20.             data:{
  21.                 msg:"daimenglaoshi"
  22.             },
  23.             template:"#temp"//模板中只能有一个根元素
  24.         });
  25.     </script>
  26.     </body>
  27. </html>

发表评论

表情：
评论列表 （有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读