目录
一.Vue介绍
1.前端发展史
1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
2.Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
3.单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
4.Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
5.React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
6.移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
7.一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
8.在Vue框架的基础性上 uni-app：一套编码 编到10个平台
9.主流框架：Vue，React ，uni-app JavaScript typescript
2.Vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
使用Vue框架，可以完全在浏览器端渲染页面，服务端只提供数据
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
渐进式框架
可以一点一点地使用它(局部使用)，只用一部分，也可以整个工程都使用它
网站
3.Vue特点
易用
- 通过 HTML、CSS、JavaScript构建应用
灵活
- 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效
- 20kB min+gzip 运行大小
- 超快虚拟 DOM
- 最省心的优化
# Vue与React的区别
React与Vue 都采用虚拟DOM
核心功能都在核心库中，其他类似路由这样的功能则由其他库进行处理
React的生态系统更庞大，由ReactNative来进行混合App开发; Vue更轻量
React由独特的JSX语法; Vue是基于传统的Web计数进行扩展(HTML、CSS、JavaScript)，更容易学习
# Vue与Angular的区别
Angular1和Angular2以后的版本 是完全不同的两个框架； 一般Angular1被称作Angular.js, Angular之后的版本被称作 Angular
Vue与Angular的语法非常相似
Vue没有像Angular一样深入开发，只保证了基本功能。 Angular过于笨重
Vue的运行速度比Angular快得多
Angular的脏检查机制带来诸多性能问题
4.M-V-VM思想
① MVVM介绍
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式
- M
Model：vue对象的data属性里面的数据，这里的数据要显示到页面中，数据层（js） - V
View：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板”视图层 （HTML+CSS） - VM
ViewModel： vue做出来的介于M和V之间的一层，以后不需要手动进行dom操作了对数据监听（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）,也就是vue加入的一层
② MVVM的特性
- 低耦合：
视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变 - 可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View
重用这端视图的逻辑（以此减少代码冗余） - 独立开发：
开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计 - 可测试：界面元素是比较难以测试的，而现在的测试可以
针对ViewModel来编写
5.组件化开发、单页面开发
组件化开发
类似于DTL中的include，每一个组件的内容都可以被替换和复用，有自己独立的html，css，js，以后都是写出一个个组件，组件的组合成页面
单页面开发(spa)
只需要1个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有1个index.html，里面就内容都套在一个div中
6.版本
1.X：使用得较少
2.X：普遍使用(最多)
3.X：公司里新项目会选择
# 语法有差距，但是vue3完全兼容vue2
可以在vue3上写vue2 但是'官方不建议'
7.引入方式
① CDN的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
② 下载后导入
下载后保存为js文件导入：直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件夹>创建vue文件，再粘贴进去
<script src="js/vue.js"></script>
8.选择什么编辑器开发前端
公司中常用：
-
eclipse：免费，my eclipse：收费
-
jetbrains系列：捷克公司，最早出了一款编辑器[IDEA]，是用java开发做java开发的。
- 开发java：捷克做出来IDEA
- 开发Python：捷克做出来pycharm
- 开发go：捷克做出来goland
- 开发php：捷克做出来phpstorm
- 开发前端：捷克做出来webstorm
-
vscode：微软公司，免费开源轻量级，前端人员用的多，可开发python、go..
-
sublime text：前端人员用的多
-
vim：小众的
这里我们用pycharm+Vue插件来讲解专业的前端不会用这种方式
语法不提示颜色问题
settings>>Editor>>Plugins>>下载一个vue插件即可
安装后一定要重启区别仅仅是没有提示而已
1.简单使用
1.新建一个html页面，把下载后的vue导入
<head>
<script src="js/vue.js"></script>
<!-- 或(两种引入方式)-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
2.单页面开发：在body中包一个div，把vue所有东西写在div中，配置项可写在外面
id是# class是.
<body>
<div id="app">
姓名：{{name}}
<br> <!--换行-->
年龄：{{age}}
</div>
<script>
//配置项：k:v传
let vm=new Vue({
el:'#app', //vue管理这个div，以后在div中就可以写vue的语法了
data:{
name:'zy',
age:19
}
})
</script>
</body>
2.双向数据绑定测试
# 在页面console中就可以用vm去修改js中变量的值：
vm._data.name='帅哥' // 可用_data.name
vm.name='帅哥' // 也可直接.name 建议※
3.插值语法
被Vue托管的标签中可以在{{}}中写：变量、js简单表达式、函数、三目运算符，这种写法就叫插值语法
需注意：插值不能写在标签的属性上，只能写在标签内部
<body>
<div id="app">
<h1>插值语法</h1>
<p>姓名：{{name}}</p>
<p>年龄：{{age}}</p>
<p>爱好：{{hobby}}</p>
<p>第一个爱好：{{hobby[0]}}</p>
<p>学校信息：{{info}}</p>
<p>学校名：{{school_info.name}}或{{school_info['name']}}</p>
<p>标签：{{a_url}}</p> <!--默认不会渲染成标签-->
<p>运算：{{10*2+3*4}}</p>
<p>三目运算符【条件?'符合':'不符合'】：{{10>90?'大于':'小于'}}</p>
<p>也可以带函数：后面再讲</p>
</div>
</body>
<script>
var vm = new Vue({
el:'#app', //管理id是app的div
data:{
name:'zy',
age:'18',
hobby:['唱','跳','rap'],
school_info:{name:'家里蹲',phone:110},
a_url:'<a href="http://www.baidu.com">点击进入百度</a>' //默认不会渲染成标签
}
})
</script>
标签问题：默认不会渲染成标签，如果想渲染成标签则需要用到指令！
三.指令
vue提供的都是v-xx 写在标签属性上的统称为指令
假如要用name变量名，那该变量名必须是data定义过的变量
1.文本指令
| 文本指令 | 释义 |
|---|---|
| v-html | 把字符串的内容渲染成标签 |
| v-text | 把字符串内容渲染在标签内 |
| v-show | 放1个布尔值：为true 标签就显示；为false 标签就隐藏 |
| v-if | 放1个布尔值：为true 标签就显示；为false 标签就删除 |
v-html与v-text
用链接举例
<body>
<div id="app">
<p v-html="a_url"></p>
<p v-text="a_url"></p>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',//管理id是app的div
data:{
a_url:'<a href="http://www.baidu.com">点击进入百度</a>'
}
})
</script>
其实v-text就是把<>转成转义字符：<是<,>是>
v-show与v-if(显示/隐藏 与 显示/删除)
v-show与 v-if的区别：
v-show：true或false标签都在，只是加了display: none隐藏了
v-if：直接操作DOM，显示/删除 标签
用图片举例
v-show:显示/隐藏内容
<body>
<div id="app">
<h1>v-show:显示/隐藏内容</h1>
<img v-show="img" src="图片地址" alt="" width="300px">
</div>
</body>
<script>
var vm = new Vue({
el:'#app', //管理id是app的div
data:{
img:true //true显示 false隐藏
}
})
</script>
v-if：显示/删除内容
<body>
<div id="app">
<h1>v-if:显示/删除</h1>
<img v-if="img" src="图片地址" alt="" width="300px">
</div>
</body>
<script>
var vm = new Vue({
el:'#app', //管理id是app的div
data:{
img:true //true显示 false删除
}
})
</script>
2.事件指令
事件指令是：点击事件、双击事件、滑动事件..（用的最多的是点击事件click）
| 事件指令 | 释义 |
|---|---|
| v-on | 触发事件(不推荐)如：v-on:事件名="函数名" |
| @ | 简写(推荐)如：@事件名="函数名" |
@事件名='函数名'
举例：给图片添加一个按钮，点击后可显示或隐藏图片
给按钮添加点击事件，点击事件函数必须写在methods中
<body>
<div id="app">
<button @click="look">点我看图片</button>
<div v-show="show"> <!--让图片先不显示，等添加点击事件-->
<img src="图片地址" alt="" height="200px" width="200px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app', //管理id是app的div
data:{
show:true
},
// 函数都要放在methods配置项中，当点击按钮就会触发look函数的执行
methods:{
'look':function (){ //匿名函数
//this就是当前vue实例：vm实例
this.show=!this.show //!this.show(取反)：如果show是true就是false
}
}
})
</script>
以上点击显示或不显示图片举例需了解：
1.给按钮中的点击事件：
<button @事件名="函数名">是简写方式，以后都要用这种
2.点击事件函数必须写在methods中
3.this就是当前vue实例：vm实例
4.this.show=!this.showvm.show=!vm.show 取反(如果show是turn就是false)
3.属性指令
标签上的属性可以绑定变量，以后变量变化，标签上的属性也跟着变化
1)写在标签上的，如：name、class、id、src..都是属性
2)用法：
v-bind:属性名='变量'3)可简写：
:属性名='变量'
| 属性指令 | 释义 |
|---|---|
| v-bind | 直接写js的变量或语法(不推荐) |
| : | 简写(以后都用该方式) |
:属性名='变量'
<body>
<div id="app">
<a :href="url">点击看百度</a> <!--简写方式，建议使用【:属性="变量名"】-->
</div>
</body>
<script>
var vm = new Vue({
el:'#app',//管理id是app的div
data:{
url:'http://www.baidu.com'
}
})
</script>
以上使用一个链接属性去举例子，下面再用图片链接+长+宽属性来举例子：(其实都一样)
<body>
<div id="app">
<img :src="photo" alt="" :height="h" :width="w">
</div>
</body>
<script>
var vm = new Vue({
el:'#app', //管理id是app的div
data:{
photo:'图片地址',
h:'200px',
w:'200px'
}
})
</script>
总结：属性指令指的是所有属性，只要是属性都可以用一个变量去绑定值
4.案例
1)点击按钮随机切换图片
<body>
<div id="app">
<button @click="look">点击随机切换图片</button>
<div>
<img :src="url" alt="" height="200px" width="200px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app', //管理id是app的div
data:{
url:'图片地址',
//定义一个数组，里面放多张图片，当点击按钮时从里面随机出一张图片
url_list:[
'图片地址',
'图片地址',
'图片地址',
'图片地址',
]
},
methods:{
'look':function (){
//取一个0~N(取整(列表数据个数)之间的随机数
var i =Math.round(Math.random()*(this.url_list.length-1))
this.url=this.url_list[i]
}
}
})
</script>
2)点击开始后每隔1s换一个图片
1.需setInterval(函数, 毫秒)计时器 每n毫秒后执行一次代码
2.this指向问题：如果函数中再套函数，内部不是箭头函数this指向会不对，需外部var _this = this 重新定义以下，以后用_this就代表vm实例
3.学会es6对象写法，以后基本都是该形式
<body>
<div id="app">
<button @click="look">点击随机切换图片</button>
<div>
<img :src="url" alt="" height="200px" width="200px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app', //管理id是app的div
data:{
url:'图片地址',
//定义一个数组，里面放多张图片，当点击按钮时从里面随机出一张图片
url_list:[
'图片地址',
'图片地址',
'图片地址',
'图片地址',
]
},
methods:{
'look': function () {
var _this = this
// 计时器
setInterval(function () {
//查看下_this和this现在分别指向谁
console.log(_this) //vm实例
console.log(this) //Window
//取一个0~N(取整(列表数据个数)之间的随机数
var i = Math.round(Math.random() * (_this.url_list.length - 1))
_this.url = _this.url_list[i]
},1000)
}
}
})
</script>
简写点击事件：es6的对象写法
<!--用了es6对象写法 代码还非常精简-->
<script>
methods: {
look() {
var _this = this
setInterval(function () {
var i = Math.round(Math.random() * (_this.url_list.length - 1))
_this.url = _this.url_list[i]
}, 1000)
}
}
</script>
了解：简写es6对象写法
<script>
var name = 'zy'
var hobby = ['篮球', '足球']
var f = function () {
console.log('匿名函数')
}
var d = {name, age: 18, hobby, f} //es6可以直接写变量名、函数名(里面对应着值)
console.log(d)
</script>
3)点击开始随机切换图片,点击图片停止并弹出地址
四.class和style
class和style本身都是属性，但是较为特殊就单独拎出来讲
数据的绑定
# class：推荐用【数组】
:class='变量'
变量可以是字符串、数组(列表)、对象(字典)
# style：推荐用【对象】
:style='变量'
变量可以是字符串、数组(列表)、对象(字典)
class
<head>
<style>
.font {
font-size: 60px;
}
.font-color {
color: #4cae4c;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>class</h1>
<div :class="class_str">我是class的字符串形式</div>
<div :class="class_obj">我是class的对象(字典)形式</div>
<div :class="class_list">我是class的数组(列表)形式</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app', //管理id是app的div
data: {
class_str:'font',
//font-color因为中间有-必须要用引号引起来
class_obj:{font:true,red:false,'font-color':true},
class_list:['font','red','font-color'] // 推荐使用数组形式
},
})
</script>
# 字符串修改
vm.class_str='red' //把字符串里的变量改为一个
vm.class_str='red font' //把字符串里的变量改为两个
# 对象修改
vm.class_obj.red=true //把对象里的变量改为true
vm.class_obj['red']=false //把对象里的变量改为false
# 数组修改 （数组还有其他额外方法）
vm.class_list.pop() //删除尾部
vm.class_list.push('font-color') //尾部新增
修改
style
<body>
<div id="app">
<h1>style</h1>
<div :style="style_str">我是style的字符串形式</div>
<div :style="style_list">我是style的数组(列表)形式</div>
<div :style="style_obj">我是style的对象(字典)形式</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app', //管理id是app的div
data: {
style_str:'font-size:60px',
// style_list:[{'font-size':'60px'},{color:'red'}],
//可以用驼峰式就不用加双引号
style_list:[{fontSize:'60px'},{color:'red'}],
style_obj:{fontSize:'60px',color:'red'}//推荐使用
},
})
</script>
修改
# 字符串修改
vm.style_str='color:red' //把字符串里的变量改为一个
vm.style_str='color:red;font-size:60px' //把字符串里的变量改为两个【注意分号分隔】
# 数组修改 （数组还有其他额外方法）
vm.style_list[0].fontSize='40px' //把索引0的属性修改
vm.style_list.pop() //删除尾部
# 对象修改
vm.style_obj.color='blue' //修改对象里的属性值
vm.style_obj['color']='red' //修改对象里的属性值
五.条件渲染
| 指令 | 释义 |
|---|---|
| v-if | 相当于：if |
| v-else-if | 相当于：else if |
| v-else | 相当于：else |
v-if=条件放在标签上，如果条件成立该标签就显示，如果条件不成立该标签就不显示
v-else-if=条件放在标签上，如果条件成立该标签就显示，如果条件不成立该标签就不显示
v-else放在标签上，上面条件都不成立显示这个标签
举例：成绩大于等于90为优秀，大于等于60及格，小于60不及格
<body>
<div id="app">
<h1>条件渲染，根据分数显示文字</h1>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=60&&score<90">及格</div>
<div v-else>不及格</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app', //管理id是app的div
data: {
score: 99
},
})
</script>
六.列表渲染
想让哪个标签循环 就把v-for放在哪个标签上
| 指令 | 释义 |
|---|---|
| v-for | 放在标签上可循环显示多个此标签 |
1.举例：点击按钮显示购物车，不点击就不显示
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<button @click="clinkshopcar" class="btn btn-danger">[显示/关闭]购物车</button>
</div>
<div v-if="show">
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app', //管理id是app的div
data: {
show: false,
good_list: [
{id: 1, name: '牛肉', price: '200元'},
{id: 2, name: '鸡肉', price: '100元'},
{id: 3, name: '羊肉', price: '300元'},
]
},
methods: {
clinkshopcar() {
this.show = !this.show
},
}
})
</script>
2.v-for可以循环的变量
字符串、数字、数组(列表)、对象(字典)
字符串与数字
<body>
<div id="app">
<!--字符串-->
<h3>循环字符串(空格也会被循环但是div不显示)</h3>
<div v-for="item in s1">{{item}}</div>
<h3>循环字符串(循环并判断如果是空格就换行)</h3>
<div v-for="item in s1">
<p v-if="item!=' '">{{item}}</p>
<br v-else>
</div>
<h3>循环字符串(带索引)</h3>
<div v-for="(item,index) in s1">索引:{{index}} 字符:{{item}}</div>
<!--数字-->
<h3>循环数字(5就是1~5)</h3>
<div v-for="item in 5">{{item}}</div>
<h3>循环数字带索引</h3>
<div v-for="(item,index) in 5">索引:{{index}} 数字:{{item}}</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
s1:'hi dog'
},
})
</script>
数组与对象
<body>
<div id="app">
<!--数组-->
<h3>循环数组</h3>
<div v-for="item in l1">{{item}}</div>
<h3>循环数组带索引</h3>
<div v-for="(item,index) in l1">索引:{{index}} 数组:{{item}}</div>
<!--对象-->
<h3>循环对象(value)</h3>
<div v-for="item in d1">{{item}}</div>
<h3>循环对象(key+value)</h3>
<div v-for="(item,key) in d1">key:{{key}} value:{{item}}</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
l1: [1, 2, 3],
d1: {name: 'zy', age: 18},
},
})
</script>
补充：js的循环方式
1.js基于索引的循环
python只有基于迭代的循环
<script>
var a = [1, 2, 3]
//a.length 长度
for (i = 0; i < a.length; i++) {
//基于索引循环打印数组中的值
console.log(a[i])
}
</script>
2.js基于迭代的循环
<script>
# 在js中如果用in拿到的只是数组中的索引值
//var a = [1, 2, 3]
//for (i in a) {
//console.log(i)
————————————————
var a = [1, 2, 3]
for (i in a) {
//其实还是基于索引取值
console.log(a[i])
}
</script>
3.es6语法的of循环
<script>
var a = [1, 2, 3]
for (i of a) {
console.log(i)
}
</script>
4.额外：数组的独有方法：forEach循环
<script>
var a = [1, 2, 3]
a.forEach(function(item){
console.log(item)
})
</script>
5.额外：jq 的循环 循环数组，对象
<script>
var a = [1, 2, 3]
//可打印出索引和值 第一个索引，第二个值
$.each(a,function (index,item){
console.log('索引:',index,'值:',item)
})
</script>
4.key值的解释
vue的v-for写在标签上，在标签上加一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟dom的替换，从而提高循环效率，且key值必须唯一
假如要给14中间插一个8进去，如果不加key就会把14重新写一遍中间加上8。如果加了key那么1~4不动，只会在中间插一个8。主要用来提高循环效率。其实对后端来说感受不出来快慢。对专业的前端来说都会写！
key可以理解为是给每一个值加一个唯一标号
举例：
<script>
//key用属性指令绑定
<div v-for="item in 8" :key="item">{{item}}</div>
</script>
5.数组、对象的检测与更新
当给一个对象新增一个key和value，会发现页面没有变化！这是因为vm这一层会检测一些方法，只要检测到变动就会更新，但是有些方法检测不到！！！
所以当给对象数据变动但页面没动就用： Vue.set(this.info, 'hobby', '篮球') 设置即可有变化
数组数据变动但页面没动同样也用：Vue.set(this.要动的数组,'数组索引','数组值')
<body>
<div>
<div id="app">
<h1>循环对象</h1>
<div v-for="(value,key) in info">
<h3>key值是：{{key}}</h3>
<h2>value是：{{value}}</h2>
<hr>
</div>
<button @click="add">点我，加数据</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
info: {name: 'zy', age: '18'},
},
methods: {
add() {
// 当k存在修改时：页面上会马上发生变化
// this.info['name'] = '帅哥'
// 当k不存在新增时：页面不会发生变化但是有值
// this.info['hobby'] = '唱'
// 建议用法：
Vue.set(this.info,'hobby','篮球')
}
}
})
可以检测到变动的数组操作
push：#最后位置添加
pop：#最后位置删除
shift：#第一个位置删除
unshift：#第一个位置添加
splice：#切片
sort：#排序
reverse：#反转
检测不到变动的数据操作
filter()：#过滤
concat()：#追加另一个数组
slice()：
map()：
# 原因：作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
七.input事件
# input 的事件：
click #点击输入框时，触发的事件
input #当输入框进行输入时，触发的事件
change #当里面的值发生改变时，触发的事件
blur #当输入框失去焦点时，触发的事件
focus #当获得焦点时，触发事件
<body>
<div id="app">
<h1>click点击输入框触发</h1>
<input type="text" @click="handleClick">
<h1>blur输入框失去焦点触发</h1>
<input type="text" @blur="handleBlur">
<h1>input输入框输入时触发</h1>
<input type="text" @input="handleInput">
<h1>change输入框的内容改变时触发</h1>
<input type="text" @change="handleChange">
<h1>focus输入框获得焦点触发</h1>
<input type="text" @focus="handleFocus">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods:{
handleClick(){
alert('点击了输入框')
},
handleBlur(){
alert('输入框失去了焦点')
},
handleInput(){
alert('输入框输入了内容')
},
handleChange(){
alert('输入框中内容改变了')
},
handleFocus(){
alert('输入框获得了焦点')
}
}
})
</script>
八.v-mode数据的双向绑定
要求：input框中输入值后要被js变量拿到
如果使用 :value='变量' 这种形式：输入框变化，变量不会变
如果使用v-model做双向数据绑定：输入框变化，变量跟着变
<body>
<div id="app">
<h1>数据的单向绑定</h1>
<input type="text" :value="name">您输入的内容是：{{name}}
<h1>数据的双向绑定</h1>
<input type="text" v-model="name">您输入的内容是：{{name}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name:''
},
})
</script>
九.事件处理
1.过滤案例
扩展知识
1)数组的过滤方法filter
每次从数组中取出一个值给item执行下面的代码直到循环结束，返回true/false决定数据要或不要
<script>
var l1=[1,2,3]
var newl1 = l1.filter(function(item){
return false // true表示这个值保留,false表示这个值不要
})
console.log(newl1)
</script>
2)字符串的indexOf方法
判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回-1
<script>
var s1='xyz'
var s2='z'
var i = s1.indexOf(s2)
console.log(i)
</script>
3)es6 的箭头函数写法
当函数中套函数时this指向会有问题，如果用箭头函数this指向就不会出问题因为：箭头函数没有自己的this，用的都是上一级的this
<script>
var f = function () {
console.log('函数')
}
//把上面的变成箭头函数
var f = () => {
console.log('函数')
}
——————————————————
// 1.无参数，无返回值的箭头函数
var f = () => {
console.log('函数')
}
f()
// 2.有1个参数，没有返回值的箭头函数【括号可以去掉,也可以加】
var f = item => {
console.log(item)
}
f('zy')
// 3.有多个参数，没有返回值的箭头函数【括号不能去掉】
var f = (item, key) => {
console.log(item)
}
f('zy','18')
// 4.有1个参数，1个返回值
# 第一个item是参数 第二个item是返回值
var f = item => item
var res = f('zy')
console.log(res)
</script>
案例
类似搜索引擎，输入a就把a相关的内容显示出来，输入ab就把ab相关的内容显示出来
<body>
<div id="app">
<h1>过滤案例</h1>
<input type="text" placeholder="请输入要搜索的内容" v-model="myText" @input="handleInput">
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText: '',
dataList: ['a', 'abc', 'aaa', 'jdhei', 'hslaa', 'sjoqjd', 'sqqsnz', 'qwjwo'],
newDataList: ['a', 'abc', 'aaa', 'jdhei', 'hslaa', 'sjoqjd', 'sqqsnz', 'qwjwo'],
},
methods: {
handleInput() {
var _this = this
this.newDataList = this.dataList.filter(function (item) {
//判断item在不在myText中(在会返回索引值，不在就返回-1)
// if (item.indexOf(_this.myText) >= 0) {
// return true
// } else {
// return false
// }
//表达式简写：
return item.indexOf(_this.myText) >= 0
})
}
}
})
</script>
但是以上methods代码中还可以再优化：箭头函数
<body>
<div id="app">
<h1>过滤案例</h1>
<input type="text" placeholder="请输入要搜索的内容" v-model="myText" @input="handleInput">
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
myText: '',
dataList: ['a', 'abc', 'aaa', 'jdhei', 'hslaa', 'sjoqjd', 'sqqsnz', 'qwjwo'],
newDataList: ['a', 'abc', 'aaa', 'jdhei', 'hslaa', 'sjoqjd', 'sqqsnz', 'qwjwo'],
},
methods: {
handleInput() {
// 使用箭头函数写法
// this.newDataList = this.dataList.filter((item) => {
// return item.indexOf(this.myText) >= 0
// 箭头函数继续优化：一个参数一个返回值
this.newDataList = this.dataList.filter( item => item.indexOf(this.myText) >= 0)
}
}
})
</script>
2.事件修饰符(了解)
用来给事件修饰的@click.stop
| 事件修饰符 | 释义 |
|---|---|
| .stop | 只处理自己的事件，子标签冒泡的事件不处理（阻止事件冒泡） |
| .self | 只处理自己的事件，子标签冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
事件冒泡
当父标签里有一个子标签时，两个标签都加了事件，如果点击子标签会触发子标签的事件，同时还会连带触发父标签上的事件
<body>
<div id="app">
<ul @click="handleUl">父标签
<li @click="handleLi">子标签</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods:{
handleLi(){
console.log('点击了li')
},
handleUl(){
console.log('点击了ul')
}
}
})
</script>
stop
<li @click.stop="handleLi">子标签</li>
上述代码中给子标签的点击事件后加stop即可阻止事件冒泡：
点击子标签时触发事件不会再连带触发父标签的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<h1>事件修饰符stop，子控件不再冒泡给父控件</h1>
<ul @click='handleUl'>
<li @click.stop="handleLi">第一</li>
<li>第二</li>
</ul>
<h1>事件修饰符self:只处理自己的事件，子控件的冒泡，不处理</h1>
<ul @click.self='handleUl'>
<li @click="handleLi">第一</li>
<li>第二</li>
</ul>
<h1>prevent阻止a的跳转</h1>
<a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
<h1>once 只响应一次</h1>
<button @click.once="handleClick">点我抽奖</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {},
methods: {
handleLi() {
console.log('li被点击了')
},
handleUl() {
console.log('ul被点击了')
},
handleA() {
console.log('a标签被点了')
// 阻止a的跳转，自己决定要不要跳
// 手动指定跳
location.href = 'http://www.cnblogs.com'
},
handleClick() {
console.log('我被点了')
}
}
})
</script>
</html>
3.按键修饰符
# 按键事件：按了键盘某个键，就会触发函数的执行
@keyup="handleKeyUp"
# 按键修饰符：只有某个按键被按下才触发
@keyup.enter
@keyup.13
十.表单控制
# input ----》变量类型是什么？
text 类型
radio：单选
checkbox：单选和多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<p>性别：
男：<input type="radio" v-model="gender" value="1">
女：<input type="radio" v-model="gender" value="2">
</p>
<p>记住密码：<input type="checkbox" v-model="remember"></p>
<p>爱好：
篮球：<input type="checkbox" v-model="hobby" value="篮球">
足球：<input type="checkbox" v-model="hobby" value="足球">
排球：<input type="checkbox" v-model="hobby" value="排球">
</p>
<button @click="handleClick">登录</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
username: '',
password: '',
gender: '', // radio单选，多个radio绑定同一个变量，选中某个，就对应value值
remember: false, // checkbox 单选是true或false
hobby: [] // checkbox 多选是数组类型，必须一开始定义就是数组，多个checkbox绑定一个变量
},
methods: {
handleClick() {
console.log(this.username, this.password, this.gender, this.remember, this.hobby)
}
}
})
</script>
</html>