Vue基础9之脚手架的使用、ref属性、props配置项和mixin混入

于 2023-01-17 17:30:30 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 前端 Vue基础 文章标签： vue.js javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/128420905
版权

Vue基础9

使用Vue脚手架

初始化脚手架

说明

  1. Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。
  2. 脚手架一般都使用最新版本，这与Vue版本是不一样的概念。
  3. 开发文档

具体步骤

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

npm install -g @vue/cli

  1. 切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

  1. 启动项目

npm run serve

备注：
1.如出现下载缓慢请配置 npm 淘宝镜像： npm config set registry https://registry.npm.taobao.org
2.Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置， 请执行：vue inspect > output.js
3.使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

配置淘宝镜像、安装vue脚手架
请添加图片描述
安装成功提示
请添加图片描述
创建vue项目
在这里插入图片描述
选择Vue版本
在这里插入图片描述
项目创建成功
在这里插入图片描述
进入项目、启动项目：
在这里插入图片描述

项目文件介绍

  1. 文件目录介绍
    在这里插入图片描述
  2. package.json文件
    在这里插入图片描述
  3. main.js
    在这里插入图片描述
  4. assests文件
    在这里插入图片描述
  5. index.html页面
    在这里插入图片描述
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!--  针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面    -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <!--      开启移动端的理想视口-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <!--      配置页签图标-->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <!--    配置网页标题-->
     <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
     <!--  当浏览器不支持js时候，noscript标签中的元素就会被渲染-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!--     容器-->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

将前面写好的单文件组件放入这里运行

在这里插入图片描述

  1. App.vue
<template>
  <div id="app">
    <MyStudent></MyStudent>
    <MySchool></MySchool>
  </div>
</template>

<script>
import MyStudent from './components/MyStudent.vue';
import MySchool  from './components/MySchool';

export default {
  name: 'App',
  components: {
    MyStudent,
    MySchool,
  }
}
</script>
  1. MyStudent.vue
<template>
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
    export default {
        name: "MyStudent",
      data(){
          return{
            name:"张三",
            age:15,
          }
      }
    }
</script>
  1. MySchool.vue
<template>
  <div class="root">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <h2><button @click="showTip">点我提示学校名</button></h2>
  </div>
</template>

<script>
export default {
  name: 'MySchool',
  data() {
    return {
      name:"幸福中学",
      address:"重庆市"
    }
  },
  methods:{
    showTip(){
      alert(this.name)
    }
  }
}
</script>

<style scoped>
.root{
  background-color: pink;
}
</style>
  1. 文件目录
    在这里插入图片描述

脚手架文件结构

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

render的作用

在这里插入图片描述
引用运行时的版本时，template模板解析器无法被解析，有两种方法可以执行成功。第一，使用render，第二，使用完整版的vue；

render的完整书写格式：

new Vue({
	render(createElement){
		return createElement(App);
	}
})

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函数去指定具体内容

修改默认配置

修改默认配置在vue.config.js文件中，官方给出可以修改的配置项 官方可以修改配置链接

example：

  1. 将main.js从重命名为peiqi.js
  2. 创建一个和package.json同级的vue.config.js文件，在文件中的pages的index的entry项目中修改路径为src/peiqi.js，重新运行一下，就成功了。
    在这里插入图片描述
    exam2：关闭语法检查

lintOnSave: false, //关闭语法检查

和pages同级

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pages:{
    index:{
      //入口
      entry: 'src/main.js'
    }
  },
  lintOnSave: false,  //关闭语法检查
})

配置项

ref属性

MySchool：

<template>
  <div>
    <h2 ref="schoolName">学校名称：{{name}}</h2>
    <h2 ref="schoolAddress">学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
  name: "MySchool",
  data(){
    return{
      name:'幸福中学',
      address:"重庆",
    }
  },
}
</script>

<style scoped>
  div{
    background-color: #888;
  }
</style>

App.vue：

<template>
  <div>
    <h2 v-text="msg" ref="title"></h2>
    <button ref="btn" @click="showDom">点我输出Dom元素</button>
    <MySchool ref="school"/>
  </div>
</template>

<script>
import MySchool from "@/components/MySchool";
export default {
  name: "App",
  data(){
    return{
      msg:'欢迎学习Vue',
    }
  },
  components: {MySchool},
  methods:{
    showDom() {
      console.log(this.$refs.title)  //真实dom
      console.log(this.$refs.btn)   //真实dom
      console.log(this.$refs.school)  //MySchool组件实例对象（vc）
    }
  }
}
</script>

在这里插入图片描述

在这里插入图片描述
ref属性：

  1. 被用来给元素或子组件注册引用信息（id的替代者）
  2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
  3. 使用方式
    打标识：<h1 ref=“xxx”>…</h1> 或 <School ref=“xxx”></School>
    获取：this.$refs.xxx

