这是vue入门第一篇，这篇也是最基础的内容，把自己所学总结分享一下，主要介绍的是引用cdn使用vue以及常用指令。之后第二篇将是对vue-cli的介绍，再后期会把实践项目进行分享。
- 对vue的理解
vue是渐进式javascript框架，所谓渐进式，指的是没有太多的限制，对使用者要求少，使用起来灵活自由。相比起来，angular限制多，要求：必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件。而vue可以使用优秀的库和框架，也可以很好的和其他项目或框架融合。
下面是在网上看到的一个关于渐进式非常好的理解，引用一下：
在我看来，渐进式代表的含义是：主张最少。
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：
- 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。
比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事。
- 引用cdn：打开官网，查看引入cdn的方式。
- 常用指令知识点总结
1.初始化vue对象后结构:
// 实例化vue对象
var obj = new Vue({
el:"#vue-app", //el:element 需要获取的元素,一定是html中的根容器元素.
data:{ //data:用于数据的存储
},
methods:{ //methods:用于存储各种方法
},
computed:{
}
});2.v-html:
//HTML
<a v-bind:href="website">百度一下</a> //绑定跳转链接
<p v-html="websiteTag"></p> //a标签,注意这里直接{{websiteTag}}是不可以的
//script
data:{
website:"http://www.baidu.com",
websiteTag:"<a href='http://www.baidu.com'>百度</a>"
}3. v-bind：给属性绑定对应的值。动态地绑定一个或多个特性，或一个组件 prop 到表达式.
4.v-model：实现数据的双向绑定
//HTML
<!--v-model已经实现input和name的双向数据绑定-->
<label>姓名:</label><input type="text" v-model="name">
<span>{{name}}</span>
<label>年龄:</label><input type="text" v-model="age">
<span>{{age}}</span>
<!--实现绑定的另一种方法,使用了$refs-->
//HTML
<label>姓名:</label><input type="text" v-on:keyup="logName" ref="name">
<span>{{name}}</span>
<label>年龄:</label><input type="text" v-on:keyup="logAge" ref="age">
<span>{{age}}</span>
//script
methods:{
logName:function(){
this.name = this.$refs.name.value;
},
logAge:function(){
this.age = this.$refs.age.value;
}
}
5.v-for: 对数组进行列表渲染.
//HTML
<ul>
<li v-for="character in characters">{{character}}</li>
</ul>
<ul>
<!-- <li v-for="user in users">{{user.name}}:{{user.age}}</li> -->
<li v-for="(user,index) in users">{{index+1}}.{{user.name}}:{{user.age}}</li>
</ul>
//script
data:{
characters:["sw","ma","ed"],
users:[
{name:"tt",age:"20"},
{name:"dd",age:"22"},
{name:"wf",age:"21"}
]
}扩展: template显示的dom结构没有多于的div，只有h3和p标签，而第一段代码有多于的div，其实性能是不好的。
<div v-for="(user,index) in users">
<h3>{{index}}.{{user.name}}</h3>
<p>Age - {{user.age}}</p>
</div>
<template v-for="(user,index) in users">
<h3>{{index}}.{{user.name}}</h3>
<p>Age - {{user.age}}</p>
</template>6.v-show：是对display的切换，dom一直存在，满足条件显示，否则隐藏。
7.v-if：显示时dom存在，不显示即没有dom。
//error和success初始值都为false
<button @click="error=!error">Toggle Error</button>
<button @click="success=!success">Toggle Success</button>
<p v-if="error">网络链接错误:404</p>
<p v-else-if="success">网络链接成功:200</p>
<p v-show="error">网络链接错误:404</p>
<p v-show="success">网络链接成功:200</p>v-if截图：
v-show截图：
8.事件处理:
（1）v-on:click/@click:
//HTML
<button @click="add(1)">单击加一岁</button>
<button @click.once="add(1)">只能点一次加一岁</button>
<button v-on:click="substract(1)">单击减一岁</button>
<button @dblclick="add(5)">双击加五岁</button>
<button v-on:dblclick="substract(5)">双击减五岁</button>
<p>My age is {{old}}</p>
//script
new Vue({
el:"#vue-app",
data:{
old:22
},
methods:{
add:function(inc){
this.old += inc ; //使用data中的属性直接this.属性即可
},
substract:function(dec){
this.old -= dec;
}
}
})(2)v-on:mousemove以及事件修饰符:
//HTML
<!--实现移动鼠标获取x和y位置，显示在canvas内，移动到Stop Moving位置不变化效果 -->
<div id="canvas" v-on:mousemove="updateXY">
{{x}},{{y}} -
<!-- <span v-on:mousemove="stopMoving">Stop Moving</span> --> //调用方法阻止冒泡事件
<span v-on:mousemove.stop="">Stop Moving</span> //利用修饰符直接使用.stop达到同样效果
</div>
//效果：点击后执行alert方法，不跳转百度网页，如果没有prevent则先执行方法后跳转网页。
<a v-on:click.prevent="alert" href="http://www.baidu.com">百度</a>
//script
methods:{
updateXY:function(event){
// console.log(event)
this.x = event.offsetX;
this.y = event.offsetY;
},
stopMoving:function(event){
event.stopPropagation();
},
alert:function(){
alert("hello");
}
}(3)键盘事件:
//HTML
<!--按下enter才会执行logName方法 -->
<label>姓名:</label><input type="text" v-on:keyup.enter="logName">
<!--同时按下enter和alt才会执行logAge方法 -->
<label>年龄:</label><input type="text" v-on:keyup.alt.enter="logAge">
//script
methods:{
logName:function(){
console.log("正在输入名字...");
},
logAge:function(){
console.log("正在输入年龄...");
}
}9.class和style绑定:class的显示与否取决于后面的true和false。
<h4 v-bind:class="{red:true,blue:true}">示例１</h4>结果渲染如下:
传入多个属性动态切换class，在computed中设置：
<h4>示例２</h4>
<button @click="changeColor=!changeColor">change color</button>
<button @click="changeLength=!changeLength">change length</button>
<div v-bind:class="compClasses">
<span>henry</span>
</div>computed:{
compClasses:function(){
return {
changeColor:this.changeColor,
changeLength:this.changeLength
}
}
} 
10.多个实例化对象的初始化，修改第一个的属性时可以在第二个里面直接修改。
//HTML 两个根容器
<div id="vue-app-one">
<h2>{{title}}</h2>
</div>
<div id="vue-app-two">
<h2>{{title}}</h2>
<button @click="changeTitle">修改app-one的标题</button>
</div>
//script 两次初始化，多个类似
var one = new Vue({
el:"#vue-app-one",
data:{
title:'这是app-one的内容'
},
methods:{
}
})
var two = new Vue({
el:"#vue-app-two",
data:{
title:'这是app-two的内容'
},
methods:{
changeTitle:function(){
one.title = "app-one的标题已经被改变了！"; //在第二个中修改第一个
}
}
})
two.title = 'app-two的标题也发生改变了！'; //修改app-two标题11.vue组件:
//HTML
<h2>vue组件</h2>
<div id="vue-app-one">
<greeting></greeting>
</div>
<div id="vue-app-two">
<greeting></greeting>
</div>
//script
Vue.component("greeting",{
template:"<p>{{name}}:hello,介绍vue组件<button @click='changeName'>改名字</button></p>",
data:function(){
return {
name:'tt'
}
},
methods:{
changeName:function(){
this.name = 'henry';
}
}
})
new Vue({
el:"#vue-app-one"
})
new Vue({
el:"#vue-app-two"
}) 
点击后： 
12.{{方法()}}调用方法时，不加()没法识别；而在事件调用方法时，可以不加()，需要传参数要加()。
13.计算属性:
methods中有多个方法时，点击一个按钮方法都会执行，消耗大。此时可以使用computed，用于变化幅度大，耗时和大量搜索，实际上操作虚拟dom，就会达到点击某个只执行某个方法。
computed:
