Vue：默认的App.vue

基础脚手架生成的Vue项目

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    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>

App.vue本质上也是一个js文件，相当于一个模板文件（描述一个组件）。主要包括三个部分模板（结构）、脚本文件、样式

模板（结构）：<template></template> template内容相当于MVVM中的V——视图层

• 只能有一个入口！🏀🏀即最外层只能有一个div🏀🏀

• 在唯一入口之中可以放其他的东西

• 代码中的<HelloWorld>其实是一个组件
  引入组件三部曲：
  ① 引入组件
  

  ② 注册组件——在components中注册组件
  

  ③标签化使用
  

• HelloWorld——组件举例
  
  ① export中name是对外声明组件名称
  ② style中scoped是控制样式只在该组件中起作用

脚本文件 ： <script></script> script标签内容相当于MVVM中的VM——数据绑定交互

所有的东西基本都在export default中，以钩子的形式呈现，在这之中实现数据绑定以及事件处理。

• name：声明组件名称
• data：在二级组建中，都是以函数的形式呈现。数据在函数中以返回值形式返回。
  
  data中返回的值相当于MVVM中的M——存储传递数据
  数据绑定的实现
  在<template></template>标签中，使用双大括号{{}}来获取数据，并实现自动化处理
  
  数据双向绑定——使用v-model
  进行双向绑定后，在input标签内输入内容，会自动更改msg内容，同时上面标签内容也会自动更改
  切记：🥎🥎双向绑定仅仅是一种高级语法糖，数据流传递还是单向的。🥎🥎

样式文件 ： <style></style>