Vue2笔记

Vue2笔记

基础

1. 插值语法:<span>{{js表达式}}</span>(需要在new Vue中书写data)
2. 事件处理:
   1. <button @click="clickMe(10,20)"></button>(需要在new Vue中书写methods)
   1. @blur="":焦点失去事件
3. 元素属性的动态修改
   1. <img :src="js表达式">(需要在new Vue中书写data)
   1. <div :style="{color:activeColor/js表达式;fontsize:fontsize}"></div>
   1. 和下方相同的数组写法也支持
4. 元素类名的动态修改
   1. 拼接字符串方式:<div :class="active/表达式?'d1':'d2'"></div>
   1. 对象方式:<div :class="{active:now==0}"></div>(多个类需要判断之间用逗号隔开)
   1. 数组方式:<div :class="[activeClass,errorClass]"></div>(需要在new Vue中书写data,数组中的项指的是哪个类)

vue常用指令

1. v-on:click:用于绑定事件
2. v-bind:src:用于动态绑定属性
3. v-show="js表达式":
   1. 可以根据指令值是true或false,动态显示/隐藏当前元素
   1. 是通过css来控制显示与隐藏
4. v-text="js表达式":作用类似于{{}},原封不动的显示内容
5. v-html="js表达式":并不是原封不动的显示,会解析其中的html标签
6. v-pre:原封不动的显示当前标签的内容
7. v-if=""/v-else-if=""/v-else:
   1. 控制显示,只显示一个
   1. 通过操作dom元素来显示与隐藏
8. v-for="(item,i) in 10":
   1. 用于循环输出元素,10可以是数组名,item是项,i是下标
   1. :key="item":为当前输出的列表项设置一个唯一标识符
9. v-model="form.name":表单元素的双向数据绑定指令,(需要在data中书写form对象)

vue常用快捷键(功能来源于插件Vue VSCode Snippets)

1. vbase:生成.vue文件的基础结构
2. vrouter:生成路由数组中的路由对象
3. vdata:生成data代码段,定义当前组件需要的变量
4. vmethod:生成method代码段,定义当前组件需要的函数
5. vcomputed:computed对象用于声明计算属性,本质上是声明方法
6. vwatcher:生成watch代码段
7. vcomponents:生成components代码段
8. vprops:生成自定义属性代码段
9. vmounted:生成钩子函数之一的代码段

.vue文件结构

1. template标签
   1. 书写页面元素,当中只能有一个根div标签
2. 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. 有些业务需求需要在:组件创建,组件挂载,组件使用,组件卸载等时间点执行时,就可以在相应的生命周期钩子方法内进行编写
3. 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自定义组件

1. 在页面中自定义标签,然后书写Person.vue

2. 父组件向子组件传参

   ​ 1. <person name='参数' avator='参数'>

3. 子组件向父组件传参

   1. 子组件:this.$emit('delete',{多个参数})

   2. 父组件:<son @delete='dodelete'>

   3. 父组件:`dodelete(data){console.log(data)}`
   

4. 也可以使用ref和$refs结合的方式传参

      1. 子组件:在vdata中书写`a:''`
      1. 父组件:`<zi ref='hhh'>`
      1. 父组件:`$refs.hhh.a`拿到子组件的a的值
   

5. 事件传参也可以使用事件中心

   1. 创建bus.js文件

      import Vue from "vue";
      export const eventBus = new Vue();
      

   2. 兄组件发送参数

      send() {
            eventBus.$emit('info', this.a)
          }
      

   3. 弟组件接收参数

       eventBus.$on('info', (data) => {
            this.key = data
          })
      

vue的全局变量

1. 在main.js中声明Vue.prototype.cityname='北京'

vue插槽

1. 组件插槽(slot默认插槽)
   1. 设计子组件时,在布局中定义一个插槽,给予基础样式,父组件在使用时可以通过slot属性动态设置需要显示的内容
2. 具名插槽(带名字的插槽)
   1. 子:<slot name='xxx'>
   1. 父:<div slot='xxx'>

vue的事件修饰符

1. <input @keyup.native.enter='up'>:回车键按下时会触发up方法
   1. native事件修饰符的作用:告诉vue将当前绑定的事件当做html原生事件来处理,不要当成是当前组件的自定义事件
2. <button @click.native.stop='doClick'>:自动阻止冒泡
3. <a href='#' @click.native.prevent>:自动阻止链接跳转
4. <button @click.native.once='do'>:事件只执行一次
5. <el-form @submit.native.prevent></el-form>:阻止浏览器对表单的默认行为(自动提交表单)

常见的生命周期钩子函数

1. 组件对象创建前:beforeCreate()
2. 组件对象创建后:created()
3. 组件对象挂载前:beforeMount()
4. 组件对象挂载到dom后:mounted()
5. 组件对象数据更新前:beforeUpdate()
6. 组件对象数据更新后:updated()
7. 组件对象销毁前:beforeDestroy()
8. 组件对象销毁后:destoryed()

第三方库的绑定

1. import axios from 'axios'
   Vue.prototype.axios=axios
   this.axios......
   

2. 可以便捷使用axios第三方库,(axios本身做了这个操作,这段代码不用写)

@事件

1. @click:当元素被单击时触发
2. @input:当输入框的值发生变化时触发
3. @keyup:当按键被释放时触发
4. @submit:当表单提交时触发
5. @mouseover:当鼠标移到元素上时触发
6. @focus:当元素获得焦点时触发
7. @blur:当元素失去焦点时触发
8. @change当元素的值改变时触发(此事件通常在表单元素中使用)
9. @dbclick:当元素被双击时触发
10. @keydown:当按键被按下时触发
11. @scroll:当元素滚动时触发