区块链技术博客
www.b2bchain.cn

vue笔记——本地应用

这篇文章主要介绍了vue笔记——本地应用的讲解,通过具体代码实例进行23929 讲解,并且分析了vue笔记——本地应用的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=23929

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

本地应用

文章目录

  • 本地应用
      • 1.内容绑定,事件绑定
        • v-text
        • v-html
        • v-on(为元素绑定事件)
          • 事件引发弹出窗口
          • 点击改变文本
          • **计数器**
      • 2.显示切换,属性绑定
        • v-show
        • v-if
        • v-bind
        • 实例:图片切换
      • 3.列表循环,表单元素绑定
        • v-for
        • v-on补充
        • v-model
      • 案例:记事本
          • 1.新增(使用v-for显示列表,用v-on绑定回车键,添加任务)
          • 2.删除(splice删除数组元素,响应式更新页面)
          • 3.统计(数组length)
          • 4.清空(清空数组)
          • 5.隐藏(没有元数据时隐藏元素v-show,v-if)
      • 总结

DOM:获取元素,操纵它们

vue.js: v开头语法 –> vue指令

1.内容绑定,事件绑定

v-text

 <div id="app">        <h2 v-text="message+'!'">四川</h2>        <h2 v-text="info+'!'">四川</h2>        <h2>{{ message+"!" }}四川</h2>     </div>     <!-- 开发环境版本,包含了有帮助的命令行警告 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script>         var app=new Vue({             el:"#app",             data:{                 message:"李云龙",                 info:"意大利炮"             }         })     </script>

v-text替换全部,{{}}替换部分

字符串拼接用+(逻辑运算)

vue笔记——本地应用

v-html

当data内容为html内容可以解析出来,普通文本和v-text相同

 <div id="app">        <p v-html="content"></p>        <p v-text="content"></p>     </div>     <!-- 开发环境版本,包含了有帮助的命令行警告 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script>         var app=new Vue({             el:"#app",             data:{                content:"<a href='http://www.baidu.com'>李云龙</a>"             }         })     </script>

vue笔记——本地应用

v-on(为元素绑定事件)

<input type="button" value="事件绑定" v-on:事件名="方法">/<input type="button" value="事件绑定" @事件名="方法">

methods(与data,el平级)

事件引发弹出窗口
<div id="app">        <input type="button" value="单击" v-on:click="doWr">        <input type="button" value="移到" v-on:mouseenter="doWr">        <input type="button" value="双击" v-on:dblclick="doWr">        <input type="button" value="简写双击" @dblclick="doWr">      </div>      <!-- 开发环境版本,包含了有帮助的命令行警告 -->      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>      <script>          var app=new Vue({              el:"#app",             methods:{                 doWr:function(){                   alert("按错了!!!");                 }             }          })      </script>

vue笔记——本地应用

vue笔记——本地应用

更复杂的方法(如修改页面元素显示),不用操作DOM元素

vue特点是页面由数据生成,数据改变,页面就会改变

点击改变文本
<div id="app">        <h2 @click="changeWeapon">{{ weapon }}</h2>      </div>      <!-- 开发环境版本,包含了有帮助的命令行警告 -->      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>      <script>          var app=new Vue({              el:"#app",              data:{                  weapon:"意大利炮"              },              methods:{                 changeWeapon:function(){                     this.weapon+="哪儿呢?"                 }             }          })      </script>

vue笔记——本地应用

