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