VUE2.0
2.1入门
1 什么是vue?
- 构建用户界面
- 用vue往html页面中填充数据,非常方便
- 框架
- 框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能
- 要学习vue,就是在学习vue框架中规定的用法
- vue的指令、组件(是对UI结构的复用)、路由、Vuex
- 只有上面罗列的内容掌握以后,才有开发vue项目的能力
2 vue特性
- 数据驱动视图
- 双向数据绑定
注意:这两个特性的底层原理是MVVM
2.1数据驱动视图
- 数据的变化会驱动视图自动更新
- 好处:程序员只管吧数据维护好,那么页面结构会被vue自动渲染出来
- 数据的变化总是单向的,由数据到页面
2.2 双向数据绑定
在网页中,form表单负责采集数据,Ajax负责提交数据
- js数据的变化,会自动渲染到界面上
- 页面上表单菜鸡的数据发生变化的时候,会被vue自动获取到,并更新到js数据中
3 MVVM
2.2 基本使用
<html>
<body>
<!-- 希望Vue能够控制下面的这个div,帮我们在把数据填充到div内部 -->
<div id="app">{{ msg }}</div>
<!-- 1.CDN加载Vue库,在window全局就有了Vue这个构造函数 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 2.创建Vue的实例对象 -->
<script>
const vm=new Vue({
//选项
//el代表的是element元素,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器
el:'#app',
//data对象时要渲染到页面上的数据
data:{
msg:'学习vue'
},
//方法
methods:{
}
})
</script>
</body>
</html>
2.3 指令
1 内容渲染指令
v-text
{{}}
v-html
v-text
会覆盖原有的文本内容
{{}}
vue提供‘{{}}’来专门解决v-text会默认覆盖文本内容的问题。这种语法的专业名称为插值表达式,英文名为:Mustache。
v-html
可以把带有标签的字符串,渲染成真正的HTML内容!
2 属性绑定指令
注意:插值表达式只能用在元素的内容结点中,不能用在元素的属性结点中!
v-bind
vue中,可以使用v-bind:
指令,为元素的属性动态绑定值;
- 简写是英文的
:
- 在使用v-bind属性绑定期间,如果绑定内容需要进行动态绑定值,则字符串外面应该包裹单引号。
3 事件绑定指令
v-on
普通事件绑定
我们在data里面添加的变量会被添加进new Vue()实例化的对象vm里面,这里给标签添加v-on点击事件的指令后,也是相当于给new Vue()实例化的对象vm里面的值进行加减。而我们使用this就可以直接替代vm找个对象。
在绑定事件时可以加(),也可以不加。需要传参的时候就必须要加()。
v-on可以被简写为@
带参数的事件
如果在触发点击事件的时候没有传入参数,调用的函数会自动接收原生DOM的事件e
<button @click="fun">点击</button>
methods:{
fun(e){
console.log(e)
e.target.style.backgroundColor='red'
}
}
vue提供了内置变量,名字叫做$event
,他就是原生DOM的事件e。
如果在传参的时候也需要将$event
传入函数中,则需要像下面的格式写:
<button @click="fun(n,$event)">点击</button>
methods:{
fun(n,e){
console.log(e)
e.target.style.backgroundColor='red'
}
}
注意:
在传参的时候必须写成$event
这种格式,但是这个参数在第几个位置是没有影响的。
事件修饰符
加在事件绑定上面,@click.stop
按键修饰符
4 双向绑定指令
指令操作
v-model
测试:数据双向和单向绑定
<p>{{username}}</p>
<input type="text" v-model="username"><br>
<input type="text" v-bind:value="username">
data:{
username:'胡桃'
}
结果:
结果显示表明:
v-model
是双向绑定,data里面的值改变的时候,界面上的值也会跟着改变。界面上的值改变的时候也会改变data的值。v-bind
是单向绑定,数据方向是从data层像视图层改变的。
可以使用v-model
的表单元素:
input
- type=“text”
- type=“radio”
- type=“checkbox”
- type=“xxxx”
textarea
select
v-model修饰符
5 条件渲染指令
6 列表渲染指令
注意一点:如果在用脚手架创建的项目.vue
使用到循环,但是不写key的话会报错。
2.4 过滤器
1 基本使用
案例:
<div id="app">{{ msg | capi }}</div>
const vm=new Vue({
el:'#app',
data:{
msg:'learing vue'
},
//方法
methods:{
},
//过滤器函数
filters:{
capi(val){
//val为管道符前面的值
//过滤器找那个,一定要有一个返回值
return val.toUpperCase()
}
}
})
2 私有过滤器和全局过滤器
私有过滤器:
全局过滤器:
<div id="app">{{ msg | capi }}</div>
<div id="app2">{{ msg | capi }}</div>
//全局过滤器
Vue.filter('capi',(val)=>{
return val.toUpperCase()+'~~'
})
const vm=new Vue({
el:'#app',
data:{
msg:'learing vue'
},
//过滤器函数
filters:{
capi(val){
//val为管道符前面的值
//过滤器找那个,一定要有一个返回值
return val.toUpperCase()
}
}
})
const vm2=new Vue({
el:'#app2',
data:{
msg:'learing vue'
},
})
3 注意
4 拓展
2.5 侦听器
1 基本使用
<div id="app">
<input type="text" v-model="msg">
</div>
const vm=new Vue({
el:'#app',
//data对象时要渲染到页面上的数据
data:{
msg:'learing vue'
},
watch:{
//侦听器本质是一个函数,要监听哪个数据的变化,就把数据名作为方法名即可
msg(newval,oldval){
console.log('变化了',newval,oldval)
}
}
})
侦听器种类:
- 方法格式的侦听器
- 缺点1:无法在刚进入页面的时候,自动触发!
- 缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器!
- 对象格式的侦听器
- 好处1:可以通过immediate选项,让侦听器自动触发
- 好处2:可以通过deep选项,让侦听器监听到到每个属性的变化
2 immediate
3 深度侦听
4 优化总结
使用函数格式侦听对象中具体的哪个值的变化,可以不使用深度侦听。
2.6 计算属性
案例:
*{margin: 0;padding: 0;}
.box{
width: 300px;
height: 300px;
}
<div id="app">
R:<input type="text" v-model.number="R"><br>
G:<input type="text" v-model.number="G"><br>
B:<input type="text" v-model.number="B"><br>
<hr>
<p class="box" :style="{backgroundColor:rgb}">{{rgb}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
R:0,
G:0,
B:0,
},
computed:{
rgb(){
return `rgb(${this.R},${this.G},${this.B})`
}
}
})
</script>
效果:box盒子的颜色会根据你输入的值实时的改变
2.7 axios
1 基本使用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//1.调用axios方法得到的返回值是Promise对象
const res=axios({
method:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks'
})
console.log(res)
res.then(function(books){
console.log(books)//不是真实数据
console.log(books.data)//是真实数据
})
</script>
2 axios传参
发起GET请求:
axios({
//请求方式
method:'GET',
//请求地址
url:'http://www.liulongbin.top:3006/api/getbooks',
//URL中的查询参数
parms:{
id:1
}
}).then(function(books){
console.log(books)
})
发起POST请求:
axios({
//请求方式
method:'GET',
//请求地址
url:'http://www.liulongbin.top:3006/api/getbooks',
//URL中的查询参数
parms:{
id:1
}
}).then(function(books){
console.log(books)
})
3 axios结构赋值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-az824sWY-1637648980488)(C:%5CUsers%5Ccdd%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20211008101320259.png)]
可以得到真实的数据,
优化:
4 axios.get/post
2.8 vue-cli
1 单页面应用程序
2 vue-cli
3 安装使用
4 src组成
5 vue运行流程
6 main.js
这里的#app
指的是要将模板templa里面的界面渲染到index.html里面的#app区域:
2.9 vue组件
1 组件化的开发
2 vue中的组件化开发
3 三个组成部分
4 基本使用
这里的data为什么是函数而不是对象呢?
vue中data必须是函数是为了保证组件的独立性和可复用性,data是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。
简单来说就是:
如果data为一个对象,那么存的数据都是在同一个内存空间里面的,因为对象是引用类型,一个数据改变的时候,就会影响到其他的使用了该数据的效果。
data为一个函数的话,里面return的值就是在块级作用域里面的,{}
里面的每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。
写函数的原因是因为保证了这个对象是独立的,如果可以保证你写的对象是唯一的,不会被别的地方引用到,也可以写对象不用谢函数