Vue配合Django使用方式

更新時(shí)間：2024年09月21日 10:05:55 作者：捉鴨子

Vue.js是前端三大框架之一,以其輕巧、高性能的特性脫穎而出,Vue.js專注于構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面,采用漸進(jìn)式設(shè)計(jì),易于上手,支持組件化開發(fā),核心功能包括響應(yīng)式數(shù)據(jù)綁定和視圖組件的組合,Vue還提供了生命周期、事件綁定等多種功能,支持ES6語法

Vue配合Django使用

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和關(guān)注程度在三大框架中稍微勝出，并且它的熱度還在遞增。

Vue.js讀音 /vju?/, 類似于 view
Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API
Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫(kù)
Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架

通俗的說：

Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架
Vue.js 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件
核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)

Vue作者

尤雨溪是Vue.js框架的作者，他認(rèn)為，未來App的趨勢(shì)是輕量化和細(xì)化，能解決問題的應(yīng)用就是好應(yīng)用。而在移動(dòng)互聯(lián)網(wǎng)時(shí)代大的背景下，個(gè)人開發(fā)者的機(jī)遇在門檻低，成本低，跨設(shè)備和多平臺(tái)四個(gè)方面。

第一個(gè)Vue

官方提供了兩個(gè)包：

開發(fā)環(huán)境版本
生產(chǎn)環(huán)境版本

data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ message }}</a>
        <span>{{ hello }}</span>
        <hr>
        <span>{{ word }}</span>
    </div>

</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"領(lǐng)取優(yōu)惠卷",
            hello:"hi en heng",
            word:'你好！'

        }
    })


</script>
</html>

v-bind

<span v-bind:title="show">鼠標(biāo)放在這里</span>
簡(jiǎn)寫：
<span :title="show">鼠標(biāo)放在這里</span>

var vm = new Vue({
        el:"#app",
        data:{
            show:'當(dāng)前時(shí)間是:'+ new Date().toLocaleString()
        }
    })

v-if



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    導(dǎo)入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--定義一個(gè)標(biāo)簽給id -->
    <div id="app">
        <span>{{ message }}</span>
        <hr>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  v-if="isLogin">歡迎你回來!</a>
        <hr>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  v-if="level === 1 ">青銅</a>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  v-else-if="level === 2 ">白銀</a>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  v-else>王者</a>
        <hr>
        <span v-if="seen">v-if</span><br>
        <span v-show="seen">v-show</span>


    </div>
</body>
<!--創(chuàng)建vue實(shí)例-->
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            message:'hello',
            is_Login:false,
            level:2,
            seen:false
        }


    })


</script>
</html>

v-show用法和v-if大致一樣，但是它不支持v-else,它和v-if的區(qū)別是，它制作元素樣式的顯示和隱藏，元素一直是存在的

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    導(dǎo)入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--定義一個(gè)標(biāo)簽給id -->
    <div id="app">
        <span>{{ message }}</span>

        <hr>
        <ul>
            <li v-for=" (item,index) in items">{{ index+1 }}----{{ item }}</li>
        </ul>
        <hr>
        <!--對(duì)對(duì)象遍歷-->
        <ul>
            <li v-for="(value,key) in object ">{{ key }}----{{ value }}</li>

        </ul>
        <hr>
        <ul>
            <li v-for="todo in todos">{{ todo.title}}---{{ todo.author}}</li>

        </ul>


    </div>
</body>
<!--創(chuàng)建vue實(shí)例-->
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            message:'hello',
            items:['python','mysql','linux','html','js','css'],
            object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    },
            todos: [
       {
        title: 'Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      },
      {
        title: 'python',
        author: 'Ricky',
        publishedAt: '2019-04-10'
      },
      {
        title: 'itcast',
        author: 'itcast',
        publishedAt: '2006-05-08'
      }
    ]
        }

    })


</script>
</html>

methods

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    導(dǎo)入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--定義一個(gè)標(biāo)簽給id -->
    <div id="app">
        <span>{{ message }}</span>
        <button v-on:click="login">登陸</button>
        <br>
        <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="regsiter">注冊(cè)</a>
        <hr>
        <button @click="add(counter)">點(diǎn)擊+1</button>

    </div>