props配置项

简单的传值方法

默认的字符串传值

MyStudent.vue

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
export default {
  name: "MyStudent",
  data(){
      return {
        msg:'欢迎学习Vue'
      }
  },
  props:['name','sex','age']    //简单的传值方法
}
</script>

App.vue

<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>

  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
export default {
  name: "App",
  components: {MyStudent},
}
</script>

在这里插入图片描述

使用v-bind对数字类型进行传值

MyTeacher.vue

<template>
  <div>
    <h1 v-text="msg"></h1>
    <h2>老师姓名：{{name}}</h2>
    <h2>老师性别：{{sex}}</h2>
    <h2>老师年龄：{{age+1}}</h2>
  </div>
</template>

<script>
    export default {
        name: "MyTeacher",
      data(){
          return{
            msg:"欢迎来学习Vue"
          }
      },
      props:['name','sex','age']
    }
</script>

<style scoped>

</style>

App.vue

<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>
    <MyTeacher name="李晓" sex="女" :age="20"/>
  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
import MyTeacher from "@/components/MyTeacher";
export default {
  name: "App",
  components: {MyTeacher, MyStudent},
}
</script>

在这里插入图片描述
在这里插入图片描述

限制数据类型

接收数据时候只对数据类型进行限制

MyMother

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>妈妈的名字：{{name}}</h2>
    <h2>妈妈的年龄：{{age}}</h2>
    <h2>妈妈的生肖：{{zodiac}}</h2>
  </div>
</template>

<script>
export default {
  name: "MyMother",
  data(){
    return{
      msg:'欢迎光临我的家'
    }
  },
  //接收的同时对数据进行类型限制
  props:{
    name:String,
    zodiac:String,
    age:Number
  }
}
</script>

App.vue：

<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>
    <MyTeacher name="李晓" sex="女" :age="20"/>
    <hr>
    <MyMother name="王华" zodiac="虎" :age="45+1"/>
  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
import MyTeacher from "@/components/MyTeacher";
import MyMother from "@/components/MyMother";
export default {
  name: "App",
  components: {MyMother, MyTeacher, MyStudent},
}
</script>

在这里插入图片描述

接收的同时对数据：进行类型限制+默认值的指定+必要性的限制

MyFather.vue:

   <template>
<div>
  <h1>{{msg}}</h1>
  <h2>爸爸的名字：{{name}}</h2>
  <h2>爸爸的年龄：{{age}}</h2>
  <h2>爸爸的生肖：{{zodiac}}</h2>
</div>
</template>

<script>
export default {
  name: "MyFather",
  data(){
    return{
      msg:"欢迎光临我的家庭"
    }
  },
  //接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
  props:{
    name:{
      type:String,  //name是字符串类型
      required:true, //name是必要的
    },
    age:{
      type:Number,
      default:55,  //默认值
    },
    zodiac:{
      type:String,
      required: true,
    }
  }
}
</script>

App.vue

<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>
    <MyTeacher name="李晓" sex="女" :age="20"/>
    <hr>
    <MyMother name="王华" zodiac="虎" :age="45+1"/>
    <hr>
    <MyFather name="李四" zodiac="鼠" :age="50" />
    <hr>
    <MyFather name="李四" zodiac="鼠"/>
  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
import MyTeacher from "@/components/MyTeacher";
import MyMother from "@/components/MyMother";
import MyFather from "@/components/MyFather";
export default {
  name: "App",
  components: {MyFather, MyMother, MyTeacher, MyStudent},
}
</script>

在这里插入图片描述

对传入的值进行修改

MyDaughter.vue

<template>
<div>
  <h1>{{msg}}</h1>
  <h2>女儿的名字：{{name}}</h2>
  <h2>女儿的年龄：{{MyAge}}</h2>
  <button @click="addAge">点我给女儿的年龄+1</button>
</div>
</template>

<script>
    export default {
        name: "MyDaughter",
        data(){
          return{
            msg:"欢迎你的到来~",
            MyAge:this.age
          }
        },
        props:{
          name:{
            type:String,
            required:true,
          },
          age:{
            type:Number,
            default:10
          }
        },
      methods:{
        addAge(){
          this.MyAge++;
        }
      }
    }
</script>

App.vue

<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>
    <MyTeacher name="李晓" sex="女" :age="20"/>
    <hr>
    <MyMother name="王华" zodiac="虎" :age="45+1"/>
    <hr>
    <MyFather name="李四" zodiac="鼠" :age="50" />
    <hr>
    <MyFather name="李四" zodiac="鼠"/>
    <hr>
    <MyDaughter name="小好" :age="12"/>
  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
