一套用于构建用户界面的渐进式JavaScript框架
1. 采用组件化模式,提高代码复用率,且让代码更好维护
2. 声明式编码,让编码人员无需直接操作DOM,提高开发效率
3. 使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
ES6语法规范、ES6模块化、包管理器、原型、原型链、数组常用方法、axios、promise。。。
Hello.{{name}}
他.{{age}}岁
注意区分:js表达式 和 js代码(语句)
表达式:一个表达式会产生一个值,可以放在任何需要值的地方:
(1)a
(2)a+b
(3)demo(1)
js代码(语句)
(1)if(){}
(2)for(){}
功能:用于解析标签体内容
写法:{{xxx}}. xxx 是js的表达式,且xxx可以自动读取到data中的所有属性
功能:用于解析标签(包括:标签属性,标签体内容,绑定事件…)
举例:v-bind:href=“xxx” 可以简写成 :href=“xxx” xxx要写成js表达式,且xxx可以自动读取到data中的所有属性
备注:Vue中有很多的指令,且形式都是:v-???,此处只是用v-bind举了个例子
如果有多个name的话 建立一个 子.name
插值语法
你好.{{name}}
指令语法
点我去{{children.name}}
v-bind: 数据只能从data–>页面
v-model: 数据能从data<–>页面
备注:一般用在表单类元素上
v-model:value可简写为v-model,因为v-model默认收集的是value值
单向数据绑定
双向数据绑定
双向数据绑定
(1)new Vue时候配置el属性。
el:‘#root’
new Vue({
el:'#root',
data:{
name:'尚硅谷一',
}
})
(2)先创建Vue实例,随后再通过vm.$mount(‘#root’)指定el的值
v.$mount(‘#root’)
const v = new Vue({
data:{
name:'尚硅谷二'
}
})
console.log(v)
v.$mount('#root')
(1)对象式
data: {
name: '尚硅谷'
}
(2)函数式:组件必须用函数式
data:function(){
return{
name:'尚硅谷'
}
}
注:由Vue管理的函数,一定不要写箭头函数,否则,this就不再是Vue实例了。
Model-View-ViewModel
data中的所有属性,最后都到了vm
vm中的所有属性,都可以体现在vue实例中
姓名:{{name}}
地址:{{address}}
测试1:{{1+1}}
测试2:{{$options}}
对象的定义与赋值
Object.defineProperty(person,'age',{
value:18,
enumerable:true, //控制属性是否可以枚举,默认值false
writable:true, //控制属性修改,默认值false
condigurable:true //删除,false
})
数据代理:通过一个对象代理对另一个对象中属性的操作
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性,都指定一个getter/setter
在getter/setter内部去操作(读/写)data中对应的属性
名称:{{name}}
地址:{{address}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-niN3wOKo-1650547834650)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220207170509539.png)]
1.使用 v-on:xxx 或 @xxx 绑定事件。xxx是事件名
2.事件的回调需要配置在methods对象中,最终会在vm上
3.methods中配置的函数,不要用箭头函数,否则this就不是vm了
4.methods中配置的函数,都是被Vue所管理的函数。this的指向是vm或组件实例对象
5.@click=“demo” 和 @click=“demo($event)” 效果一致。但后者可以传参
欢迎大家来到{{name}}
常用:
不常用:
capture:使用事件的捕获模式
self:只有event.target是当前操作的元素时才能触发事件
passive:时间的默认行为立即执行,无需等待事件回调执行完毕
可以连用:@click.stop.prevent=“”
@keyup.ctrl.y="showInfo" //按下ctrl+y触发事件
@keyup.enter="" //按下、抬起触发
@keydown.enter="" //按下触发
computed:{}
get()、set()
computed:{
fullname:{
get(){
return this.firstname + '-' +this.lastname
},
set(value){
const arr = value.split('-')
this.firstname = arr[0]
this.lastname = arr[1]
}
}
}
简写模式:
条件:只有在只读不改下可以简写,计算属性较methods 具有缓存机制,更高效
computed:{
fullname(){
return this.firstname + '-' +this.lastname
}
}
watch:{}
当被监视属性变化时,回调函数自动调用,进行相关操作
监视的属性必须存在
监视的两种写法:
new Vue时传入watch配置
通过vm.$watch监视
watch:{
Isappear:{
handler(newValue,oldValue){
console.log('Isappear被修改了',newValue,oldValue)
}
}
}
vm.$watch('Isappear',{
immediate:true,
deep:true,
handler(newValue,oldValue){
console.log('Isappear被修改了',newValue,oldValue)
}
})
简写
Isappear(newValue,oldValue){
console.log('Isappear被修改了',newValue,oldValue)
}
vm.$watch('Isappear',function(newValue,oldValue){
console.log('Isappear被修改了',newValue,oldValue)
})
Vue中watch默认不检测对象内部(一层)
deep:true可以检测对象内部值改变(多层)
备注:
Vue自身可以检测对象内部值的改变,但是watch默认不可以
使用watch随机应变,决定是否采用深度监视
{{name}}
style样式:
:style="{fontSize:x}" //xxx为动态值
:style="[a,b]" //a,b为样式对象
class
style
v-show
适用于:切换频率较高的场景
不展示的DOM元素不被移除,仅隐藏掉
今日我们学{{name}}
v-if
适用于:切换频率较低的场景
不展示的DOM元素被移除
v-if和v-else-if 一起使用时,不能被打断
今日我们学{{name}}
1
2
3
遍历数组
v-for=" x in xxx"
-
{{p.name}}-{{p.age}}
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
遍历对象
car:{
name:'奥迪',
price:'70万',
color:'黑色'
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aeRfF6Ul-1650547834652)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220304142702081.png)]
computed:{
filPersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord)!==-1
})
}
}
手机表单数据
text : v-model收集的是value值,用户输入的就是value值
radio : v-model收集的是value值,且要给标签配value值
checkbox :要收集数组形式 [ ]
v-model的三个修饰符
lazy:失去焦点再收集数据
number:输入字符串转为有效数字
trim:输入首尾空格过滤
Vue中使用组件的三大步骤:定义(创建)、注册、使用(写组件标签)
如何定义
使用Vue.extend({ })创建
// 第一步 创建组件
const school = Vue.extend({
//配置结构
template:`
学校名称:{{schoolName}}
学校地址:{{address}}
`,
//注意:无el data函数形式
data(){
return{
schoolName:'内农大',
address:'呼和浩特'
}
}
})
如何注册
局部注册:new Vue 中传入components选项
全局注册:Vue.component(‘组件名’,组件)
// 第二步 注册组件
new Vue({
el:'#root',
components:{
school:school
}
})
编写组件标签
<组件>
组件名
一个单词:school/School
多个单词:my-school/MySchool(需要Vue脚手架支持)
注:要回避html已有元素名 可使用name配置项在开发者工具中呈现名字
组件标签
注:不使用脚手架时会导致后续组件不能渲染
简写方式
const school = Vue.extend({ }) =>const school = { }
第一步:安装vue-router,命令:npm i vue-router
第二步:在mian.js中应用插件:Vue.use(VueRouter)
第三步:创建pages文件夹存放路由组件
第四步:创建一个router文件夹存放index.js
// 引入VueRouter
import VueRouter from "vue-router";
//引入路由组件
import MeHealth from '../components/MeHealth'
import MyTodo from '../components/MeTodo'
//创建并暴露一个路由器
export default new VueRouter({
router:[
{
path:'/MeHealth',
component:MeHealth
},
{
path:'/MyTodo',
component:MyTodo
}
]
})
第五步:实现切换(active-class配置高亮样式)
About
第六步:指定展示位置
注:二级路由path后不需要加/
中的to属性中需要带上一级
routers:[
{
path:/one,
component:one,
//二级嵌套
children:[
{
path:two,//注意:这里不用加/
component:two,
}
]
}
]
二级路由
路由传参
点击内容
{{$route.query.id}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D42o8GA2-1650547834652)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220318174303379.png)]
简化路由的跳转
在index.js配置时 在routes:[ ]中加上name:‘luyou’ 在router-link中可直接找到
二级路由
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z61gINmp-1650547834653)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220318180158954.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jaXtBF5z-1650547834653)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220318180229338.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oFCor6Ui-1650547834654)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220318180255103.png)]
er-view>
## 2.二级路由(嵌套)
注:二级路由path后不需要加/
中的to属性中需要带上一级
```web
routers:[
{
path:/one,
component:one,
//二级嵌套
children:[
{
path:two,//注意:这里不用加/
component:two,
}
]
}
]
二级路由
路由传参
点击内容
{{$route.query.id}}
[外链图片转存中…(img-D42o8GA2-1650547834652)]
简化路由的跳转
在index.js配置时 在routes:[ ]中加上name:‘luyou’ 在router-link中可直接找到
二级路由
[外链图片转存中…(img-z61gINmp-1650547834653)]
[外链图片转存中…(img-jaXtBF5z-1650547834653)]
[外链图片转存中…(img-oFCor6Ui-1650547834654)]