</body>
<!--創(chuàng)建vue實(shí)例-->
<script type="text/javascript">
    var vm = new Vue({
        //接管標(biāo)簽
        el:'#app',
        //綁定數(shù)據(jù)
        data: {
            message: 'hello',
            counter:1,
            total:0,
        },
        //方法
        methods:{
            login:function (){
                alert('我被點(diǎn)擊了')


            },
            regsiter:function (){
                alert('注冊(cè)')
            },
            add:function(counter){
                //this表示當(dāng)前的vue，我們通過this.total來獲取data中的變量
                this.total+= counter
                alert(this.total)

            }
        }

    })

</script>
</html>

v-on 綁定事件

簡(jiǎn)寫@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    導(dǎo)入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--定義一個(gè)標(biāo)簽給id -->
    <div id="app">
        <span>{{ message }}</span>
        <button v-on:click="login">登陸</button>
        <br>
        <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="regsiter">注冊(cè)</a>
        <hr>
        <button @click="add(counter)">點(diǎn)擊+1</button>

    </div>
</body>
<!--創(chuàng)建vue實(shí)例-->
<script type="text/javascript">
    var vm = new Vue({
        //接管標(biāo)簽
        el:'#app',
        //綁定數(shù)據(jù)
        data: {
            message: 'hello',
            counter:1,
            total:0,
        },
        //方法
        methods:{
            login:function (){
                alert('我被點(diǎn)擊了')


            },
            regsiter:function (){
                alert('注冊(cè)')
            },
            add:function(counter){
                //this表示當(dāng)前的vue，我們通過this.total來獲取data中的變量
                this.total+= counter
                alert(this.total)

            }
        }

    })



</script>
</html>

v-model

雙向綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    導(dǎo)入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--定義一個(gè)標(biāo)簽給id -->
<div id="app">
    <span>{{ message }}</span>
    <hr>
    <table>
        <tr>
            <td>用戶名</td>
            <td><input type="text" name="username" v-model="username"></td>

        </tr>
        <tr>
            <td>密碼</td>
            <td><input type="password" name="password1" v-model="password1"></td>

        </tr>
        <tr>
            <td>確認(rèn)密碼</td>
            <td><input type="password" name="password2" v-model="password2"></td>

        </tr>
        <tr>
            <td>性別</td>
            <td><input type="radio" name="sex" value="boy" v-model="sex">男
                <input type="radio" name="sex" value="girl" v-model="sex">女</td>
        </tr>
        <tr><td>愛好</td>
        <td>
          足球 <input type="checkbox" name="like" value="足球" v-model="like">
          籃球 <input type="checkbox" name="like" value="籃球" v-model="like">
          兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like">
        </td>
      </tr>

    </table>
    <button v-on:click="register">注冊(cè)</button>

</div>
</body>
<!--創(chuàng)建vue實(shí)例-->
<script type="text/javascript">
    var vm = new Vue({
        //接管標(biāo)簽
        el: '#app',
        //綁定數(shù)據(jù)
        data: {
            message: 'hello',
            username:'',
            password1:'',
            password2:'',
            sex:'',
            like:[]


        },
        methods:{
            register:function(){
                alert(this.username+this.password1+this.password2+this.sex+this.like)
            }
        }
    })


</script>
</html>

todolist 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    導(dǎo)入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<!--定義標(biāo)簽-->
<div id="app">
<span>{{ message }}</span>
<input type="text" name="todoitem" v-model="newitems">
<button @click="add">添加</button>
<hr>
<ul>
    <li v-for="(item,index) in items">
        <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="up(index)">↑</a>
        {{ item}}
        <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="deleteitem(index)">刪除</a>
        <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="down(index)">↓</a>

    </li>

</ul>

</div>


</body>
<!--創(chuàng)建vue實(shí)例-->
<script type="text/javascript">
    var vm = new Vue({
        //接管標(biāo)簽
        el: '#app',
        //綁定數(shù)據(jù)
        data: {
            message: 'hello',
            items:['學(xué)習(xí)html','學(xué)習(xí)Django','學(xué)習(xí)MySQL'],
            newitems:''



        },
        //綁定事件
        methods:{
            add:function (){
                this.items.push(this.newitems),
                    this.newitems=''
            },
            deleteitem:function(index){
                this.items.splice(index,1);
            },
            up:function(index){
            //    獲取當(dāng)前元素
                current = this.items[index]
            //    先把當(dāng)前元素刪除
                this.items.splice(index,1)
            //    在添加，添加的時(shí)候索引-1
                this.items.splice(index-1,0,current)
            },
            down:function(index){
                 //    獲取當(dāng)前元素
                current = this.items[index]
            //    先把當(dāng)前元素刪除
                this.items.splice(index,1)
            //    在添加，添加的時(shí)候索引-1
                this.items.splice(index+1,0,current)
            }
        }
    })


