什么是Vue
前端框架的三大马车(按时间顺序):
- angular 谷歌公司 m(数据) v(视图) c(控制器) 双向数据绑定
- react facebook 视图层的框架view 虚拟dom
- vue 尤玉溪 双向数据绑定+虚拟dom 是一套用于构建用户界面的渐进式框架
入门难度最低
为什么要学习Vue
高效
- 运行效率高 采用虚拟dom 减少真实dom的操作使项目的运行效率大大提高
- 开发效率高 采用了组件化开发
将开发者的精力从dom操作解放出来,转移到数据操作上
- dom操作极其影响效率,是制约效率的关键,要减少dom
修改内存中的数据(变量)消耗的资源远远小于dom操作
虚拟dom 就是一个内存中的一个对象 该对象有一个特点和dom有相同的结构
爱上Vue
一旦熟悉,就情不自禁的用Vue,会抛弃原来二阶段的写法(直接操作dom)
Vue的实例化
①
/*1、下载引入
2、找到一个dom元素 这个dom元素要被vue控制
3、在js中实例化Vue*/
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1vue的实例化</title>
<script src='../vue.js'></script>
</head>
<body>
<!-- 和实例绑定了 就会用vue的语法进行处理 -->
<div id='xixi'>
{{name}}
{{data}}
</div>
<!-- 没有被实例绑定 和原始的页面没有区别 -->
<div id='hehe'>
{{name}}
</div>
<script>
// 创建一个vue的实例
let vm =new Vue({
el:"#xixi", // 将vue的实例和dom中的某一个元素进行绑定 绑定的元素以及子节点都会被实例进行处理
data:{ // data里的数据直接可以通过插值法 {{表达式变量}} 进行渲染
name:'你好世界'
}
})
</script>
</body>
②
<body>
<!--简单来说,就是两个大括号,中间放表达式,就叫“Mustache插值法”-->
<!-- 和实例绑定了 就会用vue的语法进行处理 -->
<div id='xixi'>
{{name}}
{{data}}
</div>
<!-- 没有被实例绑定 和原始的页面没有区别 -->
<hr>
<div id='hehe'>
{{name}}
</div>
<script>
// 创建一个vue的实例
let vm =new Vue({
el:"#xixi", // 将vue的实例和dom中的某一个元素进行绑定 绑定的元素以及子节点都会被实例进行处理
data:{ // data里的数据直接可以通过插值法 {{表达式变量}} 进行渲染
name:'你好世界'
}
})
let vm2= new Vue({
el:'#hehe',
data:{
name:'韩梅梅'
}
})
// 在一个页面可以实例化多个vue实例 每一个实例绑定自己的元素 数据不通用
</script>
</body>
数据绑定
<body>
<div id="app">
{{text}}
<hr>
{{arr}}
<hr>
{{obj}}
<hr>
{{num}}
<hr>
{{null?'真的':'假的'}}
<hr>
{{undef?'真的':'假的'}}
<hr>
{{boolean}}
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
boolean:false,
text:'这里是文本',
arr:['呵呵','嘻嘻'],
obj:{us:123,ps:456},
num:123,
null:null,
undef:undefined
}
})
// 将data中的数据在视图中使用(view) 这个过程叫数据绑定 方向 data->view
// 正常的数据类型都可以绑定并显示 特殊的 null undefined 只能绑定不能显示
// {{}} 插值法内部 放的是变量和表达式
</script>
</body>
指令 directive
指令后面跟的都是表达式或变量
- 内置指令 vue内部提供的直接使用
- 自定义指令 实现自定义某些功能的指令
条件渲染
都可以控制一个元素的显示或者隐藏
v-show 通过样式 display:none
v-if 直接控制div元素有还是没有
(v-else v-elseif)
v-if如果为真,则不渲染v-else
事件绑定
使用vue中的事件
v-on:事件名(和原生js的事件名一致):事件处理函数
@事件名:事件处理函数
事件的处理函数写在实例的配置项 motheds
处理函数的默认参数是事件对象
如果需要传递其他参数 事件对象需要通过’$event 手动传递
属性绑定
v-bind
一般元素的属性都是跟固定的值
而属性绑定可以实现 属性的后方跟变量或者表达式
v-bind:要绑定的属性名
简写:“:要绑定的属性名”
eg:
<img v-bind:src=""> 或者 <img :src="">
列表渲染
v-for 数组 表格 数字 字符串 都可以用v-for来进行循环
绑定一个标签 循环一个数据源
(循环数组)
<li v-for = '循环数据的每一项 in/of 要循环的数据'></li>
<li v-for = '(循环数据的每一项,每一项的下标) in/of 要循环的数据'></li>
(循环对象)
<li v-for = '(对象value,对象里的key,下标) in 要循环的对象'>{{key}}:{{value}}</li>
双向数据绑定
v-model将input框的value和data里的数据进行绑定 任何一方发生改变另一方都会跟着改变 相当于 事件绑定和属性绑定的综合
可以绑定一个表单元素的value 修改表单元素的
data里的数据也会发生改变
v-model 所有的表单元素都可以用 组件也可以用
v-model 可以说就是给它绑定了一个事件,还绑定了一个值
使用vue做数据与页面之间处理时的思路:
- 寻找数据与页面的关系
- 通过指令将数据与页面进行绑定
- 更改数据 页面会自动变化
①
<style>
.test{
width: 100px;
height: 100px;
background: lightgreen;
}
.test2{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div id = 'app'>
{{name}}
<div v-if='show' class="test">
</div>
<div v-else class ='test2'>
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
name:'韩梅梅',
show:false
}
})
/*
v-if 是一个指令 条件渲染 控制一个元素的渲染不渲染
<目标元素 v-if='变量或者表达式'></目标元素>
指令后面跟是变量或者表达式
官方文档 文档查找 v-elseif 的用法
*/
</script>
</body>
②
<script src='../vue.js'></script>
<style>
.test{
width: 100px;
height: 100px;
background: lightgreen;
}
.test2{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div id = 'app'>
<div v-show ='show' class="test">
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
show:false
}
})
/*
v-show 可以控制元素的显示隐藏或者通过display none 不管显示还是隐藏元素都是存在
v-if 控制元素的渲染 v-if为假 该元素都不会创建
*/
</script>
</body>
事件绑定
使用vue中的事件
v-on:事件名(和原生js的事件名一致):事件的处理函数
@事件名:事件处理函数
事件的处理函数写在实例的配置项 motheds
处理函数的默认参数是事件对象
如果需要传递其他参数 事件对象需要通过
`$event 手动传递
<script src='../vue.js'></script>
<style>
.test{
width: 100px;
height: 100px;
background: lightgreen;
}
.test2{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div id = 'app'>
<!-- <button οnclick='fun()'>toggle</button> -->
<button v-on:click='toggle(1,2,$event)'>toggle</button>
<button @click = 'toggle2'>toggle2</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
show:false
},
methods: { //vue中写事件函数的地方
toggle:(num1,num2,e)=>{
console.log('点到我了',num1,num2,e)
},
toggle2(){
console.log('点到第二个了')
}
},
})
/*
固定写法(规范):
v-on:事件名='事件处理函数' 事件名和原生js一样
onclick -> v-on:click
onblur -> v-on:blur
事件处理函数一定要写在实例的 methods内部
默认参数(啥参数都不传都有的参数)是事件对象
如果有其他参数 事件对象需要通过 $event 手动传递 只要碰到$相关的,都是vue内置的
简写方式:
v-on:click === @click
*/
</script>
</body>
数据的响应式
<script src='../vue.js'></script>
<style>
.test{
width: 100px;
height: 100px;
background: lightgreen;
}
.test2{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div id = 'app'>
{{num}}
<button v-on:click='add'>add</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
num:1
},
methods: {
add(){
console.log(this)//指代当前vue的实例对象
this.num++
}
},
})
/*
数据的响应式
数据变 页面自动变 不需要开发者操作dom
vue特点之一:将开发者的精力从dom操作解放 转移到数据操作上
*/
</script>
</body>
数据的响应式demo
<script src='../vue.js'></script>
<style>
.test{
width: 100px;
height: 100px;
background: lightgreen;
}
.test2{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div id = 'app'>
<div v-if='show' class='test'></div>
<button @click='toggle'>toggle</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
show:true
},
methods: {
toggle(){
this.show=!this.show
}
}
})
/*(动的仅仅只是数据,实现效果点按钮就能控制div显示隐藏)
用一个按钮控制div的显示隐藏
1.先让div显示隐藏
2.找到控制div显示隐藏的数据
3.用按钮去修改他
*/
</script>
</body>
属性绑定 v-bind
v-bind
元素的属性都是跟的固定的值
属性绑定可以实现 属性的后方跟变量或者表达式
v-bind:要绑定的属性名 <img v-bind:src=''>
:要绑定的属性名 <img :src=''>
<script src='../vue.js'></script>
<style>
.test{
width: 100px;
height: 100px;
background: lightgreen;
}
.test2{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div id = 'app'>
<img src="url" alt="">
<img v-bind:src="url" alt="">
<img :src="url" alt="">
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
url:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2164734927,1367682520&fm=26&gp=0.jpg'
}
})
/*
属性绑定 v-bind
<img src=''>
<div width height class id >
src width height class id .....都叫属性
属性后面跟的是固定字符串
作用:属性绑定可以让属性后面跟变量或者表达式
简写 v-bind:src === :src
*/
</script>
</body>
属性绑定案例
<script src='../vue.js'></script>
<style>
.test{
width: 100px;
height: 100px;
background: lightgreen;
}
.test2{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div id = 'app'>
<div v-bind:class='toggle?"test":"test2"'></div>
<button @click='change'>toggle</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
toggle:false
},
methods: {
change(){
this.toggle=!this.toggle
}
},
})
/*
通过一个按钮控制div颜色的改变
1.div 能改变颜色
2.找一个数据和改变颜色做关联
3.按钮控制这个数据的修改
*/
</script>
</body>
列表渲染
v-for
<title>属性绑定v-bind</title>
<script src='../vue.js'></script>
<style>
</style>
</head>
<body>
<div id = 'app'>
<ul>
<!-- 循环数组 -->
<!-- <li v-for = 'item in lists'>{{item}}</li> -->
<!-- <li v-for = '(item,index) in lists'>{{item}}{{index}}</li> -->
<!-- <li v-for = '(hehe,xixi) in lists'>{{hehe}}{{xixi}}</li> -->
<!-- 循环对象 -->
<!-- <li v-for="(value,key,index) in obj">{{key}}:{{value}}-{{index}}</li> -->
<!-- <li v-for='item in num'>{{item}}</li> -->
<p v-for='item in string'> {{item}}</p>
</ul>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
lists:['午夜凶铃','咒怨','红色高跟鞋','真实魔鬼游戏','潜伏'],
obj:{us:'王一',ps:'12345',sex:'未知'},
num:100,
string:'周五晚上12点我们看恐怖片准备好小零食'
},
})
/*
v-for 绑定一个标签 循环一个数据源
<li v-for ='循环数据的每一项 in/of 要循环的数据'></li>
<li v-for ='(循环数据的每一项,每一项的下标)in/of 要循环的数据'></li>
<li v-for="(对象value,对象里的key,下标) in 要循环的对象">{{key}}:{{value}}-{{index}}</li>
*/
</script>
</body>
用 vue实现tab选项卡
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 400px;
height: 600px;
border: 1px solid red;
}
.nav {
list-style: none;
height: 80px;
width: 400px;
background: skyblue;
font-size: 0px;
}
.nav li{
display: inline-block;
height: 80px;
width: 100px;
border: 1px solid green;
box-sizing: border-box;
font-size: 16px;
}
.sel{
background: yellowgreen;
}
.content div{
width: 400px;
height: 420px;
background: pink;
}
</style>
</head>
<body>
<div id = 'app'>
<div class='box'>
<ul class="nav">
<!-- v -->
<li
v-bind:class ='item===seleted?"sel":""'
v-for='item in list'
v-on:click='change(item)'
>{{item}}</li>
</ul>
<div class='content'>
<div
v-show='item===seleted?true:false'
v-for = 'item in list'>
{{item}}
</div>
</div>
</div>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
list:['爱情','动作','恐怖','科幻'],
seleted:'科幻' //默认选中的一项
},
methods: {
change(item){
console.log('点到了:'+item)
this.seleted = item
}
},
})
/*
用 vue实现tab选项卡
1. 渲染界面
2. 点击切换tab
3. 导航条高亮
4. 内容要切换
a. 先把静态处理出来
b. 哪些元素可以用指令
*/
</script>
</body>
todolist 能添加代办事项
<script src='../vue.js'></script>
<style>
.green{
background: green;
}
.red{
background: red;
}
</style>
</head>
<body>
<div id = 'app'>
<input type="text" placeholder="请输入要做啥子类"
v-model='inputValue'
>
<!-- v-modol将input框的value 和 data里的数据进行绑定 -->
<button @click='add'>添加</button>
<ul>
<li v-for = '(item,index) in list'
v-bind:class = 'item.state?"green":"red"'
>
{{item.event}}
<button @click='del(index)'>del</button>
<!-- 已经完成显示 已完成文字 没完成显示按钮 -->
<span v-if='item.state'>已完成</span>
<button v-else @click='finish(index)'>待完成</button>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
list:[{event:'今晚代码到天明',state:false},
{event:'明晚代码到天明',state:true},
{event:'明晚恐怖片到天明',state:false}],
inputValue:'呵呵哒'
},
methods: {
add(){
console.log(this.inputValue)
// 将用户输入的信息添加到list数据里 页面会自动发生改变
this.list.push({event:this.inputValue,state:false})
},
del(index){
console.log('要删除的下标',index)
// 数组里删除点击的数据
this.list.splice(index,1)
},
finish(index){
// 将点击项的状态值改成true 就是完成
this.list[index].state=true
}
},
})
/*
能够添加代办实现 v
显示代待办事项 v
删除代办事项 v
完成代办事项 v
1.寻找数据和页面的关系
2.通过指令将数据和页面绑定
3.更改数据 页面会自动变化
*/
</script>
</body>
双向数据绑定原理
<body>
<div id = 'app'>
<input type="text" @input='input' :value='value'>
<p>
{{value}}
</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
value:'你好'
},
methods: {
input(e){
console.log(e.target.value)
this.value=e.target.value
}
},
})
/*
在input 框输入的内容可以在p元素显示出来
*/
</script>
</body>
双向数据绑定实现 v-model
<body>
<div id = 'app'>
<input type="text" v-model='hehe'>
{{hehe}}
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
hehe:'你好'
},
})
/*
v-model 叫双向数据绑定 相当于 事件绑定和属性绑定的综合
可以绑定一个表单元素的value 修改表单元素的
data里的数据也会发生改变
v-model
所有的表单元素都能用
组件也可用
*/
</script>
</body>