投稿
  1. 首页
  2. html-js-css

Vue之Vue-CLI

蓝带马爹利•2022-6-10•html-js-css•阅读29

Vue之Vue-CLI,第1张

vue基础vue-cli：vue-cli是vue脚手架，专门做工程化开发vue-router：vue-router用于在vue中实现前端路由vuex：当应用足够复杂时，可以借助vuex保管数据element-ui：ui组件库vue3
Vue组件化编程 模块与组件、模块化与组件化

模块

理解：向外提供特定功能的js程序，一般就是一个js文件。

为什么用：js文件很多很复杂。

作用：复用js，简化js的编写，提高js运行效率。

组件

组件的定义：实现应用中局部功能代码和资源的集合。

为什么用：一个界面的功能很复杂

作用：复用编码，简化项目编码，提高运行效率

模块化

当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。

组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化应用。

非单文件组件

一个文件中包含有n个组件

基本使用

Vue中使用组件的三大步骤：

定义组件(创建组件)注册组件使用组件(写组件标签)

如何定义一个组件？

​ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

​ 区别如下：

el不要写，为什么？——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

data必须写成函数，为什么？ —— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

如何注册组件？

局部注册：靠new Vue的时候传入components选项全局注册：靠Vue.component(‘组件名’,组件)

编写组件标签：

<body>
    <div id="root">
        <hello>hello>
        <h1>{{msg}}h1>
        <hr>
        <school>school>
        <hr>
        <student>student>
        <student>student>
    div>
    <div id="root2">
        <hello>hello>
    div>
body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //创建school组件
    const xuexiao = Vue.extend({
        //el: '#root',
        template: `
            
                学校名称：{{schoolName}}
                学校地址：{{address}}
                	
            
		`,
        data() {
            return {
                schoolName: '果粒陈',
                address: '北京朝阳区'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName);
            },
        },
    })
    //创建student组件
    const student = Vue.extend({
        template: `
            
                学生名称：{{studentName}}
                学生年龄：{{age}}
            
		`,
        data() {
            return {
                studentName: '张三',
                age: 18
            }
        }
    })
    const hello = Vue.extend({
        template:`
            
                你好啊!{{name}}
            
        `,
        data() {
            return {
                name:'tom'
            }
        }
    })
    //全局注册组件
    Vue.component('hello',hello);
    new Vue({
        el: '#root',
        data:{
            msg:'你好呀'
        },
        //注册组件（局部注册）
        components: {
            //组件名:创建时的名字(也可以简写)
            school: xuexiao,
            student
        }
    }),
    new Vue({
        el: '#root2',
        components : {
            student,
        },
    })
script>
组件的几个注意点

组件名推荐：

如果组件名只有一个字母，那么推荐：

第一种写法（首字母小写）：school

第二种写法（首字母大写）：School

components:{
	school:xuexiao,//小写
    School:xuexiao,//首字母大写
}


<school>school>
<School>School>

如果组件名由多个单词组成，那么推荐：

第一种写法（kebab-case命名）：my-school

第二种写法（CamelCase命名）：MySchool（需要脚手架支持）

components:{
	myschool:xuexiao,//全小写
    'my-school':xuexiao,//kebab-case命名
    MySchool:xuexiao,//CamelCase命名(需要Vue脚手架)
}


<myschool>myschool>
<my-school>my-school>
<MySchool>MySchool>

注意：

组件名尽可能回避HTML中已有的元素名称，例如h2、H2都不行定义组件时可以使用name配置项指定组件在开发者工具中呈现的名字

关于组件标签：

第一种写法：第二种写法：备注：不使用脚手架时，会导致后续组件不能渲染

一个简写方式：const school = Vue.extend(options)可简写为：const school = options

<body>
    
    <div id="root">
        <h1>{{msg}}h1>
        <school>school>
    div>
body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //定义组件
    const school = ({
        name: 'cxj',
        template: `
            
                学校名称：{{name}} 
                学校地址：{{address}}
            
        `,
        data() {
            return {
                name: '果粒陈',
                address: '北京'
            }
        },
    })
    new Vue({
        el: '#root',
        data: {
            msg: '欢迎学习Vue！'
        },
        //局部注册
        components: {
            school
        }
    })
script>

组件的嵌套 
<body>
    <div id="root">
    div>
