Vue.js
Vue入门精华-1
发布时间：2019-06-03 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue入门精华-1，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
Vue实例@H_777_1@
<body >
<div id="index" style="padding-left: 200px"></div>
</body>
<script>
var index = new Vue({
el :'#index'
})
</script>
<body >
<div id="index" style="padding-left: 200px"></div>
</body>
<script>
var index = new Vue({
el :'#index'
})
</script>
上面就是一个最基础的vue实例，你大概可以理解为 id 为“index”的元素下的所有内容，这块可以理解为一个作用域，都交给 Vue 去处理。
那么，把创建实例的这部分代码拿出来讲解一下：
<script>
var index = new Vue({
el :'#index' //el 选项是为了挂载元素
data : {} //data选项是初始化数据用的，同样也是作为页面加载时候请求后端的数据
})
</script>剩下的讲起来还是比较费劲的，可以去看一下官网的api文档，讲的还是很详细的。
我发现那些基础的讲起来比较费劲，好吧，我确实词比较穷，基础指令这些就不再细讲了，来上一些比较实用的吧。
Vue数组方法
1. push() : 往数组的结尾添加
2. unshift() : 往数组的开头添加
3. reverse() : 颠倒数组的顺序
4. shift() : 删除数组开头的项目
5. pop() : 删除数组结尾的项目
6. splice(startIndex,num,item) :
startIndex : 开始的索引；
num : 影响的数据，来判定是添加还是修改；
item : 要添加或者修改的对象；
比如 ： arr.splice(1,0,item) : 是要在arr索引为1的位置添加Item项目，之前在1位置的项目会后移；
arr.plice(1,1,item) : 是要修改索引为1的项目，变成item;键盘事件
开发的时候一般为了友好的体验，会使用键盘事件来代替一些鼠标点击事件，来看看Vue中的写法；
<input type="text" v-on:keyup.13="toDOSomething"/>
<input type="text" v-on:keyup.enter="toDoSomething"/>
v-bind:value 与 v-model
<body >
<div id="index" style="padding-left: 200px">
<input type="text" v-bind:value = 'message'/>
<span>{{message}}</span>
</div>
</body>
<script>
var index = new Vue({
el :'#index',
data : {
message : 'Hello Vue!'
}
})
</script>
//上面这种写法，修改input中的值，span中的message并不会实时的改变。
<body >
<div id="index" style="padding-left: 200px">
<input type="text"
v-bind:value = 'message'
v-on:input = 'message = $event.target.value'/>
<span>{{message}}</span>
</div>
</body>
<script>
var index = new Vue({
el :'#index',
data : {
message : 'Hello Vue!'
}
})
</script>
//这种写法，改变input的值，span中的message会实时改变?上面这种用法还有一种语法糖，就是v-model
<body >
<div id="index" style="padding-left: 200px">
<input type="text" v-model="message"/>
<span>{{message}}</span>
</div>
</body>
<script>
var index = new Vue({
el :'#index',
data : {
message : 'Hello Vue!'
}
})
</script>
//这个和第二种写法效果是一样的既然都说到这里了，来看一下v-model在表单中的更多的用法：
单个checked，当复选框选中与不选中时，message的值会实时改变
<body >
<div id="index" style="padding-left: 200px">
<input type="checkbox" v-model="message"/> {{message}}
</div>
</body>
<script>
var index = new Vue({
el :'#index',
data : {
message : true
}
})
</script>