Python 28 Vue框架

1、基本使用

<div id="odiv">{{ greeting }}</div>

<script src="./static/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#odiv",
        data: {
            greeting: "hello world",
        }
    })
</script>

2、經常使用指令

一、v-text、v-html

<div id="odiv" v-text="greeting"></div>
<div id="odiv" v-html="greeting"></div>
greeting: "<h1>hello world</h1>"

二、v-for：循環建立標籤

<div id="odiv" v-for="num in yin">{{ num }}</div>
<div id="odiv" v-for="student in students">{{ student.name }}</div>

yin: [1, 2, 3]
students: [{name: "yin"}, {name: "wen"}, {name: "jie"}]

三、v-if、v-show

v-if是先append多個標籤，若是不符合條件再remove，這樣來回切換的效率較低。

v-show是給不符合條件的標籤加上display=none，效率更高一些。

<div v-if="word == 'xxx'">有</div>
<div v-else-if="word == 'xx'">仍是</div>
<div v-else>沒有</div>

<div v-show="isShow">你好</div>

四、v-bind：綁定屬性

<div v-bind:href="path">點擊</div>
<div v-bind:class="{active:isActive}">有</div>
<div v-bind:class="[attr]">有</div>

isActive:true,
attr: "active"

五、v-on：綁定事件

<div v-on:click="change">點擊</div>  // 能夠簡寫成@click

methods:{
    change:function(){xxx}
}

六、v-model：獲取用戶輸入

    <div id="app">
        <input type="text" v-model="name"/>

        <input type="checkbox" value="男" v-model="genders"/>
        <input type="checkbox" value="女" v-model="genders"/>

        <select v-model="girlfriends">
            <option>康抻</option>
            <option>鞠瑩瑩</option>
            <option>嘉琪</option>
        </select>

        <textarea></textarea>

        <hr>
        {{ name }}
        {{ genders }}
        {{ girlfriends }}
    </div>

    <script>
        // 數據模板引擎
        // v-開頭的指令是幫助咱們渲染數據用的
        let vm = new Vue({
            el: "#app",
            data: {
                name: "juyingying",
                genders: [],
                girlfriends: []
            },
        })
    </script>

View Code

七、計算屬性：對數據進行加工操做

<input v-model="a">
<input v-model="b">
<input v-model="c">
<div>{{ total }}</div>

data:{a:1,b:2,c:3},
computed:{
    total: function(){
       return this.a + this.b + this.c
   }
}

八、偵聽器：當數據發生改變時觸發

  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 若是 `question` 發生改變，這個函數就會運行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },

九、指令修飾符：對用戶輸入的數據加工

v-model.number="xx"  // 將輸入的數據改成數值類型
v-model.trim="xx"  // 將輸入的數據兩端的空白去除
v-model.lazy="xx"  // 在失去焦點時才更新數據

十、獲取DOM元素

<div id="app">
    <div ref="t" v-text="greeting"></div>
    <button v-on:click="changeColor">點擊變紅</button>
</div>

<script src="./static/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            greeting: "hello world",
        },
        methods:{
            changeColor:function(){
                this.$refs.t.style.color = "red";
            }
        }
    })
</script>

十一、自定義指令

Vue.directive("pos", function(el, bindding){  // 第一個參數是指令名稱，第二個參數是一個函數，其中參數1是綁定的標籤，參數2是傳入的數據
    if (bindding.value=true){
        el.style.position = "fixed";
        el.style.right = 0;
        el.style.bottom = 0;
    }
})

 

3、組件

一、全局組件和局部組件

全局組件就是定義以後不用在Vue對象中註冊，能夠而且只能夠在html中使用的。局部組件必須在父組件中註冊，可是能夠在任意的組件中使用。

<div id="app"><Box></Box></div>

<script>
    Vue.component("Box",{
        template: `<button v-on:click="times++">你點擊了{{ times }}次</button>`,
        data(){
            return {
                times: 0,
            }
        }
    });

    new Vue({
        el: "#app",
    })

全局組件

<div id="app"><Box></Box></div>

<script>
    let Box = {
        template:`<button v-on:click="times++">你點擊了{{ times }}次</button>`,
        data(){
            return {
                times: 0,
            }
        }
    };

    new Vue({
        el: "#app",
        components:{
            Box:Box,
        }
    })

局部組件

 二、父子組件通訊

// 子組件
let son = {
    template: `
        <div>{{ fdata }}</div>
    `,
    props: ["fdata", ]
}

// 父組件
let father = {
    template: `
        <son fdata=_fData_><son>
        <div></div>
    `,
    data(){
        return {
            fData: 0
        }
    },
    components:{
        son: son,
    }
}

父向子傳值

若是在子組件中想要監聽這個值的變化可使用偵聽器

<div id="app"><father></father></div>

<script>
    let son = {
        template:`<button v-on:click="sonClick">點擊變大</button>`,
        methods:{
            sonClick(){
                this.$emit("sonClick", 1)
            }
        }
    };

    let father = {
        template: `
            <div>
                <div v-bind:style="{ fontSize:size + 'px' }">字體大小</div>
                <son v-on:sonClick="changeSize"></son>
            </div>
        `,
        data(){
            return {
                size: 10
            }
        },
        components:{
            son: son,
        },
        methods:{
            changeSize(num){
                console.log(num);
                this.size += num;
                console.log(this.size)
            }
        }
    };

    new Vue({
        el: "#app",
        components:{
            father: father
        }
    })

子修改父值

三、插槽：用於組件複用

<body>
    <div id="app">
        <global-component>首頁</global-component>
        <global-component>免費課程</global-component>
        <global-component>輕課</global-component>
        <global-component>智能題庫</global-component>
        <global-component>學位課程</global-component>
    </div>
