Vue.Js

時間 2019-11-17

標籤 vue.js vue 欄目 JavaScript 简体版

原文原文鏈接

漸進式框架 -Vue.js

分離與不分離的好與壞

先後端分離後後端僅返回前端所需的數據，大部分業務邏輯都是經過前端進行校驗javascript

再也不渲染HTML頁面，再也不控制前端的效果，頁面由頁面服務器請求返回css

而具體的數據經過JS去應用服務器去數據庫請求獲得html

優勢:減小頁面的請求，頁面無需去後端請求，最多去靜態文件服務器拿到前端

先後端分工清晰,大項目開發維護教簡單vue

缺點: 小項目若是使用先後端分離先後端溝通成本加大
java

Vue初識

1.Vue 一個漸進式JS框架實現單頁面開發node

一個頁面小到一個變量，一個變量表明一個頁面，大到整個項目經過Vue來控制ios

2.頁面的切換再也不是請求url 而是組件的替換，替換一個組件就是替換一個頁面ajax

3.從數據角度考慮標籤而不是一個標籤vue-router

Vue的使用

掛載點通常定義成一個頁面,一個el只對第一個標籤有效，因此掛載點通常爲id

一個頁面出現多個掛載點，可是一個Vue實例操做一個掛載點

因此一個el 指代一個掛載點

像{{}} 和屬性裏以 v-* 打頭的都會被Vue攔截

Vue替換插值處

<div id="app">
    <!-- {{ vue變量 }} 插值表達式 -->
    <h1>{{ h1_msg }}</h1>
    <h2>{{ h2_msg }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',  // 掛載點
        data: {  // 爲掛載點的頁面結構提升數據
            h1_msg: 'h1的內容',
            h2_msg: 'h2的內容',
        }
    })
</script>

Vue 會識別{{ name }} 裏的name會被看成插值處, 去Date找到屬性，替換成真正的內容

Vue使用事件和once指令

知識點：

this 能夠拿到當前的 Vue對象要拿到實例屬性能夠經過 this.$date.插值名

v-on:事件=「函數」只要觸發事件就會執行Vue實例的methods裏的函數方法

v-once:被插值後就沒法改變

{{}} 至關於 v-text 文本

v-html 就是html 代碼塊

插值處能夠經過索引 data[1] 拿到data 列表裏具體的值

@事件能夠代替 v-on:事件

<div id="app">
    <div  v-on:click="pclick"  >{{ msg }}}</div>
</div>

</body>
<script src="Vue.js"></script>
<script>
    let app =new Vue({
        el:"#app",
        data:{
            msg:"adas",
        },
        methods:{
            pclick:function () {
                alert(123);
                this.msg="hahahaha"
            }
        }
    })
</script>

這樣就能夠經過變量驅動頁面

方法傳參

全部click觸發效果能夠綁定到一個函數裏，可是咱們怎麼區分那個按鈕點擊的呢經過傳參？

形參和實參數量能夠不統一

實參若是是隻有函數名的話會把Event傳過去函數名() ，若是想傳事件又想傳參就得加 $event.

<div id="app">
    <button v-on:click="tanchukuang(1)" v-text="h1">{{ h1 }}</button>
    <button v-on:click="tanchukuang(2)" v-text="h2">{{ h2 }}</button>
</div>

</body>
<script src="Vue.js"></script>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            h1:"彈出框1",
            h2:"彈出框2"
        },
        methods:{
            tanchukuang:function (xxx) {
                alert(xxx)
            }
        }
    })
</script>

Vue操做屬性

知識點：

v-bind:屬性和 :屬性同樣若是屬性值仍是鍵值對形式那麼插值形式能夠爲字典

多個類能夠經過元祖的形式 class="[a1,a2]" 來表示兩個兩個類 style:」{fontsize:a1,color:a2}「

<div id="app">
    <button v-on:click="tanchukuang(1)"  :style="xxxx" >{{ h1 }}</button>
    <button v-on:click="tanchukuang(1)"  style="color: yellow" >{{ h1 }}</button>

</div>

</body>
<script src="Vue.js"></script>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            h1:"彈出框1",
            h2:"彈出框2",
            xxxx:"color:yellow"
        },
        methods:{
            tanchukuang:function (xxx) {
                alert(xxx)
            }
        }
    })

v-show和v-if的區別

知識點

v-show 指的是display:none

v-if :flase是註釋存在緩存裏改成true 從註釋解開，實質是從緩存裏讀取出來

變爲false 以後

表單指令

v-model 控制着表單的value值 input框的value也會改變model

點擊會改變 v-model的值是個雙向綁定的過程

單選框radio 萬一和它的value值相同那麼就會被選上

在checked中若是是單個的 v-model 追隨爲 true-value | false-value 的值若是複選的checkbox 那麼就是追隨values

