Vue入门一 一、环境搭建
对于中国大陆用户，建议将 npm 源设置为国内的镜像，可以大幅提升安装速度。
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm最新稳定版安装
cnpm install vue命令行工具(CLI)安装
cnpm install -g vue-cli注意：新版本Vue CLI3安装方法不同
二、关于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 下面命令进行卸载后安装。
npm uninstall vue-cli -g或者
yarn global remove vue-cli可以使用下列任一命令安装这个新的包
npm install -g @vue/cli或者
yarn global add @vue/cli
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确 (3.x)：
vue --version 三、初始化项目
初始化项目
vue init webpack demo初始化项目说明：
Project name --项目名称 Project description --项目描述 Author --作者 Install vue-router? No --是否安装router路由 Use ESLint to lint your code? No --是否安装代码格式检测工具 Set up unit tests No --是否安装测试模块 Setup e2e tests with Nightwatch? No --同样是，是否安装测试模块 接下来回车，通过npm进行安装
进入项目
cd demo
安装依赖
cnpm install
启动项目
npm run dev
打开浏览器输入地址查看是否启动成功
:8080注意：只用进行了第一步设置，才能使用淘宝的镜像，才可以使用cnpm，否则还是使用npm命令。
四、项目目录结构主要文件
index.html --项目根视图 package.json --配置文件 README.md --说明文件 .postcssrc.js --postcss配置文件 .gitignore --github上传时，忽略的上传文件类型配置 .editorconfig --一些编码配置，可以忽略该文件 .babelrc --ES6的主要目录
static --静态文件目录，项目启动后可以直接访问里面的文件或内容。 src --源码文件 config --配置文件,开发服务器的配置 build --服务器配置文件，webpack配置文件src目录
main.js --入口文件 App.vue --单文件主组件 components --子组件 assets --公共资源文件 Vue入门二 一、项目入口 main.js --项目入口src目录下
main.js文件介绍
Vue.config.productionTip = false 开发时的配置，可以暂时不用管
初始化一个VUE实例
new Vue({ el: '#app', 绑定一个元素，绑定一个叫app的根组件元素,如上图中index.html中的<div></div>组件元素。 components: { App }, 把组件注入进来 template: '<App/>' 模板，指定一个组件app.vue }) 引入组件步骤
引入组件
import App from './App.vue'
加载视图
template: '<App/>'
创建一个组件名字，加载视图组件名字和该名字一样。
components: { App }, 二、组件说明Vue组件包括三部分：
template（视图部分）
script（逻辑或者数据交互部分）
style（样式部分）
三、模板语法 {{ }} 文本(数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：)
渲染出来就是文本，没有任何标签。
<span>{{mtds}}</span> <br> <h1>{{1+3}}</h1> <br> {{1>0 ? "错的": "对的"}} <br>功能：
可以直接进行运算，可以直接放变量。
不能直接放字符串（除非先声明，可以使中文的）。
可以用三门运算符。
注意：只能存在单行语句。多行语句如if else这种需要换行写的,不能作用在html属性上。
v-html 原始html双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<span>{{mtds}}</span> <br> <span v-text="mtds"></span> <br> <span v-html="mtds"></span> mtds: '<h1>v-text与v-html区别</h1>', v-text与v-htmlv-html：会渲染html代码。
v-text：不会渲染出来。
都可以用来显示。
v-bind 绑定
那个属性是活的，就用v-bind去绑定。
<span v-bind:class="ha">您好</span> ha: 'bianle', v-if 条件渲染 <p v-if="show"> <span>我是否能被看见a</span> </p> <p v-else> <span>我是否能被看见b</span> </p> show: false,v-if与v-if v-else类似
注意：同级标签不能嵌套，div除外。
template标签