1.Vue
Vue是渐进式的JavaScript库,基于mvvm模式即
m model
v view
vm viewModel(m<--->v)
Vue也是数据驱动框架
jQuery与Vue中
Vue彻底摆脱了dom操作
jQuery帮助进行都dom操作
2.模板语法
Vue实例和模板
数据模型和模板
将数据模型渲染,进行Vue帮助进行dom操作或自己进行dom操作
1)双大括号:一般用在标签内部
{{}}中放置变量如: {{message}}
方法的调用如: {{message.split("").reverse().join("")}}
放表达式如:{{a + b}}
2)指令:一般用于标签的属性中
v-html :用于将一段HTML代码渲染到页面中
v-if v-else-if v-else :条件渲染,if当中的值为true时当前元素才能显示,为Flase时不予显示
v-show ,if当中的值为true时当前元素才能显示,为Flase时则display : none; 仍存在
v-for 做迭代
v-model表单元素当中
v-bind属性绑定 简写: :
v-on方法绑定 简写 : @
v-slot slotName插槽名称 : #
3)应用模板 组件
1.功能组件
2.页面组件
自己做组件
<template>
</template>
<script>
export default {
}
</script>
<style scoped> //局部样式只在当前模块有效
</style>
elementui 提供了一套完整的组件库
3.Vue实例
无数个Vue实例,只有一个根实例,每一个组件都有一个Vue实例与之对应
1)根组件的实例对象由用户自己创建
根组件
new Vue({
el:"#app",
data:{
}
})
组件定义,子组件
let myAlert = {
template:``,
data(){
return{
}
},
methods:{}
}
Vue.component('my-alert',myAlert)
调用my-alert,实际就是创建了一个myAlert的实例
2)Vue实例对象可以直接访问
Vue实例对象可以直接访问data,methods,props,computed定义的属性或者方法;
methods中的方法,构造函数,计算属性中的方法中的this指向当前Vue实例
4.生命周期
初始化Vue实例对象
beforeCreate
created
编译模板,将模板转化为dom对象$el
beforeMount
将Vue实例中的data,method绑定到$el
mounted
设置监听,data中值发生变化,模板就会重新渲染
beforeUpdate
updated
销毁
beforeDestory
destoryed
5.style与class绑定
style
1)style属性的绑定
静态绑定 Vue不会进行二次处理 无动态效果
<div style = "color:red"></div>
<div :style="style"></div>
data:{
style:{
style:'color:red'
}
2)style属性的绑定拓展语法
<div :style="style"></div>
data:{
style:{
color : 'red'
}
}
=>
<div :style="{color:'red'}"></div>
<div :style="[style,a]"></div>
data:{
style:{
color:'red'
}
a:{
background:"lightblue"
}
}
class
1)class属性
<div class="basic current"></div>
<div :class="cc"></div>
data:{
cc:"basic current"
}
2)class属性的拓展语法(Vue)
<div :class = "{basic:true,current:false}"></div>
<div :class="[a,b]"></div>
data:{
a:"basic",
b:"current"
}
6.事件机制
三要素
事件源
事件处理函数
事件对象
2)事件绑定
<div @click="handler">添加</div>
methods:{
handler(event){
}
}
div 事件源
事件处理函数 handler
事件对象 event
<div @click="handler(a,'a',$event)">添加<div>
data:{
a:"b"
}
methods:{
handler(a,b,event){}
}
3)事件修饰符
1.事件对象修饰符
.prevent .stop .once .self
2.按键修饰符
.enter .space .delete
3.系统修饰符
.ctrl .shift .meta
7.组件
1)定义
let myAlert = {
template:``,
data(){
return {}
}
props:["a","b"]
}
2)注册
1.局部注册
new Vue ({
components:{
'my-alert':mtAlert
}
})
2.全局注册
Vue.component('my---alert',myAlert)
3)使用
<my-alert a="hello" :b=" 'world' "></my-alert>
4)交互
1.自定义参数
父->子
<my-alert a="hello" :b="'world'"></my-alert>
props:["a","b"]
props:{
a:{
type:"String",
default:""
},
b:{
type:"String",
required:true
}
}
2.自定义事件
子 -> 父
<my-alert @foo="handler"></my-alert>
let myAlert = {
template:`<div @click="handler">ok</div>`,
methods:{
handler(){
this.$emit("foo")
}
}
}
3.插槽
1) 匿名插槽
<my-alert>hello world</my-alert>
<my-alert>
<template v-slot:default>
hello world
</template>
</my-alert>
let myAlert = {
template:`<div><slot></slot></div>`,
}
2) 具名插槽
<my-alert>
<template v-slot:one>
hello world
</template>
</my-alert>
let myAlert = {
template:`<div><slot name="one"></slot></div>`,
}
3) 作用域插槽
<my-alert>
<template v-slot:one="slot">
hello world {{slot.row}}
</template>
</my-alert>
let myAlert = {
template:`<div><slot name="one" :row="'hello'"></slot></div>`,
}
8.表单处理(双向数据绑定)
9. 计算属性
1) methods中的方法在模板中被调用,如果这个方法依赖data,data的值发生了变化,这个方法就会重新执行;计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致!!!
2) 计算属性计算出来的结果会被缓存起来,下次无需计算直接显示,而方法不是,每次调用都会重新执行。
10. 监听器
可以监听data中值的变化
Vue初步认知
最新推荐文章于 2022-12-21 21:21:55 发布