Vue入门及介绍，基础使用
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>
