vue学习笔记-使用Vue脚手架

皓月u
1,967 阅读4分钟

1.初始化脚手架

1.什么是脚手架

它是用来帮助我们更好的管理代码, 打包代码和其它资源, 保证项目规范和一些规则的工具

  1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
  2. 最新的版本是 4.x。
  3. 文档: cli.vuejs.org/zh/。

2.安装vue脚手架

安装vue-cli之前需要安装： nodejs和webpack

第一步（仅第一次执行）：全局安装@vue/cli。

在cmd中输入命令: npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

用管理员身份重新打开cmd输入命令： vue create xxxx

默认选第一个

22.png

第三步：启动项目 npm run

切换到创建好的文件夹，并输入: npm run serve 23.png

创建完成：输入http://localhost:8080/或http://192.168.43.86:8080/可访问项目

24.png

3.脚手架的结构

25.png

4.render函数

关于不同版本的Vue：

1.vue.js与vue.runtime.xxx.js的区别：

(1)vue.js是完整版的Vue，包含：核心功能+模板解析器。

(2)vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用 render函数接收到的createElement函数去指定具体内容。

3.使用运行版(精简版)Vue的好处： 方便webpack打包，节省代码和空间

26.png

5.修改默认配置

  • 使用vue inspect >out.js可以查看到Vue脚手架的默认配置
  • 使用Vue.config.js可以对脚手架进行个性化定制，详情见：cli.vuejs.org/zh

2.ref与props

1.ref属性

功能：被用来给元素或子组件注册引用信息（原生通过id获取元素的替代者）

使用方法:

  1. 打标识：<h1 ref="xxx"></h1>
  2. 获取：this.$refs.xxx

示例：

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
        <School ref="sch"/>
    </div>
</template>
​
<script>
    //引入School组件
    import School from './components/School'
    export default {
        name:'App',
        components:{School},
        data() {
            return {
                msg:'欢迎学习Vue！'
            }
        },
        methods: {
            showDOM(){
                console.log(this.$refs.title) //真实DOM元素
                console.log(this.$refs.btn) //真实DOM元素
                console.log(this.$refs.sch) //School组件的实例对象（vc）
            }
        },
    }
</script>
​

应用在html标签上获取的是真是DOM元素，应用在组件标签上获取的是组件实例对象（vc）

console.log(this.$refs.sch)

27.png

2.props配置

功能：让组件接收外部传过来的数据

28.png

1.传输数据:

<Student name="xxx" :age="xxx" />

2.接收数据:

第一种方式(简单接收):

props:['name','age']

第二种方式(限制类型)：

props:{
  name:String
  age:number
}

第三种方式(限制类型、限制必要性、指定默认值)：

props{
   name{
     type:String ,//指定类型
     required:true//必要性
   },
   age{
     type:number,
     default:18//默认值
   }
}

注意： props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告。若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。【此时需要修改的属性在data中的名字不能与props中的名字一样。否则它会优先执行props中的。正确改法示例：data{myAge:this.age}】

3.scoped样式

作用：让样式在局部生效，防止命名冲突

写法：<style scoped>

3.mixin(混入)

功能：可以把多个组件共有的配置提取成一个混入对象

使用方式：

第一步：先定义

//创建一个文件夹存放共有配置，如minxin.js
export const hunhe = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log('你好啊！')
    },
}
export const hunhe2 = {
    data() {
        return {
            x:100,
            y:200
        }
    },
}

第二步：使用混入

1.全局混入

//mian.js
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

2.局部混入

export default {
        name:'School',
        ...
        mixins:[hunhe,hunhe2],
}

4.插件

功能：用于增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue(vm的缔造者)，第二个以后的参数是插件使用者传递的数据。

使用方式：

第一步：定义插件

在src目录下创建一个js文件，一般命名为plugins.js

const obj = {
    install = function(Vue,options){
    // 可以添加很多强大的功能，例如   
    //1.添加全局过滤器
    Vue.filter(...)
    //2.添加全局指令
    Vue.directive(...)
    //3.配置全局混入(合)
    Vue.mixin(...)
    }
    ...
}

第二步：使用插件

Vue.use(obj)

5.Vue中的自定义事件

组件的自定义事件

1. 一种组件间通信的方式，适用于：子组件==>父组件

