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

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

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

二、简单体验

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

方式一

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二

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

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

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

image.png

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

不要翻译

image.png

挂载点、模板和实例

image.png

一些理解与说明：

1. 引入 Vue
   <script src="../static/vue.js"></script>

   或者使用 CDN 的方式

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

其他用法示例

v-on绑定事件

<div id="app">
    <h1>{{ msg }}</h1>
    <button v-on:click="handleChang">算一卦</button>
</div>
<script >
    var app = new Vue({
        el: '#app',
        data: {
            msg: '喜欢我'
        },
        methods: {
            handleChang: function() {
                this.msg = '更喜欢我'
            },
        }
    });
</script>

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

两个函数的应用

计算属性

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

方法

<div id="demo">{{ fullName() }} {{ age }}</div>
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

根据位置拿到索引取值

<ul class="pagination">
 <li class="paginate_button previous " id="example2_previous">
  <a href="#" @click="getAssetsData(assets.links.previous_url)" >Previous</a></li>

<li class="paginate_button" v-for="item in assets.links.page_links">
<a v-if="! item[3]" href="#" @click="getAssetsData(item[0])" >{{ item[1] }}</a>
<a v-else href="#" >...</a>
</li>                                              
 <li class="paginate_button next" id="example2_next">
<a href="#" @click="getAssetsData(assets.links.next_url)" >Next</a>
 </li>
</ul>


<script>
        var app = new Vue({
            el: "#app",
            data: {
                assets: '',
            },
            methods: {
                getUrl(){
                    return this.assets.links
                },
                getAssetsData(url){
                    axios.get(
                        url,
                    ).then(
                        res => {
                            this.assets = res.data
                        }).catch( err => {
                        console.log(err)
                    });
                }
            },
            mounted() {
                axios.get(
                    "http://127.0.0.1:8000/cmdb/assets/",
                ).then(
                    res => {
                        this.assets = res.data
                    }).catch( err => {
                    alert(err)
                });
            },
        });
</script>

注意：

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