Vue脚手架的开始，项目目录，绑定文本、属性、事件

安装

首先需要安装好NPM，然后使用下列的命令一次进行
npm install -g @vue/cli //安装脚手架
vue create xx //创建Vue项目,xx为要创建的项目名
创建项目后，使用 cd 进入目录
npm run serve //启动项目

目录

Pubulic：静态文件
src：我们开发Vue大多数文件都放在里面
package.json：记录Vue项目的所有依赖。

我们的npm run serve命令就是在该文件的script中定义的

main.js 用于引入三方模块

一个单文件组件中分为三个部分

开写：绑定文本 {}

我们直接在App.vue文件中写个Hello world

一定要注意，template中只能暴露一个标签（Vue2中）

<template>   <div id="app">     <h1>{{message}}</h1>   </div> </template> 

在script标签中，进行暴露

export default {   data() {     return{       message:'hello Vue!'     }   } } 

然后页面可正常展示内容了

绑定属性 v-bind(简写 : )，绑定事件 v-on(简写@)

事件的相关函数写在 methods中

<template>   <div id="app">     <h1 :title="message">{{message}}</h1>     <button @click="sayHi">sayHi</button>   </div> </template>  <script> export default {   data() {     return{       message:'hello Vue!'     }   },   methods: {     sayHi() {       alert("Hi!")     }   } } </script> 

然后我们点击按钮就会完场相应的事件，title属性也会显示meassage变量的值