body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //创建student组件
    const student = Vue.extend({
        template: `
            
                学生姓名：{{name}}
                学生年龄：{{age}}
            
        `,
        data() {
            return {
                name: '张三',
                age: 18
            }
        }
    })
    //定义school组件
    const school = Vue.extend({
        template: `
            
                学校名称：{{name}} 
                学校地址：{{address}}
                
            
        `,
        data() {
            return {
                name: '果粒陈',
                address: '北京'
            }
        },
        components: {
            student
        }
    })
    //定义一个hello组件
    const hello = Vue.extend({
        template: `{{msg}}`,
        data() {
            return {
                msg: '欢迎欢迎!'
            }
        }
    })
    //定义app组件
    const app = Vue.extend({
        template: `
            
                
                
            
        `,
        components: {
            school,
            hello
        }
    })
    //创建vm
    new Vue({
        template: ``,
        el: '#root',
        //局部注册组件
        components: {
            app
        }
    })
script>

VueComponent
school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！关于this指向： 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】。new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。 VueComponent的实例对象，在这个笔记中以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。
一个重要的内置关系

一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype

为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

单文件组件

一个文件中只包含有一个组件

命名：

school.vueSchool.vue（常用）my-school.vueMySchool.vue（常用）
一个.vue文件的组成

1、模板页面

<template>
 页面模板
template>

2、js模块对象

<script>
	export default { 
     data() {
         return {}
     },
     methods: {}, 
     computed: {},
     components: {} 
	}
script>

3、样式

<style>
样式定义
style>
基本使用 引入组件映射成标签使用组件标签 使用Vue脚手架

Vue CLI（command line interface）

初始化脚手架 说明 Vue脚手架时Vue官方提供的标准化开发工具（开发平台）文档：https://cli.vuejs.org/zh 具体步骤

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

npm install -g @vue/cli

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

vue create xxxx

第三步：启动项目

npm run serve

备注：

如出现下载缓慢请配置 npm 淘宝镜像

npm config set registry https://registry.npm.taobao.org

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置， 请执行

vue inspect > output.js
分析脚手架结构
node_modulespublic favicon.icon： 页签图标index.html：主页面 src assets：存放静态资源 logo.png component：存放组件 HelloWorld.vue App.vue：汇总所有组件main.js：入口文件 .gitignore：git 版本管制忽略的配置babel.config.js：babel 的配置文件jsconfig.json：package-lock.json：包版本控制文件package.json：应用包配置文件README.md：应用描述文件vue.config.js：
render函数

关于不同版本的Vue：

vue.js与vue.runtime.xxx.js的区别： vue.js是完整版的Vue，包含：核心功能+模板解析器。vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。
修改默认配置

vue.config.js配置文件

使用vue inspect>output.js 可以查看Vue脚手架的默认配置

使用vue.config.js可以对脚手架进行个性化定制，详见：https://cli.vuejs.org/zh/

ref与props ref属性

被用来给元素或子组件注册引用信息（id的替代者）

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

使用方式：

打标识：

<h1 ref="xxx">h1>
<School ref="xxx"/>

获取：this.$refs.xxx

props配置

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

传递数据：

接收数据：

第一种方式（只接收）：

props:['name']

第二种方式（限制类型）：

props:{
    name:String
}

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

props:{
    name:{
        type:String, //类型
        required:true, //必要性
        default:'老王' //默认值
    }
}

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

Student.vue



/App.vue
mixin混入（混合）

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

使用方式：

第一步定义混合：

{
    data(){....},
    methods:{....}
    ....
}

第二步使用混入：

全局混入：Vue.mixin(xxx)（在main.js中进行引入配置）

//全局混合
import {mixin,mixin2}  from './mixin.js'
//配置
Vue.mixin(mixin)
Vue.mixin(mixin2)

局部混入：mixins:['xxx'](在组件中进行引入配置)

//局部混合
import {mixin,mixin2} from "../mixin.js"
//配置
mixins:[mixin,mixin2]
插件

功能：用于增强Vue

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

定义插件。例如：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)
    // 2. 添加全局指令
    Vue.directive(....)
    // 3. 配置全局混入(合)
    Vue.mixin(....)
    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
	Vue.prototype.$myProperty = xxxx
}

使用插件：

引入插件：import plugins from './plugins'应用插件：Vue.use()
scoped样式
作用：让样式在局部生效，防止冲突。写法：

vue中的过渡与动画

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

图示：

写法：

准备好样式：

元素进入的样式： v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点 元素离开的样式： v-leave：离开的起点v-leave-active：离开过程中v-leave-to：离开的终点

使用包裹要过度的元素，并配置name属性：


	你好啊！

备注：若有多个元素需要过度，则需要使用：，且每个元素都要指定key值。

vue中可以集成第三方动画

比如npm中的animate.css

安装：npm install animate.css

引入：import 'animate.css'

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1297837.html

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
蓝带马爹利蓝带马爹利一级用户组
00
上一篇 2022-06-10
下一篇2022-06-10

发表评论

登录后才能评论

评论列表（0条）

    保存