Vue 实现前后端分离之分页

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

学习此框架你需要掌握关于 HTML、CSS 和 JavaScript 的中级知识。

同时还需要掌握 ES6 的语法知识。

二、简单体验

1. 在一个 HTML 文档中引入vue

方式一

或者

方式二

从官方推荐的安装方案中选择适合自己的一个方案

这里选择的是使用 标签直接引入的方式。
并且是把源码下载到本地。

因为是学习之用，所以选择开发版本

image.png

全部复制，并保存到本地名为: vue.js 的文件中

不要翻译

image.png

挂载点、模板和实例

image.png

一些理解与说明：

1. 引入 Vue
   

   或者使用 CDN 的方式

2.一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例
3.在一个 Vue 实例中使用 data 指明了数据对象
4.el 选项指明了 Vue 的实例作用于具体的那个 DOM 中，在数据变化时更新 DOM，一般都用id选择器，当然类选择器也可以

其他用法示例

v-on绑定事件

    
{{ msg }}
    算一卦

在 Vue 中使用 v-on 这个指令来绑定一个事件到元素上。
事件触发的方法（函数），定义在 Vue 实例的 methods 属性中。
注意 v-on:click 一般都简写为: @click

两个函数的应用

计算属性

{{ fullName }} {{ age }}
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Shark',
    lastName: 'Yun',
    age: 18
  },
// 计算属性
  computed: {
    fullName: function () {
      console.log("计算属性被调用了一次");
      return this.firstName + ' ' + this.lastName
    }
  },
  
})

方法

{{ fullName() }} {{ age }}
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Shark',
    lastName: 'Yun',
    age: 18
  },

//  方法
  methods: {
      fullName: function (){
                console.log("方法被调用了一次");
               return this.firstName + ' ' + this.lastName
}
}


})

利用Django自带的实现分页
观察此表结构：

image.png

根据位置拿到索引取值

 

  Previous


{{ item[1] }}
...
                                              
 

Next
 

注意：

mounted() 挂起一般传入静态页面（"http://127.0.0.1:8000/cmdb/assets/"），用以获取静态数据。
methods():方法一般用来获取动态的变量（ return this.assets.links），获取动态数据。