<script>
    Vue.component("global-component", {
        template: `
            <div class="box"><slot></slot></div>
        `
    });

    new Vue({
        el: "#app",
    })
</script>

插槽

 

4、生命週期

一、beforeCreate：在Vue實例被建立以前，此時頁面已加載完成，可是尚未Vue實例。

二、created：在Vue實例建立以後，此時Vue實例已經建立，數據、函數等已經建立完成，可是尚未渲染頁面，沒有el。

三、beforeMount：在掛載以前，此時已經找到了要渲染的標籤，el中已經有了這個標籤，可是尚未加載數據。

四、mounted：在掛載以後，此時頁面已被渲染完畢。

五、beforeUpdate：在狀態更新以前，data中的數據已被更新，但頁面中的數據還沒更新。

六、updated：在狀態更新以後，data和頁面中的數據都已更新。

七、beforeDestroy、destroyed

八、activated、deactivated：用<keep-alive></keep-alive>標籤將某個組件包裹起來，這樣這個組件的切換就只是隱藏和顯示，再也不是直接remove，保證了切換效率，可是同時讓上面的八種聲明週期方法都失效，只能使用activated和deactivated。

 

5、VueRouter

一、基本使用

<div id="app">
    <!-- router-link會被渲染成a標籤，to會被渲染成href -->
    <router-link to="/">首頁</router-link>
    <router-link to="/login">登錄</router-link>
    <!-- 顯示組件 -->
    <router-view></router-view>
</div>

<script src="./static/vue.min.js"></script>
<script src="./static/vue-router.js"></script>
<script>
    // 一、使用VueRouter
    Vue.use(VueRouter);

    // 二、定義路由組件
    let home = {
        template: `<div>這是首頁</div>`
    };

    let login = {
        template: `<div>這是登錄頁面</div>`
    };

    // 三、定義路由關係
    routes = [
        {path: "/", component: home},
        {path: "/login", component: login}
    ];

    // 四、實例化一個router對象
    let router = new VueRouter({
        routes: routes
    });

    // 五、將router和Vue掛載
    new Vue({
        el: "#app",
        router: router
    })

</script>

基本使用

在其餘地方想點擊跳轉，能夠：

this.$router.push({name: "xx", params: {xx: "xx"}})

二、路由命名

<router-link :to="{ name:'home' }">首頁</router-link>
<router-link :to="{ name:'login' }">登錄</router-link>

routes = [
    {path: "/", component: home, name: "home"},
    {path: "/login", component: login, name: "login"}
];

三、路由傳參

用 :id表示須要傳遞params，構成路由的一部分

什麼都不加表示須要傳遞query，構成?xx=xx的數據

    let userParams = {
        template: `<div>這是用戶{{ $route.params.id }}</div>`
    };

    let userQuery = {
        template: `<div>這是用戶{{ $route.query.id }}</div>`,
    };

    routes = [
        {path: "/user/:id", component: userParams, name: "userParams"},
        {path: "/user/", component: userQuery, name: "userQuery"}
    ];

JS

<div id="app">
    <router-link :to="{ name:'userParams', params: {id: '1'} }">用戶</router-link>
    <router-link :to="{ name:'userQuery', query:{id:1} }">用戶</router-link>
    <!-- 顯示組件 -->
    <router-view></router-view>
</div>

html

四、路由重定向

routes: [
    { path:"/a", redirect:"/b" },
    { path:"/a", redirect:{name: 'b'} }
]

五、路由嵌套

六、路由鉤子函數

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

七、路由去掉井號

let router = new VueRouter({
     mode: 'history',
)}

 

6、Node、spm、webpack

一、Node.js

Node.js就是JavaScript的運行環境，可讓js語言在沒有瀏覽器的狀況下直接在終端運行，變成像python同樣的腳本語言。

二、npm

npm是JS的第三方庫管理工具，安裝Node.js後就默認安裝了npm。

npm安裝包分爲全局安裝和局部安裝，全局安裝：npm install -g vue，局部安裝：npm install vue --save

# 初始化項目目錄
npm init -y

# 下載包
npm install -g xxxx
npm install xxx --save

# 卸載
npm uninstall xxx

# 更新
npm update xxx

三、webpack

 

7、vue-cli

vue-cli是幫咱們快速搭建項目的腳手架工具

# 一、全局安裝vue-cli
npm install -g @vue/cli  # 3版本安裝方式

# 二、在文件夾中建立項目
npm init -y
vue init webpack vue-demo

# 三、切換到項目目錄中，啓動項目
cd vue-demo
npm run dev

項目結構和使用：

 

8、Vuex

用來進行狀態管理，提供一個公共的部分存放數據，各個組件都能訪問。

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

export default new Vuex.Store({
   // 用來共享數據，this.$store.state.name
   state:{
       name: "yin"
   },
   // 對數據加工，this.$store.getters.new_name
   getters:{
       new_name: function(state){
          return state.name + "1"
       }
   },
  // 對數據修改, this.$store.commit("change_name", "xxx")
   mutations:{
       "change_name": function(state, data){
           state.name = data
       }
   },
})

store.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

main.js

 

9、axios

// 之後能夠在組件中經過$axios來使用
import axios from 'axios'
Vue.prototype.$axios = axios

  mounted(){
    let that = this
    this.$axios.request({
       url: "xxx",
       method: "get"
    }).then(function(data){
       // 成功的回調
    }).catch(function(data){
       // 失敗的回調
    })
  }

 

10、打包發佈

一、修改打包後尋找靜態文件的路徑

由於打包後產生的dist文件夾裏面有一個index.html，一個static文件包，若是要找靜態資源須要相對路徑。

 

 注意：這裏是在build{ }下修改而不是開頭的那個

二、執行打包命令

npm run build

三、將生成的dist部署到nginx