vue.js学习记录(二):组件的引用
1,项目目录说明:
2,首页入口页面:index.html
这里没有多少html代码,主要看这行:<div id="app"></div>,这里会指定元素初始化Vue对象,并引入需要的模板组件。
3,引用方法需要看主入口方法,main.js:
4,查看App.vue的语法定义。
4.1,html写在template标签内:<template></template>
4.2,脚本使用模板化方式:export default {}
4.3,引入其他插件或组件,使用import:import Hello1 from './components/HelloWorld'
4.4,引入组件的标签不区分大小写,且短横线也能识别。例如:以下写法都可识别。
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld></HelloWorld>
<hello-World></hello-World>
<hello-world></hello-world>
<Hello-World></Hello-World>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
'HelloWorld': HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5,查看HelloWorld.vue的语法定义,同App.vue是一样的。开发时只需要写不同的模板组件即可。
6,使用路由的方式引入组件。
6.1,将<Hello1></Hello1>替换成<router-view></router-view>(路由匹配到的组件将渲染在这里,默认找到第一个根目录路由)
6.2,引入路由:vue-router.js,配置组件路由。
6.3,使用路由链接跳转。
起个昵称都那么难: 你做一个/public的接口 你会发现也会被权限拦截到..
征途黯然.: 图文并茂请解的很清晰透彻,支持优质好文
CSDN-Ada助手: 推荐 Java 技能树:https://edu.csdn.net/skill/java?utm_source=AI_act_java
aa_yii: 楼主棒棒
weixin_44175476: 能不能给完整的代码