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的更多相关文章

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
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 ...
Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
Vue基础以及指令
Vue 基础篇一一.Vue框架介绍之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
2-5 vue基础语法
一.vue基础语法语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

随机推荐

react+eslint+prettier 项目配置
项目地址 https://gitee.com/zhudachangs/react-eslint-prettierrc-demo 项目地址gitee 项目配置eslint(验证) + prettierr ...
题解：CF1551D1 Domino (easy version)
题解:CF1551D1 Domino (easy version) 分析题目中保证 $n\times m$ 为偶数,下面进行分类讨论. 情况一如果 $n$ 和 $m$ 都是偶数,那么可 ...
TAMAYA
TAMAYA 挺有意思的维护题. 题面 n个小夫坐成一排,每个小夫有一个真实值vi.小夫们有m场聚会,第i次聚会会在编号为 [li, ri] 的小夫中举办. 聚会之后,这些小夫的真实值会变为他们之中的 ...
一个基于 .NET 8.0 构建的简单、跨平台、模块化商城系统
前言今天给大家分享一个基于 .NET 8.0 构建的开源免费(MIT License).简单.跨平台.模块化的商城系统:Module Shop. 主要功能销售:订单.物流. 内容:首页配置.评论. ...
el-upload上传文件需要在请求之前加一个校验文件内容格式请求
before-upload data(){ return { ... //判断是否需要做文件检查 checkFileFormat:false } }, beforeUpload(rawFile) { ...
Solr的学习使用之（七）Solr高级查询facet、facet.pivot简介 - OnTheRoad_Lee
http://martin3000.iteye.com/blog/1330106 1 .什么是Faceted Search Facet['fæsɪt]很难翻译,只能靠例子来理解了.Solr作者Yoni ...
ArrayList源码分析（基于JDK1.6）
不积跬步,无以至千里:不积小流,无以成江海.从基础做起,一点点积累,加油! <Java集合类>中讲述了ArrayList的基础使用,本文将深入剖析ArrayList的内部结构及实现原理,以 ...
Prometheus之系统安装，启动
Prometheus简介Prometheus是最初在SoundCloud上构建的开源系统监视和警报工具包. 自2012年成立以来,许多公司和组织都采用了Prometheus,该项目拥有非常活跃的开发人 ...
使用SELECT…INTO OUTFILE导出文本文件
MySQL数据库导出数据时,允许使用包含导出定义的SELECT语句进行数据的导出操作.该文件被创建到服务器主机上,因此必须拥有文件写入权限(FILE权限)才能使用此语法."SELECT.. ...
搭建一个文件存储服务器minio，实现文件存储
搭建一个文件存储服务器minio,实现文件存储 Minio是一个开源的.自托管的对象存储服务器,它提供了类似于云存储服务的功能.你可以使用Minio搭建自己的私有云存储解决方案,或者作为公共存储服务的 ...

vue基础2