import MyTeacher from "@/components/MyTeacher";
import MyMother from "@/components/MyMother";
import MyFather from "@/components/MyFather";
import MyDaughter from "@/components/MyDaughter";
export default {
  name: "App",
  components: {MyDaughter, MyFather, MyMother, MyTeacher, MyStudent},
}
</script>

在这里插入图片描述

总结

配置项props功能：让组件接收外部传过来的数据
（1）传递数据：
<Demo name=“xxx” />
（2）接收数据
第一种方式（只接收）：
props:[‘name’]
第二种方式（限制类型）：
props:{
name:String
}
第三种方式（限制类型、限制必要性、指定默认值）
props:{
name:{
type:String, //类型
required:true, //必要性
default:‘老王’, //默认值
}
}

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

mixin(混入)

局部混入

在这里插入图片描述
mixin.js：

export const mixin={
    methods:{
        showMsg(){
            alert(this.name)
        }
    },
    data(){
        return{
            x:'123',
            y:456
        }
    }
}

export const mixin1={
    mounted(){
        console.log("你好啊~~~")
    }
}

MyFriend.vue:

<template>
<div>
  <h2 @click="showMsg">朋友的名字是：{{name}}</h2>
  <h2>朋友的年龄是：{{age}}</h2>
</div>
</template>

<script>
import {mixin,mixin1} from "@/mixin";

export default {
  name: "MyFriend",
  data(){
    return{
      name:"小芳",
      age:26
    }
  },
  mixins:[mixin,mixin1]
}
</script>

MySon:

<template>
<div>
  <h2 @click="showMsg">儿子的名字是：{{name}}</h2>
  <h2>儿子的年龄是：{{age}}</h2>
</div>
</template>

<script>
import {mixin,mixin1} from "@/mixin";

export default {
  name: "MySon",
  data(){
    return{
      name:"小王",
      age:15
    }
  },
  mixins:[mixin,mixin1]
}
</script>

App.vue

<template>
  <div>
    <MySon />
    <MyFriend />
  </div>
</template>

<script>
import MySon from "@/components/MySon";
import MyFriend from "@/components/MyFriend";
export default {
  name: "App",
  components: {MyFriend, MySon},
}
</script>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

全局引入混合

main.js:

import Vue from 'vue'

import App from './App'
//引入混合
import {mixin,mixin1} from "@/mixin";

Vue.config.productionTip = false
//全局引入混合
Vue.mixin(mixin)
Vue.mixin(mixin1)

new Vue({
    el:"#app",
    render: h=>h(App)
})

MyGrandma.vue

<template>
<div>
  <h2 @click="showMsg">祖母的名字是：{{name}}</h2>
  <h2>祖母的年龄是：{{age}}</h2>
</div>
</template>

<script>
export default {
  name: "MyGrandma",
  data(){
    return{
      name:"肖藏",
      age:74
    }
  }
}
</script>

MyGrandpa.vue

<template>
  <div>
    <h2 @click="showMsg">祖父的名字：{{name}}</h2>
    <h2>祖父的年龄：{{age}}</h2>
  </div>
</template>

<script>
    export default {
        name: "MyGrandpa",
      data(){
          return{
            name:"李明",
            age:78
          }
      }
    }
</script>

<style scoped>

</style>

App.vue:

<template>
  <div>
    <MyGrandma/>
    <MyGrandpa />
  </div>
</template>

<script>
import MyGrandma from "@/components/MyGrandma";
import MyGrandpa from "@/components/MyGrandpa";

export default {
  name: "App",
  components: {MyGrandpa, MyGrandma},
}
</script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结

mixin（混入）：
功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合，例如：
{
data(){…},
methods:{…}
…
}
第二步使用混入，例如：
（1）全局混入：Vue.mixin(xxx)
（2）局部混入：mixins:[‘xxx’]

