一.准备工作
1.安装node.js 【官网下载，安装即可】 安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.安装vue
npm install -g @vue/cli // @vue/cli为新版本 vue-cli为老版本
3.创建项目：
vue create hello-world //可以cd到项目里，运行 cnpm install安装依赖
4.运行项目
npm run serve
二.绑定属性
1.绑定属性
<div v-bind:title="title">放上鼠标显示<div> v-bind:简写： <div :title="title">放上鼠标显示<div> title在data里定义，data里的数据用‘‘ 单引号阔气了
:src="url"
:class
:title
2.绑定Html
<div v-html="content"></div>
<div v-text="content"></div>
3.绑定样式：可以进行判断
<div :class="{‘red‘:flag}"> 你好</div> //在样式表定义red
<div :class="{‘red‘:flag，‘blue‘:!flag}"> 你好</div> //只有真假，不是0 1
还有:style
4.循环
<li v-for="item in list"> {{item}}</li> <li v-for="(item,key) in list">{{key}} {{item}}</li>
<li v-for="(item,key) in list" ：class="{‘red‘:key==0}">{{key}} {{item}}</li> //第一行class="red"
三.双向数据绑定
1.针对表单元素 绑定关键词 v-model=‘xx‘
3获取vue的dom节点
节点添加标识 ref="" 如userinfo 获取DOM节点 this.$refs.userinfo
获取DOM节点的值 this.$refs.userinfo.value
四.事件与方法
1.点击事件与方法 v-on 简写@ ,方法内容放在methods里面.
2.方法与方法之间用,隔开
3.添加数据用push 如给数组list添加数据 ,this.list.push(‘xxxxx‘)
4.执行方法传值: 如1.@click="xx(a)" 2.方法()添加形参,3.方法内得到参数.
5.事件对象 @click="eventFn($event)" 定义对象(方法) eventFn(e) ,,,e.xx.xx
原文：https://www.cnblogs.com/dxh0535/p/12081492.html