Vue2-配置脚手架、分析脚手架、render函数、ref属性、props配置项、mixin配置项、scoped样式、插件

🥔:总有一段付出了没有回报的日子 是在扎根

更多Vue知识请点击——Vue.js

VUE2-Day6

    • 配置脚手架
    • 脚手架结构
    • render函数
      • vue.js与vue.runtime.xxx.js的区别
      • 引入render函数
      • 为什么要引入残缺的vue呢？
    • 脚手架默认配置
    • ref属性
    • props配置项
      • 传递数据
      • 接收数据
      • 注意点
    • mixin配置项
      • 1、定义混合
      • 2、使用混合
    • 插件
      • 定义插件
      • 使用插件`Vue.use()`
    • scoped样式

配置脚手架

Vue CLI（Vue Command Line Interface）Vue脚手架，Vue官方提供的标准化开发工具（开发平台）

安装node.js——可以查看此教程

第一步：输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站，全局安装@vue/cil ，命令行输入npm install -g @vue/cli。命令行输入vue，不报错及安装成功

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

第三步：进入新建的name项目文件目录中，输入命令：npm run serve
得到的第一个url即是你的内置服务器，第二个是同局域网的其他人可以使用

脚手架配置完毕请添加图片描述

如果要停止工程:连按两次Ctrl+C即可。

脚手架结构

├── 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：包版本控制文件

其中

  • main.js
// 该文件是整个项目的入口文件//引入Vue
import Vue from "vue";
//引入App组件,它是所有组件的父组件
import App from "./App.vue";// 关闭vue的生产提示
Vue.config.productionTip = false;//创建Vue实例对象:vm
new Vue({//render的中文意思是渲染render: (h) => h(App),
}).$mount("#app"); //此处相当于el:"#app"，在上节讲过
  • 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 workproperly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body>
</html>

render函数

如果使用ES6的模块化引入Vue，那么默认引入的vue.runtime.esm.js，其中esm是ES6 module简写

如果我们使用之前的方法：

// 该文件是整个项目的入口文件//引入Vue（精简版）
import Vue from 'vue'
//引入App组件,它是所有组件的父组件
import App from './App.vue'// 关闭vue的生产提示
Vue.config.productionTip = false//创建Vue实例对象:vm
new Vue({el: "#root",template: `<App></App>`,components: { App },
});

此时控制台会报错，错误信息显示残缺了模板解析器，建议我们使用render函数或者使用完整版Vue：

请添加图片描述

同时也意味着我们在这一行代码import Vue from 'vue'引入的vue是残缺版（精简版）的，它残缺了模板解析器，因此不能解析template。

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

（1）vue.js是完整版的Vue，包含：核心功能+模板解析器
（2）vue.runtime.xxx.js是运行版(残缺版)的Vue，只包含：核心功能，没有模板解析器。

因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。为什么其他的.vue文件里写template标签就行呢？那是因为template写的是标签，而且在组件里，鱿鱼西专门儿又搞了个库去专门解析组件里的模板。

引入render函数

//引入Vue
import Vue from 'vue'
//引入App组件,它是所有组件的父组件
import App from './App.vue'//创建Vue实例对象:vm
new Vue({el: '#app',//render的中文意思是渲染render: h => h(App),
})

render中文意思是渲染，render函数其实就扮演了vue中解析template模板的那块儿代码，把组件的内容解析一下，渲染到页面上。

