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”跟 ...

随机推荐

Java 面向对象高级
文章目录 1.静态 1.1 static修饰成员变量 1.2 static修饰成员变量的应用场景 1.3 static修饰成员方法 1.4 工具类 1.5 static的注意事项 1.6 static ...
字符串、列表、元组、字典（python）
文章目录 1.python字符串 1.1 python访问字符串中的值 1.2Python 字符串连接 1.3Python字符串运算符 2.python列表 2.1访问列表中的值 2.2更新列表 2. ...
centos 的yum源设置
转载请注明出处: 在CentOS系统中,yum是自带的.yum(Yellowdog Updater, Modified)是一款在CentOS及其他基于Red Hat的Linux发行版中广泛使用的包管理 ...
基于pikachu靶场的水平越权详解
1. pikachu靶场搭建如果你在之前已经使用过phpstudy了,参考pikachu 靶场环境搭建如果在靶场搭建中遇到一些问题,参考皮卡丘靶场搭建遇到的问题大全 2. 水平越权简介水平越权是 ...
13-2 c++拷贝控制和资源管理
目录 13.2.1 行为像值的类类拷贝赋值运算符的编写 13.2.2 定义行为像指针的类引用计数定义一个使用引用计数的类为了定义这些成员,我们首先必须确定此类型对象的拷贝语义.一般来说,有两种 ...
微信小程序目录结构
一.小程序框架微信开放平台--小程序框架介绍小程序的目录结构很清晰,主要由描述整体内容的app和描述具体页面的page组成.一般来说,习惯对小程序的目录结构进行更加清晰的规划,例如将程序种会用到的 ...
Air780E软件指南：C语言内存数组(zbuff)
一.ZBUFF(C内存数组)简介 zbuff库可以用c风格直接操作(下标从0开始),例如buff[0]=buff[3] 可以在sram上或者psram上申请空间,也可以自动申请(如存在psram则在p ...
一键生成美观的彩页演示+AI的训练过程科普
一键生成美观彩页 + AI训练揭秘:让你的内容瞬间高大上! 阅读时间: 8分钟 | 字数: 1300+ 你是否曾为制作精美的演示文稿而烦恼?是否对AI的训练过程充满好奇?今天,让我们一起探索如何用AI ...
UML 基础：类图
这是关于统一建模语言.即UML 里采用的基本图的一系列文章的一部分.在我先前关于序列图的文章里,我把重点从 UML 1.4 版,转移到 OMG的采用UML 2.0版草案规范(又称为UML 2).在 ...
Linux命令之ncdu
简介 Ncdu - NCurses Disk Usage Ncdu 是一个带有 ncurses 接口的磁盘使用分析器. 它旨在在您没有完整图形设置可用的远程服务器上查找空间占用,但即使在常规桌面系统上 ...

vue基础2