1 vue:就是一个js框架，跟jquery很像
2 cdn，下载到本地，script中引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app"> {{ message }} <br> <h1>{{ name }}</h1> </div> </body> <script> //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作 var app = new Vue({ el: '#app', data: { message: 'Hello world!', name:'lqz' } }) </script> </html>
前端现状
1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
-网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
-Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下
Vue介绍
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
渐进式框架
可以一点一点地使用它，只用一部分，也可以整个项目都使用它，就是一个前端项目
网站
版本
-
1.X：使用得较少
-
2.X：普遍使用
-
3.X：刚出没多久，只有Beta版
Vue特点
易用
-
通过 HTML、CSS、JavaScript构建应用
灵活
-
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效
-
20kB min+gzip 运行大小
-
超快虚拟 DOM
-
最省心的优化
MVVM架构
MVVM介绍
1 M(数据层)----V(页面展示)----VM（vm）
2 双向数据绑定：JS中变量变了，HTML中数据也跟着改变
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式 Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中 View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS） ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
MVVM的特性
-
低耦合：
视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变 -
可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View
重用这端视图的逻辑（以此减少代码冗余） -
独立开发：
开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计 -
可测试：界面元素是比较难以测试的，而现在的测试可以
针对ViewModel来编写
单页面开发和组件化开发
组件化开发：
类似于DTL中的include，每一个组件的内容都可以被替换和复用
单页面开发：
只需要1个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有1个index.html
nodejs介绍
1 javascript:只能运行在浏览器中，解释型语言，浏览器里有它的解释器
2 谷歌的V8引擎，抠出来，运行在操作系统之上，c写了一些底层包
3 nodejs：解释器，写javascript的代码
4 前端工程师，不用学后端语言，只会js，就可以写后端了
5 node：python，6 npm：pip3，用来安装第三方包
## 前端开发的ide
- WebStorm
是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”
“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
- VS code
Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows
和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对
JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（
例如.NET和Unity）扩展的生态系统。
- HBuilder
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。
HBuilder本身主体是由Java编写。
- Sublime Text
Sublime Text 是一个文本编辑器（收费软件，可以无限期试用，但是会有激活提示弹窗），同时也是一个先进的代码编辑器。
Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。Sublime Text具
有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text的主
要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨
平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。
## 我们开发用pycharm
- webstorm和pycharm是一家，只需要装vue插件
模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插值语法</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>字符串：{{ name }}</h1> <h1>数值：{{ age }}</h1> <h2>数组：{{ name_list }}</h2> <h3>对象：{{ person_info }}</h3> <h4>{{ link }}</h4> <h4>对象取值：{{ person_info.age }}</h4> <h4>数组取值：{{ name_list[1] }}</h4> <h4>运算：{{ 10+20+30 }}</h4> <h4>三元运算：{{ 10>20?'是':'否' }}</h4> </div> </body> <script> var vm = new Vue({ el: "#app", data: { name: 'geng', //字符串 age:18, //数值 name_list: ['刘一', '陈二', '张三', '李四', '王五', '赵六'], //对象 person_info:{name:'geng',age:18}, link:'<a href="http://www.baidu.com">点我</a>' } }); </script> </html>
指令
文本指令,事件指令
文本指令:
v-text 标签内容显示js变量对应的值
v-html 让HTML渲染成页面
v-if 放1个布尔值：为真 标签就显示；为假 标签就不显示
v-show 放1个布尔值：为真 标签就显示；为假 标签就不显示
v-show与 v-if的区别：
v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入 标签
事件指令:
v-on:缩写成@
v-on:click='函数'
@click='函数'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>指令</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h1 v-html="link"></h1> <h1 v-text="name"></h1> <h1 v-text="link"></h1> <h1></h1> <button @click="handleClick">若隐若现</button> <div v-show="show"> <h2>我只要你一滴泪的时间，听你形容他狠心的脸</h2> </div> <button @click="handle1">点我</button> <div v-if="if_show"> <h2>那些快乐的梦都变丑了，你看不见吗</h2> </div> <div></div> </div> </body> <script> var vm = new Vue({ el: "#app", data: { name: 'geng', link: '<a href="http://www.baidu.com">点我</a>', show: true, if_show: true }, methods: { handleClick() { this.show = !this.show }, handle1() { this.if_show = !this.if_show } } }) </script> </html>
属性指令
v-bind:src/href/name/='变量'
缩写成
:src='变量'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .red{ background-color: red; } .purple{ background-color: aquamarine; } </style> </head> <body> <div id="app"> <h1><a v-bind:href="link">点我看美女</a></h1> <br> <img :src="img" alt=""> <div :class="isActive?'red':'purple'"> <h1>快乐的一只小青蛙</h1> </div> </div> </body> <script> var vm = new Vue({ el:'#app', data:{ name:'lqz', isActive:false, link:'http://www.cnblogs.com', img:'https://tva1.sinaimg.cn/large/00831rSTly1gcy7m2g0j9j310q0gqjtv.jpg', } }) </script> </html>
style和class的使用
#js数组操作，增加值，修改值，删除值，vue的页面都会变
数据的绑定
语法
:属性名=js变量/js语法
:class=’js变量、字符串、js数组’
class：三目运算符、数组、对象{red: true}
:style=’js变量、字符串、js数组’
style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}
可以检测到变动的数组页面也跟着编号的操作：
push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转
检测不到变动的数组页面不变化的操作：
filter()：过滤
concat()：追加另一个数组
slice()：
map()：
原因：
作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .red{ background-color: red; } .purple{ background-color: aquamarine; } .font_1{ font-size: 30px; } </style> </head> <body> <div id="app"> <div :class="class_obj"> <h1>快乐的一只小青蛙</h1> </div> <br> <div :style="style_obj"> <h1>忧伤的一只小克马</h1> </div> <br> <button @click="handle">点击变大</button> </div> </body> <script> var vm = new Vue({ el:'#app', data:{ // class_obj:'purple' // class_obj:['red','font_1'] // class_obj:{red:true,font_1:false} // style_obj:'red' style_obj: [{background:'green'},{fontSize:'10px'}] // style_obj: {background:'blue',fontSize:'20px'} }, methods:{ handle(){ this.style_obj.fontSize='90px' } } }) </script> </html>
条件渲染
指令 释义
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <style> </style> </head> <body> <div id="app"> <div v-if="a=='A'">A</div> <div v-else-if="a=='B'">B</div> <div v-else>其他</div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { a:'A' }, methods: { handle() { this.style_obj.fontSize = '90px' } } }) </script> </html>
列表渲染(购物车)
v-if+v-for+v-else控制购物车商品的显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="js/vue.js"></script> </head> <body> <div id="app"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-primary"> <button @click="handld">点我加载数据</button> <hr> <table class="table table-condensed" v-if="!goods.length==0"> <thead> <tr> <th>商品名字</th> <th>价格</th> <th>数量</th> </tr> </thead> <tbody> <tr v-for="good in goods"> <td class="info">{{good.name}}</td> <td class="success">{{good.price}}</td> <td class="warning">{{good.count}}</td> </tr> </tbody> </table> <div v-else> 啥也没有 </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { goods: [] }, methods: { handld() { //去后台加载数据 this.goods = [{name: '特斯拉', price: 10000, count: 1}, {name: '包子', price: 3, count: 10}, {name: '花卷', price: 5, count: 12}] } } }) </script> </html>
v-for遍历数组(列表)、对象(字典)、数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h1>循环数组</h1> <ul class="list-group"> <li class="list-group-item" v-for="(value,index) in list">第{{index}}个人-----名字是：{{value}}</li> </ul> <br> <h1>循环对象</h1> <ul class="list-group"> <li class="list-group-item" v-for="o in obj">{{o}}</li> </ul> <ul class="list-group"> <li class="list-group-item" v-for="(value,key) in obj">key是：{{key}}《---》value是：{{value}}</li> </ul> </div> </body> <script> var vm = new Vue({ el: '#app', data: { list: ['张三', '李四', '王五', '赵六'], obj: {name: 'lqz', age: '18', sex: '男'} } }) </script> </html>
事件处理
事件
|
释义
|
input
|
当输入框进行输入的时候 触发的事件
|
change
|
当元素的值发生改变时 触发的事件
|
blur
|
当输入框失去焦点的时候 触发的事件
|
过滤案件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <style> </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-lg-6 col-md-offset-3"> <div id="app"> <!-- <input type="text" v-model="name" placeholder="光标移开触发-blur" v-on:blur="handle_blur">--> <!-- <input type="text" v-model="name" placeholder="请输入要搜索的内容-change" v-on:change="handle_change">--> <!-- <input type="text" v-model="name" placeholder="请输入要搜索的内容-input" v-on:input="handle_input">--> <input type="text" v-model="name" placeholder="请输入要搜索的内容-input" @input="handle_input"> <ul> <li v-for="l in list">{{l}}</li> </ul> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { name: '', list_old: ['a', 'atm', 'atmtw', 'atmtwxx', 'b', 'body', 'bodyxx', 'tm', 'm'], list: ['a', 'atm', 'atmtw', 'atmtwxx', 'b', 'body', 'bodyxx', 'tm', 'm'] }, methods: { handle_input() { //只要输入框文字发生变化，就会触发它 //根据输入的值，过滤list // let _this=this // this.list.filter(function (item) { // console.log(_this.list_old) // // }) this.list = this.list_old.filter(item => { if (item.indexOf(this.name) > -1) { return true } else { return false } }) }, handle_change() { console.log('change') console.log(this.name) }, handle_blur() { console.log('blur') console.log(this.name) }, } }) // let list = ['a', 'atm', 'atmtw', 'atmtwxx', 'b', 'body', 'bodyxx', 'tm', 'm'] // let list_new=list.filter(function (item) { // if(item.length>=3){ // return true // }else{ // return false // } // // }) //箭头函数---es6的语法 // let list_new = list.filter(item => { // if (item.length >= 3) { // return true // } else { // return false // } // }) // console.log(list_new) // // // var a = (data, a) => { // // } // var b = function (data, a) { // // // } let a='efy' let str_a='abcdefg' console.log(str_a.indexOf(a)) </script> </html>
事件修饰符
事件修饰符
|
释义
|
| .stop |
只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
|
| .self |
只处理自己的事件，子控件冒泡的事件不处理
|
| .prevent |
阻止a链接的跳转
|
| .once |
事件只会触发一次（适用于抽奖页面）
|
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击
阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <style> </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-lg-6 col-md-offset-3"> <div id="app"> <div v-on:click="div_click"> <button @click.stop="button_click">点我看美女</button> </div> <hr> <div v-on:click.self="div_click"> <button @click="button_click">点我看美女2</button> <span>dadfafdasdfadsf</span> </div> <hr> <a href="http://www.baidu.com" @click.prevent="handle_a">点我看没办</a> <hr> <button @click.once="handle_one">我只能点一次</button> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: {}, methods: { div_click() { alert('div被点击了') }, button_click() { alert('button被点击了') }, handle_a(){ alert('a链接跳转阻挡了') location.href='http://www.baidu.com' }, handle_one(){ alert('我只会谈一次') } } }) </script> </html>
按键修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <!-- <input type="text" @keyup.enter="handle" v-model="search">--> <!-- <input type="text" @keyup="handle" v-model="search">--> <input type="text" @keydown="handle" v-model="search"> </div> </body> <script> var vm = new Vue({ el: '#app', data: { search:'' }, methods: { handle(){ console.log('enter建被放开了') location.href='https://www.baidu.com/s?wd='+this.search } } }) </script> </html>
数据双向绑定
v-model的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="./js/vue.js"></script> </head> <body> <div id="box"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="input-group"> <label for="name">用户名</label> <!-- v-model数据的双向绑定，只针对input的属性 --> <input class="form-control" type="text" v-model="name"> </div> <div class="input-group"> <label for="password">密码</label> <input class="form-control" type="password" v-model="password"><span>{{error}}</span> </div> <hr> 您输入的名字是：{{name}} <hr> <button @click="submit_1">登录</button> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#box', data: { name: '', password: '', error: '', }, methods: { submit_1() { if (this.name == 'lqz' && this.password == '123') { location.href = 'http://www.baidu.com' } else { this.error = '用户名或密码错误' } } } }) </script> </html>
表单控制
checkbox选中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="./js/vue.js"></script> </head> <body> <div id="box"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="input-group"> <label for="name">用户名</label> <!-- v-model数据的双向绑定，只针对input的属性 --> <input class="form-control" type="text" v-model="name" placeholder="请输入用户名"> </div> <div class="input-group"> <label for="password">密码</label> <input class="form-control" type="password" v-model="password" placeholder="请输入密码"> </div> <hr> 您输入的名字是：{{name}} <hr> <div class="input-group"> <label>记住密码：</label> <input type="checkbox" v-model="check_1"> <input type="checkbox" v-model="radio_1"> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#box', data: { name: '', password: '', checkbox_1: false, radio_1:false, }, }) </script> </html>
单选，多选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="./js/vue.js"></script> </head> <body> <div id="box"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="input-group"> <label for="name">用户名</label> <!-- v-model数据的双向绑定，只针对input的属性 --> <input class="form-control" type="text" v-model="name" placeholder="请输入用户名"> </div> <div class="input-group"> <label for="password">密码</label> <input class="form-control" type="password" v-model="password" placeholder="请输入密码"> </div> <h4>单选</h4> <div class="input-group"> <input type="radio" v-model="sex" value="男">男 <input type="radio" v-model="sex" value="女">女 <input type="radio" v-model="sex" value="未知">未知 <br><br>您的性别：{{sex}} </div> <hr> <h4>多选</h4> <div class="input-group"> <input type="checkbox" v-model="hobby" value="篮球">篮球 <input type="checkbox" v-model="hobby" value="足球">足球 <input type="checkbox" v-model="hobby" value="桌球">桌球 <input type="checkbox" v-model="hobby" value="棒球">棒球 <input type="checkbox" v-model="hobby" value="羽毛球">羽毛球 <input type="checkbox" v-model="hobby" value="乒乓球">乒乓球 <input type="checkbox" v-model="hobby" value="双色球">双色球 <br><br>您喜欢的球类：{{hobby}} </div> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#box', data: { name: '', password: '', sex: '', hobby:[], }, }) </script> </html>
购物车案例
基础-结算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本购物车计算商品价格</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="./js/vue.js"></script> </head> <body> <div id="box"> <div class="container-fluid"> <div class="row"> <h2 class="text-center">购物车</h2> <div class="col-md-6 col-md-offset-3"> <table class="table table-condensed text-center"> <tr> <td class="active">图片</td> <td class="success">名称</td> <td class="info">价格</td> <td class="danger">数量</td> <td class="warning">选择</td> </tr> <tr v-for="good in goods"> <td class="info"><img :src="good.img" alt="" width="40px" height="30px"></td> <td class="danger">{{good.name}}</td> <td class="warning">{{good.price}}</td> <td class="success">{{good.count}}</td> <!-- v-model绑定数据，value绑定商品对象 @change选中没选中都触发事件--> <td class="active"><input type="checkbox" v-model="checkGroup" :value="good" @change="sumPrice"></td> </tr> </table> 选中的商品：{{checkGroup}} <br> 总价格：{{sumPrice()}} </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#box', data: { goods: [ {id: 1, name: '汉堡', price: 16, count: 1, img: './img/hanbao.jpg'}, {id: 1, name: '鸡肉卷', price: 10, count: 1, img: './img/jiroujuan.jpg'}, {id: 1, name: '炸鸡', price: 28, count: 1, img: './img/zhaji.jpg'}, {id: 1, name: '啤酒', price: 8, count: 1, img: './img/pijiu.jpg'}, {id: 1, name: '可乐', price: 6, count: 1, img: './img/kele.jpg'},], checkGroup:[], // totalPrice：0 方式一需要在全局定义 }, methods: { // 方式一 // sumPrice(){ // this.totalPrice=0 //先置0再去改 // for (i in this.checkGroup){ // 这里的 i 是索引，每次根据索引取值 // this.totalPrice+=this.checkGroup[i].price*this.checkGroup[i].count // // } // // } // 方式二 // 函数内使用的vue中的变量，只要发生变化，函数会重新运算 sumPrice(){ let totalPrice = 0 // for (i=0;i<this.checkGroup.length;i++){//索引循环 for (i in this.checkGroup){ //迭代循环，在Vue当中是取值，在JS中第一个值是索引 //只要checkGroup发生变化，就会重新运算，totalPrice也就跟着变化 totalPrice += this.checkGroup[i].price * this.checkGroup[i].count } return totalPrice } }, }) </script> </html>
进阶-全选/全不选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本购物车计算商品价格</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="./js/vue.js"></script> </head> <body> <div id="box"> <div class="container-fluid"> <div class="row"> <h2 class="text-center">购物车</h2> <div class="col-md-6 col-md-offset-3"> <table class="table table-condensed text-center"> <tr> <td class="active">图片</td> <td class="success">名称</td> <td class="info">价格</td> <td class="danger">数量</td> <td class="warning">全选/不全选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"> </td> </tr> <tr v-for="good in goods"> <td class="info"><img :src="good.img" alt="" width="40px" height="30px"></td> <td class="danger">{{good.name}}</td> <td class="warning">{{good.price}}</td> <td class="success">{{good.count}}</td> <td class="active"><input type="checkbox" v-model="checkGroup" :value="good" @change="checkOne"></td> </tr> </table> 选中的商品：{{checkGroup}} <br> 总价格：{{sumPrice()}} </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#box', data: { goods: [ {id: 1, name: '汉堡', price: 16, count: 1, img: './img/hanbao.jpg'}, {id: 1, name: '鸡肉卷', price: 10, count: 1, img: './img/jiroujuan.jpg'}, {id: 1, name: '炸鸡', price: 28, count: 1, img: './img/zhaji.jpg'}, {id: 1, name: '啤酒', price: 8, count: 1, img: './img/pijiu.jpg'}, {id: 1, name: '可乐', price: 6, count: 1, img: './img/kele.jpg'},], checkGroup:[], }, methods: { sumPrice(){ let totalPrice = 0 for (i in this.checkGroup){ //迭代循环 totalPrice += this.checkGroup[i].price * this.checkGroup[i].count } return totalPrice }, handleCheckAll(){ // 选中的长度等于所有商品长度 if (this.checkGroup.length == this.goods.length){ this.checkGroup = [] //说明已经全选了，再点击就置空 this.checkAll = false // 全不选按钮就是不选中状态 }else { this.checkGroup = this.goods // 没有全选点击就全选 this.checkAll = true // 全选按钮就是就是选中状态 } }, checkOne(){ // 选中的长度不等于所有商品长度 if (this.checkGroup.length != this.goods.length){ this.checkAll = false // 全选按钮就是不选中状态 }else { this.checkAll = true // 否则全选按钮就是选中状态 } } }, }) </script> </html>
高级-带加减
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本购物车计算商品价格</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="./js/vue.js"></script> </head> <body> <div id="box"> <div class="container-fluid"> <div class="row"> <h2 class="text-center">购物车</h2> <div class="col-md-6 col-md-offset-3"> <table class="table table-condensed text-center"> <tr> <td class="active">图片</td> <td class="success">名称</td> <td class="info">价格</td> <td class="danger">数量</td> <td class="warning">全选/不全选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"> </td> </tr> <tr v-for="good in goods"> <td class="info"><img :src="good.img" alt="" width="40px" height="30px"></td> <td class="danger">{{good.name}}</td> <td class="warning">{{good.price}}</td> <td class="success"> <button @click="good.count++">+</button> {{good.count}} <button @click="subtract(good)">-</button> </td> <td class="active"><input type="checkbox" v-model="checkGroup" :value="good" @change="checkOne"> </td> </tr> </table> 选中的商品：{{checkGroup}} <br> 总价格：{{sumPrice()}} </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#box', data: { goods: [ {id: 1, name: '汉堡', price: 16, count: 1, img: './img/hanbao.jpg'}, {id: 1, name: '鸡肉卷', price: 10, count: 1, img: './img/jiroujuan.jpg'}, {id: 1, name: '炸鸡', price: 28, count: 1, img: './img/zhaji.jpg'}, {id: 1, name: '啤酒', price: 8, count: 1, img: './img/pijiu.jpg'}, {id: 1, name: '可乐', price: 6, count: 1, img: './img/kele.jpg'},], checkGroup: [], }, methods: { sumPrice() { let totalPrice = 0 for (i in this.checkGroup) { //迭代循环 totalPrice += this.checkGroup[i].price * this.checkGroup[i].count } return totalPrice }, handleCheckAll() { // 选中的长度等于所有商品长度 if (this.checkGroup.length == this.goods.length) { this.checkGroup = [] //说明已经全选了，再点击就置空 this.checkAll = false // 全选按钮就是不选中状态 } else { this.checkGroup = this.goods // 没有全选点击就全选 this.checkAll = true // 全选按钮 就是 280就是选中状态 } }, checkOne() { // 选中的长度不等于所有商品长度 if (this.checkGroup.length != this.goods.length) { this.checkAll = false // 全选按钮就是不选中状态 } else { this.checkAll = true // 否则全选按钮就是选中状态 } }, subtract(good){ if (good.count == 1){ good.count == 1 }else { good.count-- } } } }) </script> </html>
v-model 进阶
v-model 之 lazy、number、trim
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="./js/vue.js"></script> </head> <body> <div id="box"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="input-group"> <label>用户名：</label> <input class="form-control" type="text" v-model="name" placeholder="native"> </div> {{name}} <br> <div class="input-group"> <label >等待input框的数据绑定时区焦点之后再变化:</label> <input class="form-control" type="text" v-model.lazy="name1" placeholder="lazy"> </div> <br> {{name1}} <hr> <br> <div class="input-group"> <label >数字开头，只保留数字，后面的字母不保留；字母开头，都保留：</label> <input class="form-control" type="text" v-model.number="name2" placeholder="number"> </div> <br> {{name2}} <hr> <div class="input-group"> <label>去除首尾的空格：</label> <input class="form-control" type="text" v-model.trim="name3" placeholder="trim"> </div> <br> {{name3}} <hr> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#box', data: { name: '', name1: '', name2: '', name3: '', }, }) </script> </html>