版权声明:本文为博主原创学习笔记,如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/85260323
接下来Vue的学习尽量在Vue脚手架项目中来学习,而不是像之前那样使用cdn的方式了。
使用treer生成项目结构
使用tree >> tree.txt
可以将目录结构(不含文件)导出到名为tree的txt文件中,但是Windows下的tree命令实在太差,竟然没有-I
参数来指定要忽略的文件,这里使用treer。用npm全局安装它:
npm install treer -g
安装好后,在项目目录下:
treer -i "node_modules" >> tree.txt
稍做调整即可。
第一个Vue脚手架项目
Vue的项目结构详解不再赘述,在网上有很多写的很好的。这里修改一下根组件App.vue
中的内容:
<!--(1)模板:HTML结构.这里用template包起来(不会渲染template)-->
<template>
<!--有且只能有一个根标签-->
<div id="app">
<h2>{{title}}</h2>
</div>
</template>
<!--(2)行为:处理逻辑-->
<script>
export default {
name: 'App',
//在这里注册导入的组件
components: {},
data() {
return {
title: "这是data中的title的内容"
}
}
}
</script>
<!--(3)样式-->
<style>
#app {
}
</style>
可以看到一个Vue组件是以.vue
结尾的文件,其中包括模板、行为、样式三部分。在刚创建好的项目中,这个根组件会去调用一个HelloWorld组件来实现整个页面,这里将这部分调用删掉了。
使用npm run dev
运行一下,在页面上可以看到:
组件嵌套
Users.vue
在components组件目录下创建这样一个新的组件。
<template>
<!--class名字用组件名全小写-->
<div class="users">
<ul>
<li v-for="user in users">{{user}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Users",
data() {
return {
users: ["lzh1", "lzh2", "lzh3"]
}
}
}
</script>
<style scoped>
</style>
App.vue
当使用局部注册组件时,在要导入它的组件(这里就是根组件)里将它导入并注册,然后用标签的形式使用即可。
<!--(1)模板:HTML结构.这里用template包起来(不会渲染template)-->
<template>
<!--有且只能有一个根标签-->
<div id="app">
<h2>{{title}}</h2>
<users></users>
</div>
</template>
<!--(2)行为:处理逻辑-->
<script>
//导入要用的其它组件
import Users from './components/Users'
export default {
name: 'App',
//在这里注册局部导入的组件
components: {
// "users": Users
//可以省略掉前面的"users",则组件的标签默认就是其小写形式
Users
},
data() {
return {
title: "这是data中的title的内容"
}
}
}
</script>
<!--(3)样式-->
<style>
#app {
}
</style>
运行结果
全局注册组件
另外一种方式(用的很少)是将要使用的组件注册为全局的,这要在main.js
中注册,见下面第5行和第11行:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Users from './components/Users'
Vue.config.productionTip = false;
//注册全局的Vue组件
//当调用<users/>这样的标签时就会执行导入的Users组件
Vue.component("users", Users);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: {App},
template: '<App/>'
});
// index.html -> Vue.js -> App.vue
当以这种方式将组件注册为全局了以后,在使用时就不需要再将其导入和注册了,只要直接使用这个组件的标签就可以了。
注意组件标签不要冲突,也不要和HTML本身的标签有冲突,组件标签一般用组件名的全小写。