Vue起步基础操做

1、Vue环境搭建

1.一、首先创立Vue项目

vue init webpack-simple vuedemo01

 

1.二、cd进入建立的vue文件夹内

cd vuedemo01

1.三、安装moudels

npm install 或使用淘宝镜像cnpm install

 

1.四、运行vue服务器

npm run dev

1.五、vue环境搭建成功

Vue搭建的服务器跑起来之后，会自动打开系统默认浏览器显示网站内容

2、编辑Vue

在编译器中，打开以前建立好的Vue文件夹

这里我用的是VScode编译器，能够自行下载有关Vue的插件

以后咱们主要作编辑的是根目录下src文件夹内的App.vue文件

默认这里是编辑的Vue首页（即npm run dev以后运行的页面所显示内容）

2.1 HTML部分编译

大致上的编辑和普通html没有差距，可是这里的全部显示内容（HTML部分）编辑应该在"template"标签下的"div"标签内进行编辑。

同理，若是我将标签内容换一下：

 

我将div内内容改变以后，网页浏览器同步刷新，无需手动刷新。（效果以下）

2.2 Javascript内容编辑

Vue的JS编辑，最简单的是以下的结构

 

 

"data()"方法内"return"中的既是返回的数据。能够在HTML部分接收（接收方式以下）

这里成功接收到msg传来的数据

 

2.3 style属性

默认为run出来的vue的样式，能够删除编辑本身的属性

显示效果以下：