目录
Vue脚手架(Command Line Interface)是Vue官方提供的标准化开发工具(开发平台)。
使用脚手架:
一、全局安装
(切换到淘宝镜像 npm config set registry https://registry.npm.taobao.org)
npm install -g @vue/cli
二、切换到要创建项目的目录,然后使用命令创建目录
vue create xxx
三、启动项目
npm run serve
把之前写好的组件放入src/components文件夹,用之前写好的App.vue将脚手架生成的App.vue替换掉,在项目目录下的终端运行npm run serve命令就可以运行项目了。
vue.config.js配置文件:
运行vue inspect > output.js可以查看到Vue脚手架的默认配置;使用vue.config.js可以对脚手架进行个性化定制,详见https://cli.vuejs.org/zh
main.js
// 该文件是整个项目的入口文件
// 引入Vue
import Vue from 'vue'
// 引入App组件,它是所有组件的父组件
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
el:'#app',
// 将App组件放入容器中
render:h=>h(App)
})
App.vue
<template>
<div>
<SchoolName></SchoolName>
</div>
</template>
<script>
// 引入组件
import SchoolName from "./components/SchoolName.vue";
export default {
name:'App',
components:{
SchoolName
}
}
</script>
<style>
</style>
SchoolName.vue(注意使用双驼峰命名,只一个单词首字母大写会报错)
// 快捷生成主要结构:下载Vetur,键入“<v"
<template>
<!-- 组件的结构 -->
<div class="school">
<h2>学校:{
{schoolName}}</h2>
<h2>地址:{
{address}}</h2>
</div>
</template>
<script>
// 组件交互相关的代码
// export const school=Vue.extend({ //分别暴露
// export default Vue.extend({ //默认暴露也可以这样写
// const school=Vue.extend({
export default{
name:'SchoolName', //最好与文件名保持一致
data(){
return {
schoolName:'hzy',
address:'LongZiHu',
}
},
}
// });
// export{school}; //统一暴露
// export default school; //通常采用默认暴露
</script>
<style>
/* 组件的样式 */
.school{
background-color: aliceblue;
}
</style>
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>
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函数去指定具体内容。
ref属性:
1.被用来给元素或子组件注册引用信息(id的替代者)。
2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象。
3.使用方式:标签体内:<h1 ref=”xxx”>...</h1>或<School ref=”xxx”’></School> 获取:this.$refs.xxx
<template>
<div>
<SchoolName ref="schoolname"></SchoolName>
<h1 v-text="msg" ref="school"></h1>
<button @click="showDom">输出上方DOM元素</button>
</div>
</template>
<script>
// 引入组件
import SchoolName from "./components/SchoolName.vue";
export default {
name:'App',
data() {
return {
msg:'河南中医药大学'
}
},
components:{
SchoolName
},
methods: {
showDom(){
console.log(this.$refs.school);//真实DOM元素
// <h1>河南中医药大学</h1>
console.log(this.$refs.schoolname);//SchoolName组件的实例对象
// VueComponent {_uid: 2, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …}
}
},
}
</script>
<style>
</style>
配置项props:
用于让组件接收外部传过来的数据(父传子);props是只读的,Vue底层会监测对props的修改,如果进行了修改,就会发出警告。
1.传递数据:<Demo name=”xx”/>
2.接收数据:
(1)只接收:props:[‘name’]
(2)限制类型:props:{name:Number}
(3)限制类型、限制必要性、指定默认值:props:{ name:{type:String, require:true, default:'tml'}
StudentName.vue
<template>
<div class="student">
<h2>姓名:{
{name}}</h2>
<h2>住址:{
{address}}</h2>
<h2>年龄:{
{myAge+1}}</h2>
<button @click="updateAge">修改接收到的年龄</button>
</div>
</template>
<script>
export default{
name:'StudentName',
data(){
return {
myAge:this.age
}
},
// props:['address','name','age'],//简单接收
// props:{//接收的同时对数据进行类型限制
// name:String,
// address:String,
// age:Number
// },
props:{ //接收的同时可以对数据进行类型限制、指定默认值、限制必要性
name:{
type:String,
require:true //必传
},
address:{
type:Strin