```html
<div id="app">
    <!-- v-model針對於表單元素 -->
    <form action="" method="get">
        <!-- 一、雙向綁定：服務於文本輸入框 -->
        <!-- v-model存儲的值爲輸入框的value值 -->
        <div>
            <input type="text" name="usr" v-model="in_val">
            <input type="password" name="ps" v-model="in_val" >
            <textarea name="info" v-model="in_val"></textarea>
        </div>

        <!-- 二、單選框 -->
        <div>
            <!-- 單選框是以name進行分組，同組中只能發生單選 -->
            <!-- v-model存儲的值爲單選框的value值 -->
            男：<input type="radio" name="sex" value="男" v-model="ra_val">
            女：<input type="radio" name="sex" value="女" v-model="ra_val">
            {{ ra_val }}
        </div>

        <!-- 三、單一複選框 -->
        <!-- v-model存儲的值爲true|false -->
        <!-- 或者爲自定義替換的值 -->
        <div>
            <input type="checkbox" v-model='sin_val' true-value="選中" false-value="未選中" />
            {{ sin_val }}
        </div>

        <!-- 四、多複選框 -->
        <!-- v-model存儲的值爲存儲值多複選框value的數組 -->
        <div>
            <input type="checkbox" value="喜愛男的" name="cless" v-model='more_val' />
            <input type="checkbox" value="喜愛女的" name="cless" v-model='more_val' />
            <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
            {{ more_val }}
        </div>
    </form>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            in_val: '',
            // 默認值能夠決定單選框默認選項
            ra_val: '男',
            // 默認值爲true，單一複選框爲選中，反之false爲不選中
            sin_val: '',
            // 數組中存在的值對應的複選框默認爲選中狀態
            more_val: ['喜愛女的','不挑']
        }
    })
</script>

條件指令

裏面傳遞判斷來決定該標籤是否展現

<div v-if="true">111</div>
<div v-else-if="false">222</div>
<div v-else>222</div>

#必有一個執行 要麼if 執行 要麼else執行  若是兩個都不執行才執行第三個

循環指令

能夠循環

列表拿到值和索引

 <li v-for="(num, index) in nums">{{ num }} {{ index }}</li>  #循環第一個拿到的是數值 第二個纔是索引

 <li v-for="num in nums">{{ num }}</li>

字典拿到

<li v-for="(v, k, i) in people">{{ v }} {{ k }} {{ i }}</li>  #循環的是值 建  索引

解決插值表達式符號衝突

new Vue({
        el: '#app',
        data: {
            msg: '12345'
        },
        delimiters: ['${', '}']
    })

computed 返回值取決於局部做用域變化

裏面出現的標籤每發生一次變化就觸發一次方法

data:{"i1":"1",i2:"2"}
computed:{
  i3:function(){
      return self.i1 + self.i2
        }
}

watch 監聽

watch 能夠監控裏面全部的插值值插值值沒發生一次變化就觸發對應的函數

注意每一個元素都必須在data出現

<div id="app01">
    <input type="text" v-model="i1" >
    <input type="text" v-model="i2" >
    <input type="text" v-model="i3" >
</div>

</body>
<script src="sadasd.js"></script>
<script >
    new Vue({
        el :"#app01",
        data:{
            i1:"",
            i2:"",
        },
        watch:{
            i1:function () {
                alert("i1變化")
            },
            i2:function () {
                alert("i2變化")
            }
        }

    })
</scrip

局部組件

是一個html代碼 css js的集合體

知識點：

1.局部組件只有在掛載點裏面使用

2.由於局部的緣由咱們的組件是爲了服用，因此數據要獨立因此data 是一個函數有名稱空間返回一個字典

3. -單詞就能夠匹配成大寫的 A-aA ---> AAA

<a-bc></a-bc> ----> aBc

實例一個Vue對象 ,經過components註冊局部組件
new Vue({
   el:"#app",
  components:{"abc":localTag}     
})

必定要在Vue 上面！！！！

let localTag={
    template'<div>111<div>'
}

去經過註冊的別名來使用

<abc></abc>

全局組件

不須要在掛載點裏面

Vue.component("aBc",{
     template:"<div>111</div>",
    });

無需註冊

組件父傳子

組件子傳父

1.經過鉤子 this.$emit("recv",this.my_info) 去觸發父組件的方法

2.會把第二個參數傳遞給 get_name

<div id="app01">
<abc @recv="get_name"></abc>
<div>{{msg1}}</div>
</div>
</body>
<script src="sadasd.js"></script>
<script >
    Vue.component("abc",{
       data:function () {
            return{my_info:""}
        },
        template:`<div>
