1.表单

表单里面有单选框，多选框，下拉框，文本域

vue单页应用

SPA：signal page application（单页应用）

多页面：1个url->1个html文件 多个url->多个url

单页面:1个url->多个组件 他们之间的切换是通过路由

2.修饰符

事件修饰符

stop :阻止事件冒泡

prevent:阻止默认行为

capture:事件捕获 给谁添加谁先出来

once:只执行一次

self:只有自己才可以触发自己

鼠标修饰符

left:左键触发

right:右键触发

middle:中间滚轮

注意：对于修饰符自多只能写两个

键盘修饰符

up,down,left,right,enter ...

表单修饰符

lazy:失去焦点后获取最新数据

number:只判断第一个值是否是number类型 是number返回number 不是返回string

trim:去除用户输入内容的首位空格

3.vue生命周期

钩子函数：8个

beforeCreate : el data name 都是undefined

created：el ：undefined data：可以拿到数据

beforeMount：el：有节点了，data：有数据 此时el中的数据没有渲染

mounted:页面渲染完成

beforeUpdate:更新数据

updated：更新完成 注意：更新前后数据是一致的

beforeDestory：销毁之前

destory:销毁完成

4.动画

一,基础使用

第一步：给需要添加动画的元素用<transition>包裹起来

第二步：设置6个样式

.v-enter，.v-enter-to，.v-enter-active，.v-leave，.v-leave-to，.v-leave-active

注意:如果需要添加多个动画，只能修改样式中的v 把v换成自己定义的类名即可

二、动画库的使用

引入animate.css这个库

地址;https://animate.style/

5.案例

模拟购物车的小球

一、watch
1.深浅监听
注意:1.深监听只能获取到最新的数据，这种方式不推荐使用,如果需要使用，需要转为浅监听方式
 2.需要监听的方法名一定要与data中声明的属性名保持一致
