Vue学习

什么是vue

Vue (发音为 /vjuː/，也用人按照三个单词读) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

不会创建vue的同学可以去：http://t.csdn.cn/R9Z9E

打开源码文件夹（src），可以看见components和App.vue还有main.js

 其中components中放的就是组件，App.vue一般作为根组件，main.js是创建根组件的实例

首先看main.js

import './assets/main.css'           //整个组件的css样式，一般会将其去掉

import { createApp } from 'vue'      //引入createApp组件
import App from './App.vue'          //引入App.vue组件

// createApp(App).mount('#app')     
//建议改写成
const app=createApp(App)             //将App.vue作为根组件
app.mount('#app')                    //调用mount方法，App.vue被成功渲染

由于浏览器不能识别.vue文件，所以需要将其嵌入到.html文件中，让浏览器识别

app.mount('#app')  中的#app,是index.html中div的id,将根组件放到html页面中

 

 为了方便开发我将App.vue改成如下样式

<template>
 <!-- 我是放显示内容的 -->
</template>

<script>
// 我是写js代码的
</script>

<style scoped>  
/* 我是写样式的 */
</style>

style标签中的scoped表示此样式只在当前组件有效