Vue入门及介绍，基础使用
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 (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
渐进式框架
可以一点一点地使用它，只用一部分，也可以整个项目都使用它，就是一个前端项目
网站
官网：https://cn.vuejs.org/
文档：https://cn.vuejs.org/v2/guide/
版本
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>
View Code
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>
View Code
事件处理
事件 | 释义 |
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>
View Code
事件修饰符
事件修饰符 | 释义 |
| .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
lazy：等待input框的数据绑定时区焦点之后再变化
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>
以上是 Vue入门及介绍，基础使用 的全部内容， 来源链接： utcz.com/z/375039.html
