写点东西：《vue.js边学边写》

MR_Bone

已于 2022-10-10 10:04:49 修改

阅读量203

点赞数

分类专栏：写点东西 javascript vue 文章标签： vue 组件 components

于 2019-12-04 14:19:57 首次发布

本文链接：https://blog.csdn.net/l316278750/article/details/103385227

版权

写点东西同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

最近在学习vue.js，记性不好，边学边写，边记录。

属性

components： 用来在页面声明引入的组件，以方便以标签的形式引用（个人归纳定义，欢迎指正）
用法：
1. 引入组件import vHead from "@/components/head.vue";
2. 注册组件components: {vHead,...,...}
3. 在<template>中使用<v-head></v-head>(注意：vHead => <v-head>)

//--head.vue
<template>
  <div id="head">{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: "测试头"
    };
  }
};
</script>

<style></style>

//--引用head组件
<template>
  <v-head></v-head>
</template>

<script>
//@对应src路径
import vHead from "@/components/head.vue";

export default {
  name: "head",
  //vHead对应标签<v-head></v-head>
  components: {
    vHead
  }
};
</script>

Vue Router三步走：

注册组件
注入路由
跳转路由
参考：https://router.vuejs.org/zh/guide/#javascript

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

跳转方式：

参考：https://www.jb51.net/article/183611.htm

vue官网访问慢：

参考:(亲测有效)https://blog.csdn.net/qq_38420688/article/details/89684838

未采用构建流程

基本挂载：

<html>
	<body>
		<div id="app">{{ message }}</div>
		<script type="module">
		  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
		  
		  createApp({
		    data() {
		      return {
		        message: 'Hello Vue!'
		      }
		    }
		  }).mount('#app')
		</script>
	</body>
</html>