Vue2笔记
基础
- 插值语法:
<span>{{js表达式}}</span>
(需要在new Vue中书写data)- 事件处理:
1.<button @click="clickMe(10,20)"></button>
(需要在new Vue中书写methods)
1.@blur=""
:焦点失去事件- 元素属性的动态修改
1.<img :src="js表达式">
(需要在new Vue中书写data)
1.<div :style="{color:activeColor/js表达式;fontsize:fontsize}"></div>
1. 和下方相同的数组写法也支持- 元素类名的动态修改
1. 拼接字符串方式:<div :class="active/表达式?'d1':'d2'"></div>
1. 对象方式:<div :class="{active:now==0}"></div>
(多个类需要判断之间用逗号隔开)
1. 数组方式:<div :class="[activeClass,errorClass]"></div>
(需要在new Vue中书写data,数组中的项指的是哪个类)
vue常用指令
v-on:click
:用于绑定事件v-bind:src
:用于动态绑定属性v-show="js表达式"
:
1. 可以根据指令值是true或false,动态显示/隐藏当前元素
1. 是通过css来控制显示与隐藏v-text="js表达式"
:作用类似于{{}}
,原封不动的显示内容v-html="js表达式"
:并不是原封不动的显示,会解析其中的html标签v-pre
:原封不动的显示当前标签的内容v-if=""/v-else-if=""/v-else
:
1. 控制显示,只显示一个
1. 通过操作dom元素来显示与隐藏v-for="(item,i) in 10"
:
1. 用于循环输出元素,10可以是数组名,item是项,i是下标
1.:key="item"
:为当前输出的列表项设置一个唯一标识符v-model="form.name"
:表单元素的双向数据绑定指令,(需要在data中书写form对象)
vue常用快捷键(功能来源于插件Vue VSCode Snippets
)
vbase
:生成.vue文件的基础结构vrouter
:生成路由数组中的路由对象vdata
:生成data代码段,定义当前组件需要的变量vmethod
:生成method代码段,定义当前组件需要的函数vcomputed
:computed对象用于声明计算属性,本质上是声明方法vwatcher
:生成watch代码段vcomponents
:生成components代码段vprops
:生成自定义属性代码段vmounted
:生成钩子函数之一的代码段
.vue文件结构
- template标签
1. 书写页面元素,当中只能有一个根div标签- script标签:书写js代码
1. data:定义当前组件需要的变量
2. methods:定义当前组件需要的方法
3. computed:定义当前组件需要的计算属性
1.total()
,定义在computed中
1.{{total}}
,调用在template标签中
4. watch:
1. 监听data中生命的变量,有变化就执行该方法
1.name(newval,oldval){}
5. directives:定义自定义指令
6. components:用于指明当前组件中,需要使用哪些子组件
7. props:
1. 用于声明自定义组件接收父组件传来的参数,声明之后可在template中用{{}}使用
1. 也可以props:['name',...]
8. mounted:
1. 生命周期钩子函数之一,将会在组件挂载dom树之后自动执行
1. 有些业务需求需要在:组件创建,组件挂载,组件使用,组件卸载等时间点执行时,就可以在相应的生命周期钩子方法内进行编写- style标签:书写css样式
1.lang="scss"
:当前style段支持scss编译
1.scoped
:只针对当前组件生效,没有该属性,则生效于所有组件
Vue的自定义指令
directives: {
red: {
inserted: function (el, binding) {
console.log(binding);
el.style.color = binding.value
}
}
}
vue自定义组件
在页面中自定义标签,然后书写Person.vue
父组件向子组件传参
1.
<person name='参数' avator='参数'>
子组件向父组件传参
子组件:
this.$emit('delete',{多个参数})
父组件:
<son @delete='dodelete'>
3. 父组件:`dodelete(data){console.log(data)}`
也可以使用ref和$refs结合的方式传参
1. 子组件:在vdata中书写`a:''` 1. 父组件:`<zi ref='hhh'>` 1. 父组件:`$refs.hhh.a`拿到子组件的a的值
事件传参也可以使用事件中心
创建bus.js文件
import Vue from "vue"; export const eventBus = new Vue();
兄组件发送参数
send() { eventBus.$emit('info', this.a) }
弟组件接收参数
eventBus.$on('info', (data) => { this.key = data })
vue的全局变量
- 在main.js中声明
Vue.prototype.cityname='北京'
vue插槽
- 组件插槽(slot默认插槽)
1. 设计子组件时,在布局中定义一个插槽,给予基础样式,父组件在使用时可以通过slot属性动态设置需要显示的内容- 具名插槽(带名字的插槽)
1. 子:<slot name='xxx'>
1. 父:<div slot='xxx'>
vue的事件修饰符
<input @keyup.native.enter='up'>
:回车键按下时会触发up方法
1. native事件修饰符的作用:告诉vue将当前绑定的事件当做html原生事件来处理,不要当成是当前组件的自定义事件<button @click.native.stop='doClick'>
:自动阻止冒泡<a href='#' @click.native.prevent>
:自动阻止链接跳转<button @click.native.once='do'>
:事件只执行一次<el-form @submit.native.prevent></el-form>
:阻止浏览器对表单的默认行为(自动提交表单)
常见的生命周期钩子函数
- 组件对象创建前:
beforeCreate()
- 组件对象创建后:
created()
- 组件对象挂载前:
beforeMount()
- 组件对象挂载到dom后:
mounted()
- 组件对象数据更新前:
beforeUpdate()
- 组件对象数据更新后:
updated()
- 组件对象销毁前:
beforeDestroy()
- 组件对象销毁后:
destoryed()
第三方库的绑定
import axios from 'axios' Vue.prototype.axios=axios this.axios......
可以便捷使用axios第三方库,(axios本身做了这个操作,这段代码不用写)
@事件
@click
:当元素被单击时触发@input
:当输入框的值发生变化时触发@keyup
:当按键被释放时触发@submit
:当表单提交时触发@mouseover
:当鼠标移到元素上时触发@focus
:当元素获得焦点时触发@blur
:当元素失去焦点时触发@change
当元素的值改变时触发(此事件通常在表单元素中使用)@dbclick
:当元素被双击时触发@keydown
:当按键被按下时触发@scroll
:当元素滚动时触发