计数器
 <div id="app">         <div class="input-num">         <button @click="sub">             -         </button>         <span>{{ num }}</span>         <button @click="add">             +         </button>         </div>     </div>       <!-- 开发环境版本,包含了有帮助的命令行警告 -->       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>       <script>           var app=new Vue({               el:"#app",               data:{                   num:1               },               methods:{                  add:function(){                      //console.log('add');                      if(this.num<10){                        this.num++                      }else{                          alert("数字不能超过10!")                      }                  },                  sub:function(){                     if(this.num>0){                       this.num--                     }else{                         alert("数字不能小于0!")                     }                  }              }           })       </script>

vue笔记——本地应用

vue笔记——本地应用

2.显示切换,属性绑定

根据表达式的真假,切换元素的显示和隐藏

img src使用相对路径,考虑服务器的安全性,浏览器是不允许页面直接读取本地硬盘资源的,因为这违反了浏览器的同源策略(即html文件与图片不在用一个域)。HTML 里用的是相对路径,即用网页服务器的root 文件夹为起始,而不允许进入与root平行的或高于网页服务器root 的其它分支路径。

v-show

<div id="app">         <input type="button" value="hide and appear" @click="changeIsShow">         <img v-show="isShow" src="1.jpg" alt="">     </div>       <!-- 开发环境版本,包含了有帮助的命令行警告 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script>           var app=new Vue({               el:"#app",               data:{                   isShow:"false"               },               methods:{                   changeIsShow:function(){                       this.isShow=!this.isShow;                   }               }           })     </script>

vue笔记——本地应用

v-if

操纵dom元素

<div id="app">         <input type="button" value="切换显示" @click="toggleIsShow">         <p v-if="isShow">我是李云龙</p>     </div>       <!-- 开发环境版本,包含了有帮助的命令行警告 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script>           var app=new Vue({               el:"#app",               data:{                   isShow:false               },               methods:{                   toggleIsShow:function(){                       this.isShow=!this.isShow;                   }               }           })     </script>

vue笔记——本地应用

v-show和v-if的区别:前者操纵样式,后者操纵元素(本质是删除dom元素和添加)

v-show用于频繁切换元素时,反之用v-if。

v-bind

设置元素属性(src,title,class)

v-bind:属性名=表达式,可简写为**:属性名=表达式**

 <style>       .active{           border: 1px solid red;       }   </style> </head> <body>     <div id="app">        <img v-bind:src="imgSrc" alt="">        <br>        <img :src="imgSrc" alt="" :title="imgTitle+'意大利炮'" :class="isActive?'active':''" @click="toggleActive">        <img :src="imgSrc" alt="" :title="imgTitle+'意大利炮'" :class="{active:isActive}" @click="toggleActive">     </div>       <!-- 开发环境版本,包含了有帮助的命令行警告 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script>           var app=new Vue({               el:"#app",               data:{                   imgSrc:"1.jpg",                   imgTitle:"李云龙",                   isActive:false               },               methods:{                   toggleActive:function(){                       this.isActive=!this.isActive;                   }               }           })     </script> </body>

img class是CSS样式名。

需要动态增删class时使用 isActive?'active':''{active:isActive}(推荐)可相互替换。

vue笔记——本地应用

实例:图片切换

<div id="app">       <img :src="imgArr[index]">       <!--左箭头-->       <a href="javascript:void(0)" v-show="index!=0" @click="prev"class="left">           <img src="./img/prev.png" alt="">       </a>       <!--右箭头-->       <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next"class="right">         <img src="./img/next.png" alt="">       </a>      </div>       <!-- 开发环境版本,包含了有帮助的命令行警告 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script>           var app=new Vue({               el:"#app",               data:{                   imgArr:[                       "./img/1.jpg",                       "./img/2.png",                       "./img/3.jpg",                   ],                   index:0               },               methods:{                   prev:function(){                       this.index--;                   },                   next:function(){                       this.index++;                   }               }           })     </script>

vue笔记——本地应用

3.列表循环,表单元素绑定

v-for

根据数据形成列表结构:数组(最常用),字符串,迭代器

<div id="app">         <input type="button" value="添加evol" @click="addevol">         <input type="button" value="删除第一个evol" @click="removeevol">      <ul>          <li v-for="(item,index) in arr">             {{ index+1 }} 恋与制作人:{{ item }}          </li>          <h2 v-for="item in evol" :title="item.name">              {{ item.name }}          </h2>      </ul>     </div>       <!-- 开发环境版本,包含了有帮助的命令行警告 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script>           var app=new Vue({               el:"#app",               data:{                  arr:["李泽言","许墨","周棋洛","白起","凌肖"],                  evol:[                      {name:"时间操控"},                      {name:"复制"},                      {name:"绝对吸引力"},                      {name:"风场控制"},                      {name:"雷电控制"}                  ]               },               methods:{                  addevol:function(){                      this.evol.push({name:"绝对控制力"})                  },                  removeevol:function(){                      this.evol.shift()                  }                   }                          })     </script>

vue笔记——本地应用

v-on补充

传递自定义参数(函数传参),事件修饰符

 <div id="app">        <input type="button" value="click" @click.right="doIt">        <input type="text" @keyup.enter="sayHi">     </div>       <!-- 开发环境版本,包含了有帮助的命令行警告 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script>           var app=new Vue({               el:"#app",               methods:{                 doIt:function(p1){                     console.log("do it");                     console.log(p1);                 },                 sayHi:function(){                     alert("宁吃了吗?")                 }                   }                          })     </script>

vue笔记——本地应用

v-model

设置和获取表单元素的值(双向数据绑定:表单和data中的值)

vue笔记——本地应用

案例:记事本

1.新增(使用v-for显示列表,用v-on绑定回车键,添加任务)
<header class="header">             <h1>李云龙的记事本</h1>             <input v-model="inputValue" @keyup.enter="addthing" autofocus="autofocus" autocomplete="off" placeholder="请输入李云龙的任务" class="new-todo">         </header>         <!--列表区域-->        <section class="main">         <ul class="todo-list">             <li class="todo" v-for="(item,index) in todolist">             <div class="view">                 <span class="index">{{ index+1 }}.</span>                 <label>{{ item }}</label>                 <button class="destory"></button>             </div>            </li>         </ul>     </section>
2.删除(splice删除数组元素,响应式更新页面)

删除键

<button class="destory" @click="remove(index)"></button>

methods

remove:function(index){                       this.todolist.splice(index,1);                   }
3.统计(数组length)
 <footer class="footer">         <span class="todo-count"> <strong>{{ todolist.length }}</strong> items left </span>     </footer>
4.清空(清空数组)
<button class="clear-completed" @click="clear">clear</button>  clear:function(){                       this.todolist=[];                   }
5.隐藏(没有元数据时隐藏元素v-show,v-if)
<footer class="footer" v-show="todolist.length!=0">         <span class="todo-count" v-if="todolist.length!=0"> <strong>{{ todolist.length }}</strong> items left </span>         <br>         <button v-show="todolist.length!=0"class="clear-completed" @click="clear">clear</button>     </footer>

添加在父元素或者子级元素根据自己需要决定

总结

vue笔记——本地应用

vue开发是基于数据,响应式开发,数据改变,页面也随之渲染。之前只是首先对dom元素的获取。

本文转自互联网,侵权联系删除vue笔记——本地应用

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » vue笔记——本地应用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们