</script>
</html>

es6語法

let只能在里邊用
var 可以在外面用
const:const聲明一個(gè)只讀的常量。一旦聲明，常量的值就不能改變。

es5的對(duì)象

var person = { 
    name:'itcast',
    age:13,
    say:function(){
        alert('hello')
    }
}

person.say()

es6的對(duì)象

//定義變量
var name='itcast';
var age=13;
//創(chuàng)建對(duì)象
var person = {
    name,
    age,
    say:function(){
        alert('hello');
    }
};
//調(diào)用
person.say()

箭頭函數(shù)

作用：

定義函數(shù)新的方式
改變this的指向

定義函數(shù)新的方式

//無參數(shù),無返回值
var say = ()=> {
    alert('我是無參數(shù)無返回值函數(shù)');
}
//有參數(shù),無返回值
var eat = food => {
    alert('我喜歡吃'+food);
}
//有參數(shù),有返回值
var total = (num1,num2) => {
    return num1+num2;
}

改變this的指向

如果層級(jí)比較深的時(shí)候, this的指向就變成了window, 這時(shí)候就可以通過箭頭函數(shù)解決這個(gè)指向的問題

var person = {
    name:'itcast',
    age:13,
    say:function(){
        alert('my name is ' + this.name);
    }
}
//調(diào)用
person.say()

生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
  {{ message }}
    </div>
</body>
<script>
    var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
        //生命周期的鉤子(函數(shù))沒有在methods
        beforeCreate:function(){
      console.log('beforeCreate')
        },
        created:function(){
      console.log('created')
        },
        beforeMount:function(){
      console.log('beforeMount')
        },
        mounted:function(){
      console.log('mounted')
        },
        beforeDestroy:function(){
      console.log('beforeDestroy')
        },
        destroyed:function(){
      console.log('destroyed')
        }
})


</script>
</html>

axios發(fā)送ajax

vue的大胡子語法和django和flask模板語法沖突

delimiters:['[[',']]']

我們使用Vue的js發(fā)送get和post請(qǐng)求,請(qǐng)求我們用django框架進(jìn)行解析返回渲染頁面

首先我們創(chuàng)建一個(gè)django項(xiàng)目，創(chuàng)建一個(gè)app，注冊(cè)使用，配置url，書寫view，書寫Vue這里就不展示太多了，

View代碼如下：

import json

from django.http import JsonResponse
from django.shortcuts import render

# Create your views here.
from django.views import View


class LoginView(View):
    def get(self, request):
        return render(request, 'login.html')

    def post(self, request):
        pass


class ReceView(View):
    def get(self, request):
        data = request.GET
        username = data.get('username')
        password = data.get('password')
        return JsonResponse({'info':{'username':username,'password':password}})

    def post(self, request):
        data = json.loads(request.body.decode())
        username = data.get('username')
        password = data.get('password')
        return JsonResponse({'info': {'username': username, 'password': password}})

URL配置

from django.conf.urls import url
from book.views import *

urlpatterns = [
    url(r'^login/',LoginView.as_view()),
    url(r'^rece/',ReceView.as_view()),
]

Vue代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 開發(fā)環(huán)境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 導(dǎo)入axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">


[[ message ]]
    <hr>

    [[ username ]]
    <button @click="login">登錄</button>
    <button @click="login1">post</button>


</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        delimiters:["[[","]]"],
        data:{
            message:'hello Vue!',
            username:''
        },
        methods:{
            login:function(){
                var url = 'http://127.0.0.1:8000/rece/?username=itcast&password=123'
                axios.get(url).then((response)=>{
                    console.log(response.data.info.username)
                    this.username = response.data.info.username

                }).catch((error)=>{

                    console.log(error)
                })

            },
            login1:function(){
                var url = 'http://127.0.0.1:8000/rece/'
                axios.post(url,{"username":'itheima','password':'123'})
                .then((response)=>{
                 console.log(response.data.info.username)
                    this.username = response.data.info.username
                }).catch((error)=>{
                    console.log(error)
                })
            }
        }

    })

</script>
</html>

get效果：