目录
- 一、初始化脚手架
- 二、脚手架文件结构
- 三、ref 属性 与 props 配置
- 1. ref 属性
- 2. props 配置
一、初始化脚手架
说明
Vue 脚手架是 Vue 官方提供的标准化开发工具 (开发平台)。 其最新的版本是 4.x。官方文档: https://cli.vuejs.org/zh/。
具体步骤
第一步(仅第一次执行):
全局安装 @vue/cli
npm install -g @vue/cli
终端命令执行完成之后,通过以下命令检查vue脚手架(vue/cli)是否安装完成以及查看版本号。
第二步:
切换到你要创建项目的目录,然后使用命令创建项目
vue create xxxx
第三步:
启动项目
切换到项目录,执行下面指令
npm run serve
备注 :
1.如出现下载缓慢请配置 npm 淘宝镜像:npm config set registry https://registry.npm.taobao.org
2.Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpack 配置,请执行:vue inspect > output.js
二、脚手架文件结构
├── 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:包版本控制文件
关于不同版本的 Vue
vue.js 与 vue.runtime.xxx.js 的区别:
- vue.js 是完整版的 Vue,包含:核心功能 + 模板解析器。
- vue.runtime.xxx.js 是运行版的 Vue,只包含核心功能,没有模板解析器。
因为 vue.runtime.xxx.js 没有模板解析器,所以不能使用 template 这个配置项,需要使用 render 函数接收到的 createElement 函数去指定具体内容。
vue 脚手架默认创建的是 vue.runtime.xxx.js 完整版的文件太大了
三、ref 属性 与 props 配置
1. ref 属性
首先 ref 的引用是相当于一个 DOM 节点(如果是子组件则指向的是其实例),而且是一个 string 类型的值。 通俗的将就类似于原生 js 用
document.getElementById("#id")
。
但是只是类似,他们的不同点是Vue是操控虚拟DOM ,也就是说在渲染初期并没有这个 ref 的属性,这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将 ref 的结果在模版中进行数据绑定。
其作用就是用于给节点打标识,引用方式:this.$refs.xxxxxx
举例
components 中,定义 School.vue
<template>
<div class="school">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'青岛大学',
address:'青岛'
}
},
}
</script>
<style>
.school{
background-color: gray;
}
</style>
App.vue 中引用 School 组件
<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>
main.js 中
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App)
})
2. props 配置
props 可以是数组或对象,用于接收来自父组件的数据。 props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。其用于父组件给子组件传递数据。
举例:
<template>
<div>
<h1>{{msg}}</h1>
<h2>学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
<h2>学生年龄:{{myAge+1}}</h2>
<button @click="updateAge">尝试修改收到的年龄</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
console.log(this)
return {
msg:'我是一个青岛大学的学生',
myAge:this.age
}
},
methods: {
updateAge(){
this.myAge++
}
},
//简单声明接收
// props:['name','age','sex']
//接收的同时对数据进行类型限制
/* props:{
name:String,
age:Number,
sex:String
} */
//接收的同时对数据:进行类型限制+默认值的指定+必要性的限制
props:{
name:{
type:String, //name的类型是字符串
required:true, //name是必要的
},
age:{
type:Number,
default:99 //默认值
},
sex:{
type:String,
required:true
}
}
}
</script>
读取方式
读取方式一 : 只指定名称
props: ['name', 'age', 'setName']
读取方式二 : 指定名称和类型
props: { name: String, age: Number, setNmae: Function }
读取方式三: 指定名称/类型/必要性/默认值
props: { name: {type: String, required: true, default:xxx}, }