学习vue基础以来，看各种教程，练习，随手写写，有错误请大家指导， 目前vue已经升级到2.0的版本，学习也最好是2.0的版本开始。
先看vue的几个特点：1，简单，2,轻量，3,模块友好 4, 组件化 5,数据驱动，
第一:先看一个实例： 这是一个简单的vue实例 for循环
<div id="app">
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
<script>
var nm=new Vue({
el:"#app",
data:{
arr:["banner","orange","appele","yellow"]
},
})
</script>主要看js里边代码 实例化vue 代码 new Vue（{}） el:”#app“ 挂载元素dom节点 data：初始化数据 最大的一点在也不用像jq一样去拼接字符串html模板了，直接去html渲染 数据 即可 。 入门很快。
第二： 指令 v-on vue-text v-html v-for v-bind v-if v-else v-model 1： v-on ： 绑定我们html的事件为主，可以简写为@click 例子 ：
<div id="app">
<div v-on:click="dianwo">{{arr}}</div>
<button @click="jia">+</button>
<span>{{num}}</span>
<button @click="jian">-</button>
</div>
<script>
var nm=new Vue({
el:"#app",
data:{
arr:"nihao vue",
num:0
},
methods:{
dianwo:function(){
this.arr="你点击我了，我好伤心";
},
jia:function(){
this.num++;
},
jian:function(){
if (this.num==0) {return false}
this.num--;
}
}
})
</script>2：v-text和v-html 和jq的的的text和html基本是一样的使用方法，太简单， 3：v-for 上面实例已经介绍 4：v-bind 可以绑定我们的任何自定义类，有点和jq的attr一样 例子:
<div id="test">
<img v-bind:src="src">
<a v-bind:href="url">百度一下</a>
<a :href="url">百度一下</a>
<a v-on:click="update()" href="#">更改图片</a>
<a @click="update()" href="#">更改图片</a>
</div>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
url: "https://www.baidu.com",
src: "img/sum.jpg"
},
methods: {
update: function(){
this.src = "img/top.jpg";
}
}
})
</script>:5：v-if v-else 和v-show 区别 v-if 是不让html直接干掉，html隐藏的，v-show 就是css的 display：none ，block 的转化 ， 例子：
<div id="app">
<div v-if="ok">我是v-if</div>
<div v-else>我是v-else</div>
<div v-show="ok1">我是v-show</div>
</div>
<script>
var nm=new Vue({
el:"#app",
data:{
ok:true,
ok1:true
},
})
</script>6： v-model 主要是使用在表单上 我们数据的驱动，js获取表单的值 都需要绑定 v-model来获取 例子 ：
<div id="app">
<input type="text" v-model="arr">
<span>{{arr}}</span>
<hr/>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<button @click="adddata">提交</button>
</div>
<script>
var nm=new Vue({
el:"#app",
data:{
arr:"nihao vue",
checked:true,
checkedNames:[],
picked:'',
selected:''
},
methods:{
adddata:function(){
if (this.checked==false) {
console.log("你需要同意注册");
}else{
console.log(this.checked+'---'+this.picked+'---'+this.selected)
console.log("你已经注册成功");
}
}
}
})
</script>先介绍到这里 下面在更新