VUE2.0增删改查的实现

本文主要介绍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是什么我就不多说了，从上往下看吧