Python Day 79 Vue框架

　　##1、走进Vue

#1、what -- 什么是Vue
    渐进式 JavaScript 框架、可以独立完成前后端分离式web项目的JavaScript框架

#2、why -- 为什么要学习Vue
三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

#3、special -- 特点
1）单页面 - 硬件要求低
2）组件化开发
3）数据驱动
4）数据的双向绑定
5）虚拟DOM
6）轻量级

#4、how -- 如何使用Vue
- 开发版本：[vue.js](https://vuejs.org/js/vue.js)
- 生产版本：[vue.min.js]
"app">
    {{ }}

 //下载到本引入vue

 　　##2、Vue实例

　　 ##2-1、el实例

new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

　　##2-2、data数据

'app'>
    {{ msg }}

　　##2-3、methods 方法

'app'>
    
class="box" v-on:click="pClick">测试
    
class="box" v-on:mouseover="pOver">测试

　　##2-4、computed 计算属性

"utf-8">"app">"text"v-model="a_val">"text"v-model="b_val">"text"v-model="c_val">
{{val_fn}}

"js/vue.js">

案例1

    "utf-8">
    


    
"app">
        

            姓："text" v-model="last_name">
        
         

            名："text" v-model="first_name">
        
        

            姓名：{{ full_name }}
        
    

案例2

　　##2-5、watch 监听属性

    "utf-8">
    


    
"app">
        

            姓名："text" v-model="full_name">
        
        

            姓："text" v-model="last_name">
        
         

            名："text" v-model="first_name">
        
    

View Code

　　##2-6、delimiters 分隔符

'app'>
    ${ msg } //修改后的分隔符

　　##3、生命周期钩子

 

表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数

钩子函数: 满足特点条件被回调的方法

#重点掌握两个方法
    created
    mounted

#vue api 链接  生命周期
https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90  


#生命周期图示： 可直接查看官网

    "utf-8">
    


    
"app">
        
一个vue组件从创建到销毁整个生命周期过程中一些时间节点回调的方法
        
    

View Code

　　##4、Vue指令

    "utf-8">
    


    
"app">
        
        
{{ msg }}
        
{{ (num + 1 - 3) / 2 }}

        
        
        
"msg">
        
        
"'加粗文本'">
        
"htmlMSG" @click="changeMsg">
        
        
        
"htmlMSG">{{ htmlMSG + msg }}
    

文本指令

"app" v-cloak>
    {{ msg }}

斗篷指令解决闪烁问题

    "utf-8">
    
    


    
"app" v-cloak aaa="123">
        

        
        
"clickAction">单击
        
"dblclickAction">双击

        
        

            
"liAction(0)">{{ li1 }}
            
"liAction(1)">222
            
"liAction(2)">333
        

        
        
"sysAction1">不传自定义参数
        
"sysAction2(888, $event)">传自定义参数

        
        
"clickAction">单击
    

事件指令

    "utf-8">
    
    


    
"app">

        
        
        
class="box" v-bind:style="myStyle" @click="changeColor('pink')">

        
        
class="box" v-bind:style="{'width': w}" @click="changeWidth">

        
        
class="box" v-bind:style="more_style" @click="changeStyle">

        
        
"AAA">简写v-bind

        
        
        
class="c1" @click="changeClass">
        
        
class="{kiss: kiss_able}">

        
        
class="[x, y, {z: is_z}]">

    

属性指令

    "utf-8">
    


    
"app">
        

        
        "text" v-model="val">
        "text" v-model="val">
        
{{ val }}

        
"">
            
            "password" v-model="val">

            
            
            

                for="male">男
                "male" type="radio" value="male" v-model="radio_val" name="sex">
                for="female">女
                "female" type="radio" value="female" v-model="radio_val" name="sex">
                "alertValue">单选框提交给后台的value
                {{ radio_val + '被选中' }}
            

            
            
            

                "checkbox" name="sure" value="同意" v-model="sure_val">
                {{ sure_val }}
            

            request.GET.get('sure', None)
            
            
            

                男"checkbox" value="male" name="hobby" v-model="hobby_val">
                女"checkbox" value="female" name="hobby" v-model="hobby_val">
                哇塞"checkbox" value="?" name="hobby" v-model="hobby_val">
                {{ hobby_val }}
            

            

                "submit">
            
        

    

表单指令

    "utf-8">
    
    


    
"app" v-cloak>
        

        
        

            "toggleAction(true)">显示
            "toggleAction(false)">隐藏
        
        
        
class="box b1" v-if="is_show">
        
class="box b2" v-show="is_show">

        
        

            "toggleShow('red')">红
            "toggleShow('blue')">蓝
            "toggleShow('green')">绿
        
        
class="box r" v-if="color == 'red'">
        
class="box b" v-else-if="color == 'blue'">
        
class="box g" v-else>
    

条件指令

    "utf-8">
    


    
"app">
        
{{ arr }}
        

        

            
{{ arr[0] }}
            
{{ arr[1] }}
            
{{ arr[2] }}
        
        

        

        
        

            
for="s in arr">{{ s }}
        
        

        
        

            
for="(s, i) in arr" :key="s" b="b">第{{ i }}个：{{ s }}
        
        

        
        

            
for="v in person">{{ v }}
        
        

        

            
for="(v, k) in person">{{ k }}:{{ v }}
        
        

        

            
for="(v, k, i) in person">{{ k }}:{{ v }}:{{ i }}
        
        


        
        
        

        
for="stu in stus">
            for="(v, k, i) in stu">
                if="i != 0"> | 
                {{ k }}:{{ v }}
            
        

    

循环指令

    "utf-8">
    
    


    
"app">
        "text" v-model="msg_val">
        "sendMsg">留言

        

            
for="(msg, i) in msgs" @click="deleteMsg(i)">{{ msg }}
        
    

todolist案例

    "utf-8">
    
    
    
    
    


    
"app">
        
class="header">
            
class="header-slogan">老男孩IT教育集团 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活！
            
class="header-nav">
                
class="header-logo">
                
class="header-menu">
                    
class="{active: page == 'normal'}" @click="togglePage('normal')">免费课
                    
class="{active: page == 'light'}" @click="togglePage('light')">轻课
                    
class="{active: page == 'super'}" @click="togglePage('super')">学位课
                
                
class="header-owner">
                    
if="is_logout">
                        登陆 | 注册
                    
                    
else>
                        Owen | 个人中心
                    
                
            
        

        
class="body">
            
class="body-box box-normal-course" v-if="page == 'normal'">
            
class="body-box box-light-course" v-else-if="page == 'light'">
            
class="body-box box-super-course" v-else>
        

        
class="footer">
    

路飞学成案例

　　##5、前端数据库

    "utf-8">
    


    
前台数据库

前端数据库

　　##6、组件

#组件规则
每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点
每个组件模板只能拥有一个根标签

子组件的数据具有作用域，以达到组件的复用

　　##6-1、根组件

"app">
    
{{ msg }}

    "utf-8">
    


    
"app">
        {{ msg }}
    
    
"main">
        {{ msg }}
    

根组件案例 总结

　　##6-2、局部组件

"app">
    
    

    "utf-8">
    
    


    
"app">
        
            
            
        

        
        

        
        

        
        for="box_obj in box_data">
    

局部组件案例

　　##6-3、全局组件

"app">
    <global-tag>global-tag>
    <global-tag>global-tag>

    "utf-8">
    


    
"app">
        
        

        
        
    

全局组件案例

　　##6-4、父子组件

    "utf-8">
    
    
    


    
"app">
        if="page == 'tag'" @click="action">
        else-if="page == 'tag2'">
    

View Code

　　##6-5、数据父传子

    "utf-8">
    


    
"app">
        
        "msg">
    

    "utf-8">
    
    


    
"app">
        for="box_obj in box_data" :box_obj="box_obj">
    

数据父传子案例

　　##6-5、数据子传父

    "utf-8">
    


    
"app">
        
{{ title }}
        "recv_val">
    

View Code

　　##7、Vue-CLI项目搭建

　　##7-1、环境搭建

#1、安装node
        官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
#2、安装cnpm
        npm install -g cnpm --registry=https://registry.npm.taobao.org
#3、安装脚手架
        cnpm install -g @vue/cli
#4、如果安装出现问题 可执行
        npm cache clean --force

　　##7-2、项目创建

1、创建项目
    vue create 项目名
    // 要提前进入目标目录(项目应该创建在哪个目录下)
    // 选择自定义方式创建项目，选取Router, Vuex插件

启动

cnpm run serve / ctrl+c
// 要提前进入项目根目录

访问：
http://localhost:8080/

　　##7-2、创建好的vue项目怎么移动到新的环境

1、拷贝文件除了node_modules该文件夹，其余文件拷贝到新得环境中
2、cmd进入新的项目目录，执行cnpm install  从新安装依赖
3、通过pycharm打开新建的vue项目
4、在pycharm中编辑该项目，点击edit编辑，新建（+号）服务、选择npm

5、安装vue页面脚本
如果没有提示安装的话 取setting中pluging

6、安装完成重启pycharm

 　　##7-3、认识项目

node_modules：项目依赖

public：公用文件
    favicon.ico：页面标签图标
    index.html：项目的唯一页面(单页面)
    
src：项目开发文件目录
    assets：静态资源
        css|js|img
    components：小组件
        *.vue
    views：视图组件
        *.vue
    App.vue：根组件
    main.js：主脚本文件 程序入口文件
    router.js：路由脚本文件 - vue-router
    store.js：仓库脚本文件 - vuex
    
*.xml|json|js：一系列配置文件
README.md：使用说明

import Vue from 'vue'  // node_modules下的依赖直接写名字
import App from './App.vue'  // ./代表相对路径的当前目录，文件后缀军可以省略
import router from '@/router.js'  // @ 代表src的绝对路径
import store from './store'
// 在main中配置的信息就是给整个项目配置
// 已配置 vue | 根组件App | 路由 | 仓库
// 以后还可以配置 cookie | ajax(axios) | element-ui

Vue.config.productionTip = false;  // Tip小提示

// 配置reset.css
import '@/assets/css/reset.css'

// new Vue({
//   router,
//   store,
//   render: h => h(App)
// }).$mount('#app')

new Vue({
    el: '#app',
    router: router,
    store,
    // render: function (fn) {
    //     return fn(App)
    // }
    // 解释：function (h) {return 1} | (h) => {return 1} | h => 1
    render: readTemplateFn => readTemplateFn(App)
});

main.js

template>
    

.vue 文件模板

　　##7-4、项目功能

　　##路由功能

{
    path: '/',
    name: 'home',
    // 路由的重定向
    redirect: '/home'
}

{
    // 一级路由, 在根组件中被渲染, 替换根组件的标签
    path: '/one-view',
    name: 'one',
    component: () => import('./views/OneView.vue')
}

{
    // 多级路由, 在根组件中被渲染, 替换根组件的标签
    path: '/one-view/one-detail',
    component: () => import('./views/OneDetail.vue'),
    // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的标签
    children: [{
        path: 'show',
        component: () => import('./components/OneShow.vue')
    }]
}

route.js

"/">Home |
"/about">About |
"{name: 'one'}">One |

app.vue 根组件建立路由

// router的逻辑转跳
this.$router.push('/one-view')

// router采用history方式访问上一级
this.$router.go(-1)

　　##路由案例

在components文件夹中新建OwenComponent.vue

在views文件夹About.vue文件中

 

转载于:https://www.cnblogs.com/liangzhenghong/p/11329567.html