<input type="text" v-model="my_info" >
<input type="button" @click="cccc">
</div>`,
        methods:{
            cccc:function () {
                this.$emit("recv",this.my_info)
            },
        }
    });
    new Vue({
        el:"#app01",
        data:{
            msg1:""
        },
        methods: {
            get_name:function (msg) {
                this.msg1=msg},

            }
    })
</script>

使用服務器請求資源

既然咱們要使用到單頁面開發 Django的不在發揮出他的優點咱們須要尋找一種輕量級的,且最好能更好的和前端打交道的服務器

此時咱們使用到了JavaScript語言的服務器 Node.js ,他的竟然把 V8的引擎搬到了他的Node.js上,這也是第一次有人把前端的語言做爲服務器

因此Node.js沒有本身的語言,就由於他使用了強大的V8引擎,因此這一小個東西，就能發揮極強的優點

1.一個Node,js只是一個單線程 2.非阻塞io 3.事件驅動

咱們就能夠作到點擊某個按鈕跳轉到其餘頁面就不須要請求url 而是組件的替換

須要作安裝（見個人Node.js專題欄）

以及配置nmp爲國內鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建 Vue架子腳 cnpm install -g @vue/cli

起步

1.cd 項目路徑

2.vue create 目錄名

3.選擇自定義

4.Y/N 選擇大寫的，其餘都爲選擇第一個

5勾選 Babel jsES6語法轉換ES5，Router路由 Vuex組件數據交互 Formatter格式化代碼

6.完成後啓動server （開發過程使用 IDE能夠事實更新 npm run serve ）

項目目錄

"""
node_modules：依賴
public：共有資源
    ico：頁面標籤的logo
    html：單頁面 - 整個項目的惟一頁面
src：代碼主體
...：項目、插件等相關配置
"""

""" src
assets：靜態資源
components：小組件
views：視圖組件
App.vue：根組件
main.js：主腳本文件
router.js：路由腳本文件 vue-router
store.js：倉庫腳本文件 vuex
"""

View Code

組件結構

<template>
    <!-- 只能有一個根標籤 -->  html
</template>

<script>
    export default {
        name: "Main",
        data: function() {
            return {
                
            }
        },
        ...
    }
</script>

<style scoped>  #css做用域
    /* scoped */
</style>

根組件導入自組件

<!-- App.vue根組件 -->
<template>
    <div id="app">
        <!-- 3.使用 -->
        <Main></Main>
    </div>
</template>
<script>
    // 1.導入
    import Main from '@/views/Main'
    export default {
        // 2.註冊
        components: {
            Main: Main
        }
    }
</script>
<style>
    html, body {
        margin: 0;
    }
</style>

組件的使用與跳轉

掛載點內部 可使用註冊的name 來使用組
件
<div id="app">
        <!-- 3.使用 -->
        <Main></Main>  #必須導入以後使用
 </div>

<router-link to="/home">home</router-link>會根據URL進行組件的替換 #須要在main.js裏配

<router-view/>會根據當前頁url 放置組件  例如 V1在main.js 對應組件1  那麼url爲xxx時 對應的就是這個組件

生命週期鉤子以及發送AJax

生命週期鉤子

鉤子是個回掉函數當觸發某個條件是會執行，那麼生命週期鉤子就是在組件的出現階段調用的函數

建立以前調用這個建立時立馬調用這個建立以後調用另外一個

beforeCreate () {
        console.log("實例剛剛建立");
        console.log(this.msg
                    
    },
    created () {
        console.log("實例建立成功, data, methods已擁有");
        console.log(this.msg);
    },
    mounted () {
        console.log("頁面已被vue實例渲染, data, methods已更新");
    }
    // 拿到需求 => 肯定鉤子函數 => 解決需求的邏輯代碼塊

AJax

1.下載npm install axios--save

2.main.js 配置全局Vue添加ajax屬性
import Axios from "axios"
Vue.prototype.$ajax = Axios;
new Vue(){} 以前

3.使用
mounted () {
            window.console.log('Goods組件渲染完畢');
            this.aaaa = 12345;
            window.console.log(this.aaaa);
            // 請求後臺
            let _this = this;
            this.$ajax({
                url: 'http://127.0.0.1:8000/goods/',
                method: 'post',
                params: {
                    info: '前臺數據'
                }
            }).then(function (result) {
                let data = result.data;
                // this 指向的是then的function
                _this.aaaa = data;
            })

        }

跨域問題

django有csrf_token了可是仍是沒法相信絕對安全的跨域請求

一般狀況下，A網頁訪問B服務器資源時，不知足如下三個條件其一就是跨域訪問
1. 協議不一樣
2. 端口不一樣
3. 主機不一樣

1. 安裝django-cors-headers模塊
2.# 註冊app
INSTALLED_APPS = [
    ...
    'corsheaders'
]
3 添加中間件
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]
4# 容許跨域源
CORS_ORIGIN_ALLOW_ALL = True

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。