VillanelleS
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2.0 Vue脚手架 mixin混入
yasinawolaopo的博客
12-17 525
Vue2.0 Vue脚手架 mixin混入
doc---vue-cli脚手架项目问题总结（5）——vue的ref的使用
qq_38185872的博客
04-14 141
=vue的ref的使用==== ##、ref的使用以及说明 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： <div id="app"> <input type="text" ref="input1"/> <button @...
Vue脚手架的入门基础（三）—— 关于ref的使用
Biu_Destiny的博客
09-08 223
Vue脚手架的入门基础（三）—— 关于ref的使用 ref是Vue提供的一个用来替代id的东西 我们实现一个显示指定标签DOM的功能，先用平时的id标签属性来实现 然后我们用ref标签属性来解决这个问题 仔细看发现两个拿到的东西不一样了，id方法拿到的是渲染后的真实DOM内容，但是ref方法拿到的是HelloWorld这个VueComponent组件对象。 ...
mixin配置
qq_52200979的博客
04-20 227
如果两个组件要使用相同的方法或其他相同，则可以使用mixin 先创建一个js文件，然后将要相同的方法或功能写进去const xxx=...，在进行暴露，需要的组件用import进行引用，然后mixins:[“xxx”]就可以使用了 可以提高复用率 注意：如果混合里面有的，组件里也有，则使。用组件里的，如果组件没有，混合的也可以用。 有一个例外，就是生命周期勾子里，如mounted两边都使用的话，两边都用，且混合还先用。 也可以全局混合，在最终js文档里引用混合js文件，然后Vue.mixin[xxx
每日一学Vue脚手架中基础的ref属性与原生id区别
小淼淼的博客
09-21 2499
每日一学：Vue脚手架中基础的ref属性与原生id区别
VUE脚手架的下载和配置步骤详解
10-17
主要介绍了VUE脚手架下载和配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue mixin混入（混合）配置学习
最新发布
06-09
下面将详细探讨Vue mixin混入配置的学习，包括其工作原理、使用场景、优点以及如何在实际项目中应用。 **1. 工作原理** Vue mixin 混入允许开发者定义一组属性，包括选项如数据、方法、生命周期钩子等，然后这些...
Vue 2中ref属性的使用方法及注意事项
08-30
主要给大家介绍了关于Vue 2中ref属性的使用方法及注意事项的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
vue-cli3脚手架的配置及使用教程
10-18
Vue CLI 3 提供了一个交互式的项目脚手架，允许开发者自定义项目结构和所需功能，同时也提供了默认配置，使开发者能够快速开始开发，而无需花费大量时间进行配置。 Vue CLI 3 的核心特性包括： 1. **@vue/cli**：...
深入浅析Vue中mixin和extend的区别和使用场景
10-16
Vue中有两个较为高级的静态方法mixin和extend，接下来给大家介绍Vue中mixin和extend的区别和使用场景，感兴趣的朋友一起看看吧
详解vue2.0脚手架的webpack 配置文件分析
08-30
本篇文章主要介绍了详解vue2.0脚手架的webpack 配置文件分析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue混入的详解
热门推荐
关注最新技术问题并持续维护更新
05-30 1万+
简介     混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 局部混入 1. 钩子函数合并     同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子函数将在组件自身钩子函数之前调用 <body> <div id="app"&gt...
Vue (10) — 初始化脚手架、ref属性、配置项props
m0_59897687的博客
12-13 793
一、初始化脚手架 1.说明 (1).Vue 脚手架是Vue 官方提供的标准化开发工具（开发平台）。 (2).最新的版本是 4.x。 (3).文档: https://cli.vuejs.org/zh/ 。 2.具体步骤 第一步（仅第一次执行）：全局安装@vue/cli。 npm install -g @vue/cli 第二步：切换到你要创建项目...
vue.js ref属性使用
毛没齐的博客
07-29 4831
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象（根元素上）上 给text组件注册信息，text组件的信息将会传递给他根容器（&lt;div id="vue-app"&gt;）的$refs对象上 &lt;!--vue-app是根容器--&gt; &lt;div id="vue-app"&gt; &lt;input ty...
Vue脚手架
嘤嘤鸭的博客
11-28 256
vue脚手架
vue#实战#使用mixin配置分离
LYR 的博客
07-21 271
mixin用于定义一些常量，混入 mixin,就可以直接引用 mixin的常量和方法。
vuecli3 创建项目查看webpack的默认配置
dream_follower的博客
02-04 5779
vue cli3创建项目的时候把webpack的配置给隐藏起来了，如果想要修改webpack的默认配置，可以通过在项目的根目录下新建一个vue.config.js文件来修改默认配置，官方参考文档 但是今天我想看下它的默认配置是在哪里，在网上搜了好久也没有找到，后来终于找到了，这里记录一下在node_modules/@vue/cli-service/lib/config/base.js里面可以看到，...
关于webpack文件隐藏
zimiaoai的博客
08-04 2051
有时候通过脚手架创建项目时，脚手架会隐藏webpack的文件配置，因此用npm run eject可以让隐藏的配置文件重现显示出来，不过在使用这个指令前最好先做一下备份或者先托管代码，防止指令报错，导致项目出现问题。 在此记录一下这个功能 ...
尚硅谷vue笔记·····
11-10
本篇笔记主要介绍了Vue框架中的一些关键知识点，包括ref属性、配置项props、mixin（混合/注入）和插件的使用。 **ref属性** ref属性在Vue中扮演了动态引用元素或组件的重要角色，类似于HTML中的id，但它可以用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值