<body>     <div id='app'>         <input type="text" v-model='msg'>        <div> {{msg}}</div>        <hr>        <input type="text" v-model='json.name'>        <input type="text" v-model='b'>        <div>{{json.name}}</div>     </div> </body> <script src='./vue.js'></script> <script>     let vm = new Vue({         el: '#app',         data: {             msg:'hello',             json:{                 name:'张三',                 age:20             },             b:''                      },         methods: {             // 可以通过这种方式进行深浅转换             fn(){                  var a = this.json.name                  return a             }         },         watch: {             // 浅监听   基本数据类型             msg(newVal,oldVal){//2.需要监听的方法名一定要与data中声明的属性名保持一致                 console.log(newVal,oldVal)            },         //    这种方式监听不到数据         //    json(newVal,oldVal){         //         console.log(newVal,oldVal)         //    }            json:{                handler(a){                     console.log(a)                },                deep:true            },//了解，不建议使用，因为监听不到旧数据 //1.深监听只能获取到最新的数据，这种方式不推荐使用,如果需要使用，需要转为浅监听方式         //    监听b属性            b(a,b){                 console.log(a)            }         },         mounted() {            console.log(this.fn())            this.b = this.fn()         },     }) </script>
 
检测一个字符串是否包含另一个字符：this.question.includes('?')||this.question.indexOf('?')!=-1（includes返回的值是true或false）
watch: {     question(){         // 出现好的概率是70% 不好的概率30%  Math.random 0-1      if(this.question.indexOf('?')!=-1||this.question.includes('?')){         if(Math.random()<0.7){             this.answer = '好'         }else{             this.answer='不好'         }      }     } },
2.百度案例
 
a.跨域的解决 jsonp 
 
b.通过监听用户输入，发送请求，渲染页面
跨域步骤：
<!DOCTYPE html> <html lang='en'> <head>     <meta charset='UTF-8'>     <meta name='viewport' content='width=device-width, initial-scale=1.0'>     <title>Document</title>     <style>         .select{             background-color: red;         }     </style> </head> <body>     <div id='app'>         <input type="text" v-model='search'  @keydown.up.prevent='up' @keydown.down = 'down' @keydown.enter = 'enter'>         <ul>             <li v-for='(item,index) in arr' :key='item' :class='[index==n?"select":""]'>{{item}}</li>         </ul>     </div> </body> <script src='./vue.js'></script> <script>     let vm = new Vue({         el: '#app',         data: {             search:'',             arr:[],//请求回来的数据             n:-1,//自己定义的标识         },         methods: {           down(){               console.log(111)               this.n++;               if(this.n>this.arr.length-1){                 this.n = 0               }           },           up(){             this.n--;             if(this.n<0){                 this.n=this.arr.length-1             }           },           enter(){             // https://www.baidu.com/s?wd=123             if(this.n>=0&&this.n<=this.arr.length-1){                 window.open('https://www.baidu.com/s?wd='+this.arr[this.n])             }else{                 window.open('https://www.baidu.com/s?wd='+this.search)             }           }         },         watch: {             search(){                 // 发送数据请求 jsonp方式                 var os = document.createElement('script');                 os.src = 'http://suggestion.baidu.com/su?cb=aa&wd='+this.search;                 document.body.appendChild(os)             }         },     })     function aa(res){         console.log(res)         // 找到与vm中data的关系，并且赋值         vm.arr = res.s     } </script> </html>
 二、过滤器
 
全局： Vue.filter('过滤器名字',回调函数)  回调函数中做的是业务逻辑
 
局部：在vue实例中通过filters配置项来配置  filters:{ 过滤器名称(){ 业务逻辑}  }
案例：
1.电话号码过滤
// 局部过滤器 <body>     <div id='app'>         <!-- | 管道符  -->         {{tel | fiterTel}}     </div> </body> <script src='./vue.js'></script> <script>     let vm = new Vue({         el: '#app',         data: {             tel:'15858589158'         },         methods: {         },         // 局部过滤器         filters:{             fiterTel:function(tel){                 return tel.slice(0,3)+'****'+tel.slice(7)             },             fiterTelb:function(tel){                 return tel.slice(0,3)+'****'+tel.slice(7)             }         }     }) </script> // 全局过滤 <body>     <div id='app'>         <!-- | 管道符  -->         {{tel | filterTel}}     </div> </body> <script src='./vue.js'></script> <script> // 全局过滤 Vue.filter('filterTel',(tel)=>{     return tel.slice(0,3)+'****'+tel.slice(7) }) Vue.filter('filterTela',(tel)=>{     return tel.slice(0,3)+'****'+tel.slice(7) })     let vm = new Vue({         el: '#app',         data: {             tel:'15858589158'         },         methods: {         },     })     let vn = new Vue({     }) </script>
2.过滤价格
 <body>     <div id='app'>         <!-- | 管道符  -->         {{price | filterPrice}}     </div> </body> <script src='./vue.js'></script> <script> Vue.filter('filterPrice',(price)=>{     return price.toFixed(2) })     let vm = new Vue({         el: '#app',         data: {             price:29.9         },         methods: {         },     })      </script>
 
3.过滤时间
<body>     <div id='app'>         <div>当前时间{{ time | filterTime}}</div>     </div> </body> <script src='./vue.js'></script> <script> Vue.filter('filterTime',(time)=>{     // padStart   首位补零方法  padEnd  末尾补零     let date = new Date(time)     // console.log(date)     // 年     let year = date.getFullYear()     // 月  ((date.getMonth()+1)+'')将数值转为字符串     let month = ((date.getMonth()+1)+'').padStart(2,'0')     // 日     let day = (date.getDate()+'').padStart(2,'0')     // 时     let hours = (date.getHours()+'').padStart(2,'0')     // 分     let minutes = (date.getMinutes()+'').padStart(2,'0')     // 秒     let seconds = (date.getSeconds()+'').padStart(2,'0')     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` })     let vm = new Vue({         el: '#app',         data: {             time:new Date(),         },         methods: {         },     }) </script>
 
三、计算属性
 
1.通过计算得出来的，所以就没有初始值
 
computed
 
区别：
computed:应用场景:购物车的总价  特点：多个数据影响一个数据
watch:应用场景    特点:一个数据影响多个数据
 
copmuted: 方法是不需要调用的，直接在页面使用即可
methods: 必须要调用的
<tr v-else>     <td colspan="4">平均分:{{avg}}</td> </tr> <script>     let vm = new Vue({         el: '#app',         data: {         },         methods: {         },         // 计算属性         computed: {             avg(){                 var sum=0;                 this.list.forEach(item=>{                     sum+=item.score                 })                  return sum/this.list.length             }         },     })     // computed:应用场景:购物车的总价  特点：多个数据影响一个数据     // watch:应用场景    特点:一个数据影响多个数据     // copmuted: 方法是不需要调用的，直接在页面使用即可     // methods: 必须要调用的 </script>
 
4.购物车案例
流程： 1.先画静态页面 利用bs ```html  <div id='app' class="container">     <h2>购物车</h2>     <table class="table table-bordered table-hover">       <tr>         <th>           <input type="checkbox" v-model='allChecked' @change='checkAll'>全选         </th>         <th>商品名称</th>         <th>商品单价</th>         <th>商品数量</th>         <th>小计</th>         <th>操作</th>       </tr>       <tr v-for='(item,index) in list' :key='item.id'>         <td>           <input type="checkbox" v-model='item.checked' @change='changeOne(index)'>         </td>         <td>{{item.name}}</td>         <td>{{item.price}}</td>         <td>           <button type="button" class="btn btn-primary" @click= 'cut(index)'>-</button>           <span>{{item.num}}</span>           <button type="button" class="btn btn-danger" @click= 'add(index)'>+</button>         </td>         <td>小计:{{item.price*item.num}}</td>         <td><button type="button" class="btn btn-primary" @click = 'del(index)'>删除</button></td>       </tr>       <tr>         <td colspan="6">总价:{{total}}</td>       </tr>     </table>   </div> ``` 2.实现点击添加，点击减少数量，点击删除功能 ```vue  let vm = new Vue({        el:'#app',        data:{          allChecked:false,           list:[             {               id:1,               name:'手机',               price:1999.9,               num:1,               checked:false             },             {               id:2,               name:'电脑',               price:4999.9,               num:1,               checked:true             },             {               id:3,               name:'平板',               price:2999.9,               num:1,               checked:false             },             {               id:4,               name:'相机',               price:999,               num:1,               checked:false             },           ]        },        methods: {           // 添加           add(index){             this.list[index].num++           },           cut(index){             this.list[index].num--             if( this.list[index].num<0){               this.list[index].num=0             }           },           del(index){             this.list.splice(index,1)           },           // 全选           checkAll(){             this.list.forEach(item=>{               item.checked = this.allChecked             })           },           //改变一个的状态           changeOne(index){                 this.allChecked = this.list.every(item=>item.checked)           }        },        }) ``` 3.判断选中状态完成总价的计算 ```js <tr>     <td colspan="6">总价:{{total}}</td> </tr>        ``` ```js computed: {           total(){             var sum=0;             this.list.forEach(item=>{               if(item.checked){                 sum+=item.price*item.num               }                             })             return sum           }        },

vue基础2的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  7. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  8. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  9. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  10. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

随机推荐

  1. CentOS_7安装docker

    CentOS_7安装docker Install Docker Engine on CentOS 官网文档:https://docs.docker.com/engine/install/centos/ ...

  2. Computersystemsicherheit学习笔记

    1.Verlässliche System 1.1 Security和Safety的区别 1.2 Fault,Error和Failure的区别 举例如下: 1.3 Verfügbarkeit 例题: ...

  3. 如何使用程序生成一个复杂的2D迷宫游戏地图

    相关: I Solved The World's Hardest Maze (with Code) 本文不做过多的内容介绍,本文主要是分享上面的这个视频内容,该内容介绍了一些自动生成复杂2D迷宫的算法 ...

  4. dotnet core微服务框架Jimu ~ 会员注册微服务

    提供会员注册服务,用户必须注册成会员才能享受应用提供的服务,如浏览和发布新闻, 但有些服务又需要指定角色的会员才能操作,如所有会员都可以浏览新闻,只有管理员(admin)角色的会员才可以发布新闻. 有 ...

  5. rpmbuild命令RPM包制作kafka示例SPEC

    kafka的自定义安装路径RPM包制作 # 编写SPEC cat kafka.spec BuildArch: noarch Name: kafka_2.11 Version: 2.1.0 Releas ...

  6. 内核源码+vscode+bear+clang实现函数任意跳转，无缝跳转，无缝阅读，无缝开发

    一.准备工作 1.内核源码版本选择 务必有一份能编译通过的<内核源码>,本次选择5.10版本的. #说明:5.10版本的<内核源码>里,在 scripts/clang-tool ...

  7. 零基础入门Hadoop：IntelliJ IDEA远程连接服务器中Hadoop运行WordCount

    今天我们来聊一聊大数据,作为一个Hadoop的新手,我也并不敢深入探讨复杂的底层原理.因此,这篇文章的重点更多是从实际操作和入门实践的角度出发,带领大家一起了解大数据应用的基本过程.我们将通过一个经典 ...

  8. 剖析Air724UG的硬件设计，有大发现？02篇

    ​ 3.8 I2C 管脚名 类型 序号 电压域 描述 I2C2_SCL IO 32 V_GLOBAL_1V8 I2C2 时钟信号,用作 I2C 时需外加 1.8V 上拉 I2C2_SDA IO 31 ...

  9. i-MES生产制造管理系统-可视化看板

    可视化看板最主要的目的是为了将生产状况透明化,让大家能够快速了解当前的生产状况以及进度,通过大数据汇总分析,为管理层做决策提供数据支撑,看板数据必须达到以下基本要求: 数据准确--真实反映生产情况 数 ...

  10. 2024最新免费IP地址SSL证书申请

    为IP地址申请免费的SSL证书相对较为困难,因为多数证书颁发机构(CA)提供的免费SSL证书主要是基于域名的.不过,还是可以尝试以下方法来申请免费的IP地址SSL证书: 一.确认IP地址与了解需求 确 ...