Vue学习-基础篇4

最新推荐文章于 2023-07-27 16:17:36 发布

钟bug

最新推荐文章于 2023-07-27 16:17:36 发布

阅读量1.5k

点赞数

文章标签：学习 vue.js

本文链接：https://blog.youkuaiyun.com/zgt15679799695/article/details/125067577

版权

本文详细介绍了Vue.js的基础知识，包括组件结构、组件间通信、Vue-cli项目创建及入口文件main.js分析。讲解了如何在组件中引入其他组件、使用外部插件，以及父组件如何向子组件传递值。同时，还阐述了Vue-cli脚手架的作用和创建项目的过程，帮助读者深入理解Vue.js的开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue-cli 入口文件main.js分析

组件结构讲解

把每个组件都放到一个独立的.vue文件里，
文件的后缀是：.vue 文件
此文件三大部分： template 、 script 、 style
template
- 写html结构的
- 注意这里的html部分必须用一个标签全包住
script
- 写逻辑的，data、methods、生命周期钩子、计算属性等等代码都写在这个部分
- 注意这里的data不再是一个对象，在组件里，data将会是一个函数,return一个对象。
style
- 写样式的
- 如何导入外部css,
  - 在css中的导入(主体使用)：
```
 @import url(./babel.css);
```
快捷键快速生成： <vue>
单文件组件的运行

在cmd窗口该vue文件根目录下输入vue serve index.vue 这里index.vue是需要运行的单文件组件的路径
```
vue serve index.vue     
```
注意点
- template里面的html部分必须用一个标签全包住
- 组件里没有el，组件是无需挂载到哪的，里面已经有template是它的使用的html了
- data在组件里面是一个function,return 一个对象

<template>
  <!-- 组件html区域 
  在组件里面的html都必须有一个独立的标签包住所有标签
  -->
  <div>
    <button>按钮</button>
    <button>{
   {msg}}</button>
  </div>
</template>

<script>
export default {
  // 不再需要el去确定使用范围
  // 组件 里面的data将是一个函数 return一个对象
  //data:function(){return {}}
  data() {
    return {
      msg: "hello"
    };
  },
  methods: {
    alertEvent(value) {
      alert(value);
    }
  },
  created() {
      //这里面语法检测比较严格，直接写console会报错
    window.console.log(this);
    // this.alertEvent(123);
  }
};
</script>

<style>
/* 如果需要引入 外部css 
在css中的导入：
 @import url(./babel.css);
 在js中的导入
 import "./babel.css"
*/
/* @import url(./babel.css); */
@import "./babel.css";
button {
  width: 100px;
}
</style>