（1）正常的render函数：

 render: function (createElement) {// console.log(typeof createElement);  //createElement是一个函数return createElement(App);//return createElement('h1','你好啊');}

（2）render函数写成箭头函数：

render: h => h(app)

为什么要引入残缺的vue呢？

vue.js是完整版的Vue，由核心和模板解析器组成。但是模板解析器占用的内存太大（占三分之一vue），开发完成后并不需要模板解析器。（模板解析器就像雇的贴瓷砖的工人，工人干完活儿就可以离开了，瓷砖就是那个Vue核心，就一直在那待着了）

脚手架默认配置

vue.config.js配置文件

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

ref属性

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

<template><div><h1 v-text="msg" ref="title"></h1><button @click="showDOM" ref="btn">点我输出上方DOM元素</button><School ref="sch" id="school" /></div>
</template><script>
import School from './components/School.vue'
export default {name: 'App',data() {return {msg: '欢迎学习Vue',}},components: { School },methods: {showDOM() {//输出真实DOM元素console.log(this.$refs.title)console.log(this.$refs.btn)//输出组件实例对象vcconsole.log(this.$refs.sch)//如果这么写，拿到的是School组件里template中的内容，相当于给根的div加了个id="school"console.log(document.getElementById('school'))},},
}
</script>

请添加图片描述

props配置项

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

传递数据

App.vue:

<template><div><!-- 传递数据 --><!-- 加个单项数据绑定":"，引号里面就不是字符串了，而是表达式了 --><Student name="potato" sex="女" :age="18" /><Student name="tomato" sex="女" /></div>
</template><script>
import Student from './components/Student.vue'
export default {name: 'App',data() {return {}},components: { Student },
}
</script>

注意点：age="18"和:age="18"是不一样的，加了个“:”相当于加了个单向数据绑定。没加数据绑定时，无论双引号里面写什么，都被认为是字符串；加了数据绑定后，双引号里面的就是js表达式。

接收数据

接收数据有多种方式，如：

  • 简单接收，用的比较多
  • 接收的同时对数据类型进行限制
  • 接收的同时对数据：进行类型限制+默认值指定+必要性限制

例：

Student.vue:

<template><div class="student"><h1>{{ msg }}</h1><h2>学生姓名：{{ name }}</h2><h2>学生性别：{{ sex }}</h2><h2>学生年龄：{{ age }}</h2></div>
</template><script>
export default {name: 'Student',data() {return {msg: '我是一个学生',}},//1、简单接收// props: ['name', 'sex', 'age'],//2、接收的同时对数据类型进行限制// props:{//   name:String,//   age:Number,//   sex:String// }//3、接收的同时对数据：进行类型限制+默认值指定+必要性限制props: {name: {type: String, //name的类型是字符串required: true, //name是必要的},age: {type: Number,default: 99, //默认值为99},sex: {type: String,required: true,},},
}
</script><style>
.student {background-color: skyblue;
}
</style>

注意点

1、在传递数据的时候如果想实现正确收取数值数据，并且不想把props写那么复杂，可以加个v-bind:age=“18”，这样的话引号里边就不会是字符串了，而是当成js表达式执行，返回的结果就是数值

2、props中的内容优先级最高，先接这里边的数据放vc里，再去读data里的数据，若data中数据有重复则优先使用props中的数据，不会覆盖

3、props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告（能修改成功但是不建议改）。

若业务需求确实需要修改，那么请复制props的内容到data中一份（data中新建个名字），然后去修改data中的数据，同时把data中的东西呈现到页面上去，具体看下边的代码

<template><div><h1>{{ msg }}</h1><h2>学生名称：{{ name }}</h2><h2>学生性别：{{ sex }}</h2><!-- 实现年龄+1 要加v-bind把引号里的东西变成js表达式，否则是字符串+1--><!-- <h2>学生年龄：{{ age*1+1 }}</h2> 强制类型转换一下--><h2>学生年龄age：{{ age + 1 }}</h2><h2>学生年龄myAge：{{ myAge + 1 }}</h2><button @click="updateAge">尝试修改收到的年龄</button></div>
</template><script>
export default {name: 'Student',data() {return {msg: '我是一个学生',//想要修改age，就要用一个新的变量myAge来接收传进来的值//然后页面显示myAge就能实现修改，props里的东西是只读的myAge: this.age// name: 'potato',// age: 18,// sex: '女'}},methods: {updateAge() {// this.age++;  //会报错但是能改但是不建议改this.myAge++;}},//props这个配置项就类似微信转账，App那边的标签里传过来，这边得接一下子//props中的内容优先级最高，先接这边的数据放vc里，再去读data，若有重复不会覆盖props: ['name', 'age', 'sex']
}
</script>

mixin配置项

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

1、定义混合

定义在另一个js文件中，这里定义在mixin.js中

export const hunhe = {methods: {showName() {alert(this.name)},},mounted() {console.log('混合里的mounted优先调用')},
}

2、使用混合

全局混入：在main.js里写Vue.mixin(xxx)，全局混合不用引入，自动就搞到所有东西上了
局部混入：先在相应的组件引入，然后mixins:['xxx']

<template><div class="student"><h1>{{ msg }}</h1><h2>学生姓名：{{ name }}</h2><h2>学生性别：{{ sex }}</h2><h2>学生年龄：{{ age }}</h2><button @click="showName">点我显示学生姓名</button></div>
</template><script>
// 引入一个mixin（混合）
import { hunhe } from '../mixin'
export default {name: 'Student',data() {return {name: 'potato',sex: '女',age: 18,msg: '我是一个学生',}},// 使用mixinmixins: [hunhe],mounted() {console.log('组件里单独写mounted比mixin中的mounted后调用')},
}
</script><style>
.student {background-color: pink;
}
</style>

注意：
1、混合里的mounted优先调用，组件里单独写mounted比mixin中的mounted后调用
2、组件里原来有的数据，在混合中写不会覆盖原数据；组件里原来没有的数据，混合中写会添加过去和原数据合并

插件

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

定义插件

可以在另一个js中（这里在plugins.js）配置插件，然后通过import引入到main.js中

// 只有一个，直接默认
export default {install(Vue, x, y, z) {console.log(Vue) //第一个参数是Vue构造函数console.log(x, y, z) //后面的参数是使用者传进来的东西123//1.定义一个全局过滤器Vue.filter('mySlice', function (val) {return val.slice(0, 4) //返回值别忘了})//2.定义一个全局自定义指令,元素默认获取焦点Vue.directive('fbind', {bind(el, binding) {el.value = binding.value},inserted(el) {el.focus()},update(el, binding) {el.value = binding.value},})//3.定义一个全局混合,不用引入就能给所有的vm和vcVue.mixin({data() {return {x: 1,y: 2,}},})//4.给Vue的原型对象添加实例方法，vm和vc都能用Vue.prototype.hello = () => {alert('hello!')}},
}
  • 注：关于这里的过滤器、自定义指令、原型等知识可以倒回之前的文章复习——vue.js

使用插件Vue.use()

use的作用就是帮忙调用插件对象中的install方法，而且还可以传一些参数给install函数。

//在main.js中引入插件并起个名儿
import plugins from './plugins';
//使用插件,要在new Vue之前使用
Vue.use(plugins, 1, 2, 3);

scoped样式

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

写法：<style scoped>

注意：App.vue的样式一般不写scoped，因为App.vue里面样式一般是所有组件都可以使用的。

指定使用 less写法：<style lang="less">，不写默认css

备注：
查看webpack所有版本 当前项目文件目录>npm view webpack versions

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/68467.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【设计模式】工厂模式

【设计模式】工厂模式

工厂模式 工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 工厂模式提供了一种将对象的实例化过程封装在工厂类中的方式。通过使用工厂模式&#xff0c;可以…
阅读更多...
电脑如何快速查看系统中的驱动是否安装

电脑如何快速查看系统中的驱动是否安装

第一步&#xff1a;winR 打开运行命令窗口 第二步输入&#xff1a;在打开输入框中输入driverquery&#xff0c;点击确定或按下回车键&#xff0c;命令行页面列出本机相关驱动信息。 1、driverquery 驱动查询 2、driverquery /V 驱动程序查询/ V
阅读更多...
高等数学 | 微分方程解决单中值问题、高阶导数的莱布尼兹公式

高等数学 | 微分方程解决单中值问题、高阶导数的莱布尼兹公式

单中值问题都可以用通过求解微分方程的特解构造辅助函数&#xff0c;再用罗尔定理即可。 高阶导数的莱布尼兹公式推导以及应用&#xff0c;先求导至能够发现某次求导开始为0的时候&#xff0c;对其使用莱布尼兹公式。
阅读更多...
R语言实现随机生存森林（2）

R语言实现随机生存森林（2）

library(survival) library(randomForestSRC) help(package"randomForestSRC") #构建普通的随机生存森林 data(cancer,package"survival") lung$status<-lung$status-1 rfsrc.fit1 <- rfsrc(Surv(time, status) ~ ., lung,ntree 100,block.size 1,…
阅读更多...
.NET6使用SqlSugar操作数据库

.NET6使用SqlSugar操作数据库

1.//首先引入SqlSugarCore包 2.//新建SqlsugarSetup类 public static class SqlsugarSetup{public static void AddSqlsugarSetup(this IServiceCollection services, IConfiguration configuration,string dbName "ConnectString"){SqlSugarScope sqlSugar new Sq…
阅读更多...
【第三阶段】kotlin语言中的先决条件函数

【第三阶段】kotlin语言中的先决条件函数

用于函数内部判断异常&#xff0c;节省开发 1.checkNotNull&#xff08;&#xff09;如果传入为null则抛出异常 fun main() {var name:String?nullcheckNotNull(name) }执行结果 2.requireNotNull ()如果传入为null则抛出异常 fun main() {var name:String?nullrequireNot…
阅读更多...
RocketMQ Learning(二)

RocketMQ Learning(二)

目录 一、RocketMQ 1、顺序消息 2、延时消息 3、批量消息 批量切分发送 4、消息的过滤 Tag过滤 Sql过滤 5、分布式事务消息 6、Request-Reply消息 7、死信队列 一、RocketMQ 1、顺序消息 消息有序指的是可以按照消息的发送顺序来消费(FIFO)。RocketMQ可以严格的保证…
阅读更多...
自定义注解（Annontation）

自定义注解（Annontation）

目录 1.注解定义 2.元注解定义 3. 自定义注解&#xff08;自定义的注解名称相同的会覆盖原注解&#xff09; 4.Annotation架构&#xff08;元注解参数介绍&#xff09; 1.注解定义 注解是用来将任何的信息或元数据&#xff08;metadata&#xff09;与程序元素&#xff08;类…
阅读更多...
ubuntu 如何命令行打开系统设置(Wifi,网络,应用程序...)

ubuntu 如何命令行打开系统设置(Wifi,网络,应用程序...)

关于GNOME GNOME 是一个自由、开放源代码的桌面环境&#xff0c;它运行在 Linux 和其他类 UNIX 操作系统上。它是 GNU 项目的一部分&#xff0c;旨在为 Linux 操作系统提供一个现代化、易于使用的用户界面。 GNOME 桌面环境包括许多应用程序&#xff0c;例如文件管理器、文本编…
阅读更多...
Redis数据结构——链表list

Redis数据结构——链表list

链表是一种常用的数据结构&#xff0c;提供了顺序访问的方式&#xff0c;而且高效地增删操作。 Redis中广泛使用了链表&#xff0c;例如&#xff1a;列表的底层实现之一就是链表。 在Redis中&#xff0c;链表分为两部分&#xff1a;链表信息 链表节点。 链表节点用来表示链表…
阅读更多...
git 配置网络代理

git 配置网络代理

提高 git 访问 github 速度 网络代理前提: 请开启代理&#xff08;梯子&#xff09;检查代理端口&#xff08;可能会有所不同&#xff09; 文章目录 1. git 配置参数列表命令&#xff1a;2. git 添加 http 代理3. git 取消 http 代理 1. git 配置参数列表命令&#xff1a; gi…
阅读更多...
轻量级 Spring Task 任务调度可视化管理

轻量级 Spring Task 任务调度可视化管理

Spring Task/Spring Scheduler 傻傻分不清 首先做一下“名词解释”&#xff0c;分清楚这两者的区别&#xff1a; Spring Task Spring Task 是 Spring 框架自带的一个任务调度模块&#xff0c;提供了基本的任务调度功能。它是通过 Java 的 Timer 和 TimerTask 类来实现的&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023