2.使用场景，A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)

3.使用方法：

（1）绑定自定义事件(父组件)：

第一种方式(比较灵活)

<Demo ref="xxx"/>   
methods{
    deom(){alter('hhh')}
}
mounted(){
    this.$refs.xxx.$on('haoyue',this.demo)
}

第二种方式

<Demo v-on:haoyue ="demo"/>

若想让自定义组件事件只能触发一次，可以用once修饰符。或$once方法。

（2）触发自定义事件(子组件)：this.$emit('haoyue',数据)第一个参数是事件名，第二个参数是需要传递的数据

（3）解绑自定义事件：this.$off('haoyue')

4.注意：

1.通过this.$refs.xxx.$on('haoyue',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题

2.自定义事件名，不能使用驼峰法命名

3.在哪个组件自定义事件，那这个事件就绑定在对应的组件标签上

4.组件上也可以绑定原生DOM事件，需要使用native修饰符。

5.实例：子组件向父组件传递数据

父组件：

<template>
  <div>
      //给组件的实例对象身上绑定一个haoyue事件
      <Student v-on:haoyue="demo"/>
  </div>
</template>
<script>
import Student from './components/Student.vue'
export default {
    name:'App',
    components: { Student },
    methods: {
        demo(name){
            console.log('demo被调用了'，name)
        }
    },
}

子组件：

<template>
  <div>
     <button @click="sendStudentlName">把学生名给App</button>
  </div>
</template>
<script>
export default {
    name:'Student',
    data(){
        return{
            name:'李四'
        }
    }
    methods: {
        sendStudentlName(){
        //触发Student组件实例身上的haoyue事件
            this.$emit('haoyue',this.name)
        }
    },
}

6.全局事件总线

1.什么是全局事件总线？

一种组件间通信的方式，适用于任意组件间通信 29.png 2.安装全局事件总线

//main.js
new Vue({
    ...
    beforeCreate(){
        Vue.prototype.$bus = this//安装全局事件总线，$bus就是当前应用的vm
    }，
    ...
})

3.使用事件总线：

（1）接收数据(绑定事件)：

A组件想接收数据，则在A组件中给$bus(名字可以自定义一般用$bus更语义)定自定义事件，事件的回调留在A组件自身。

//A组件
methods(){
    demo(data){...}
}
...
mounted(){
    this.$bus.$on('xxx',this.demo)
}

（2）提供数据(分发事件)：

//B组件
this.$bus.$emit('xxx',数据)

（3）解绑事件：

最好在beforeDestory钩子中，用$off去解绑当前组件所用到的事件。

beforeDestory(){
    this.$bus.$off('xxx')
}

7.消息订阅与发布

1.一种组件间的通信方式，适用于任意组件间通信

与全局事件总线相似：

  1. 订阅消息--对应绑定事件监听
  2. 发布消息--对应分发事件
  3. 取消消息订阅--解绑事件监听

2.使用步骤：

（1）安装pubsub：npm i pubsub-js

（2）引入：import pubsub from 'pubsub-js'

（3）接收数据(订阅)：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
    //第一个参数是消息名，第二个才是数据
    demo(msgName，data){...}
}
mounted(){
    this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
}

（4）提供数据(发布)：pubsub.publish('xxx',数据)

（5）最好在beforeDestory钩子中，用pubsub.unsubscribe(pid)去取消订阅

8.过度与动画

1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名

2.图示： 30.png

3.写法：

（1）准备好样式：

元素进入的样式：

1.v-enter：进入的起点

2.v-enter-active：进入的过程中

3.v-enter-to：进入的终点

元素离开的样式：

1.v-leave：离开的起点

2.v-leave-active：离开的过程

3.v-leave-to：离开的终点

2.使用<transition>包裹要过度的元素，并配置name属性：

<transition name="hello">
    <h1 v-show="isShow">你好</h1>
</transition>

3.注意：如果有多高元素需要过度，需要使用：<transition-group>且每个元素都要指定key值

9.$nextTick

1.语法：this.$nextTick(回调)

2.作用：在下一次DOM更新结束后执行其指定的回调

3.使用场景：当改变数据后，要基于更新后的新DOM 进行某些操作时，要在nextTick所指定的回调函数中执行。

avatar
文章
阅读
粉丝