一.创建vue新项目.开启服务
安装好vue-cli后，进入vue目录后，执行vue init webpack "项目名称"
以下是各类参数的说明：
①Project name 项目名称
②Project description 项目描述
③Author 作者
④Vue build 创建模式,目录
⑤Use ESLint to lint your code
⑥Set up unit tests
⑦Setup e2e tests with Nightwatch 以上三个不选择No的话会选择严格模式，写项目时会出现很多告警错误
⑧Should we run "npm install" for you after the project has been created 是否自动执行安装依赖
然后cd 项目名称，执行npm run dev ，打开http://localhost:8080 即可访问。
注意：Vue.js 不支持 IE8 及其以下 IE 版本。
二.常见语法总结
1.差值表达法
<div id="root">{{msg}}</div>
<script>
//实例化Vue对象
new Vue({
// 挂载点(用来绑定与元素的)
el: '#root',
// 数据对象(自定义数据对象)
data:{
msg:'hello world' //实际上就是数据绑定的形式
}
})2.模板加差值方式 （所谓的模板即除了数据本身还有一些HTML标签等东西)
<div id="root"></div>
<script>
//实例化Vue对象
new Vue({
// 挂载点(用来绑定与元素的)
el: '#root',
//模板
template:'<h1>你好{{msg}}</h1>',
// 数据对象(自定义数据对象)
data:{
msg:'vue',
}
})
</script>3.使用v-html 和v-text (主要使用输出未解析的HTML和文本的)
<div id="root">
<p v-text="msg">用了v-text,这里的东西不会显示的</p>
<span>上面用的v-text是不会解析html标签的</span>
<p v-html="name">用了v-html,这里的东西不会显示的</p>
<span>上面用的v-html是会解析html标签的</span>
</div>
<script>
//实例化Vue对象
new Vue({
// 挂载点(用来绑定与元素的)
el: '#root',
// 数据对象(自定义数据对象)
data:{
msg:'vue',
name:'<h1>mclink</h1>',
}
})
</script>
5.事件处理器（点击事件触发）
<div id="root">
<div v-on:click="change">{{msg}}</div>
<div @click="change">{{msg}}</div> <!-- v-on可以写成@ -->
</div>
<script>
//实例化Vue对象
new Vue({
// 挂载点(用来绑定与元素的)
el: '#root',
// 数据对象(自定义数据对象)
data:{
msg:'vue',
name:'<h1>mclink</h1>',
},
//方法实现
methods:{
change:function(){
this.msg='i love vue'
}
}
})
</script>5.1事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
- .stop: 不会一直传递，自己运行结束就结束了。
- .prevent: 比如 submit 加了这个，就不会提交了。
- .capture: 在传递的父子事件种，加了这个，无论先点哪个，都先执行这个。
- .self: 只有点击自己本身才会执行，点他的子元素也不会被传递。
- .once: 只执行一次。
5.2 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
例如：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
因为不可能记住所有的keycode，故可以使用别名的方式
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">全部的按键别名：（监听键盘点击事件）
- .enter
- .tab
- .delete (捕获 "删除" 和 "退格" 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
6.VUE 表单
<!-- ：和v-bind的效果是一样的，是一种简写方式 -->
<div id="root">
<div v-bind:title="title">mclink</div>
<div :title="title">mclink</div>
<input :value="content"/><p>这是没有双向绑定的,修改值data不会变</p>
<input v-model="content"/><p>这是进行了双向绑定的,修改同时改变data</p>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"这是一个提醒",
content:"这是content",
},
})
</script>
：value 只是将值单向的绑定，即只会从data里面取值，但是不会改变data的值，而v-model则是双向
绑定，不仅会从data取值而且还能对应的修改data的值
7. 计算属性computed和侦听器wantch
<div id="root">
姓:<input v-model="firstname" />
名:<input v-model="lastname"/>
<div>
全名:<input v-model="fullname"/>
</div>
<div> {{count}} </div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstname:"",
lastname:"",
count:0,
},
computed:{
fullname:function()
{
return this.firstname+' '+this.lastname
}
},
//监听器
watch:{
fullname:function()
{
this.count++
},
},
})
</script>computed是在HTML DOM加载后马上执行的，如赋值；
而methods则必须要有一定的触发条件才能执行，如点击事件；
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。
8.条件语句及循环语句
①v-if的使用
<div id="root">
<p v-if='ok'>{{message}}</p> <!-- 当OK的值为false时，移除该dom节点 -->
<p v-else>好玩吗？</p>
<button @click = 'click'>点我</button>
</div>
<script>
new Vue({
el: '#root',
data: {
message: 'Hello Vue!',
ok:true
},
methods:{
click:function(){ <!-- 绑定点击事件，切换是否切换文字 -->
this.ok = !ok;
}
}
})
</script>②v-show的使用
与v-if类似，但是不会改变dom元素，只会再该元素上加上style = display:none 来隐藏
③v-for 循环语句的使用
v-for可以把数据中的一个数组对应为一组元素
v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
<div id="root">
<ul>
<li v-for="item in list">{{item}}</li>
<br/>
<span style="display: none">加上key可以增加效率，Key要求每项的值都是不同的,即唯一性 </span>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
list:[1,2,3,4,5,6,7,8],
}
})
</script>使用 v-for="item in list" 或者 v-for="item of list" 进行遍历都可。