本文主要介绍VUE2.0的一些基本常识应用。
1.vue的外部链接调用
通过外部调用是最简洁的,可以下载在本地,然后引用。
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>//目前没有最稳定的外链,所以此链接相对稳定
2.vue代码不起作用
新手经常会遗忘在VUE响应区间设置最外层div设置id=”app”。
//js部分
var vm=new Vue({
el: '#app',
data: {
newsNum:10,
}
})
//html部分
<div id='app'>
<span v-text='newsNum'></span>//如果没有id=‘app’ newsNum不生效
</div>
3.v-for获取DOM的data-属性和id属性,以及索引index
首先html片段要绑定:data-id和:id,否知在VUE无法识别绑定的属性。
//html片段
<div :data-index="index" :id='index' v-for: @click=''getIndex(index)></div>//此处的:是vue的v-bind:的简写
//js片段
var target = e.target
var dataId=target.getAttribute("data-id")
console.log(dataId)
var id = target.getAttribute('id');
console.log(id)
4.VUE v-for通过索引获取index值
通过传参事件调用的方式传值。
//html片段
<div v-for: @click=''getIndex(index)></div>//尺寸的@在vue表示v-on:事件绑定,也是缩写
//js片段
function getIndex(index){
console.log(index)
}
5.VUE的增删改查
增:主要是通过.push的方法实现的,首先你的new vue要等于vm,然后你的data要有一个news的数组,通过调用方法addNews( )实现新数据的添加 。
var vm=new Vue({
el: '#app',
data: {
news:[]
},
methods: {
addNews:function (newTitle,newContent) {
this.news.push({
title: newTitle,
content: newContent,
})
console.log(vm.news)
},
}
删:通过splice的方式删除第index条数据
delFn:function(index){//此处只演示删除的方法,index的获取方式见上述索引的获取
vm.news.splice(index, 1)//index表示开始的位置,1表示从index开始,删除1条数据
}
改:首先要获取当前字段的索引index,然后直接data的值
edit:function(newTitle,newContent,index){
console.log(index)
vm.news[index].title=newTitle
vm.news[index].content=newContent
}
查:就是直接获取当前vm里面的值,上述的consolo.log()已经实现了该功能。
console.log(vm.news)//至于vm是什么我就不多说了,从上往下看吧