Vue WEB前端开发总结

作者: 南极小丑 | 来源:发表于2019-07-22 12:01 被阅读0次

Vue WEB前端开发总结
计算机毕业设计Python新冠疫情数据分析可视化平台
开始Vue之旅(一)--Vue的介绍
Web前端开发之构建Vue-cli3.0工程
2018-05-16
怎么能学好Web前端开发，如何快速掌握Vue框架
Web前端-Vue.js必备框架（三）
最全vue面试必问题（附题）
MVVM在前端(web)使用
2019年兄弟连web前端开发视频培训教程移动开发Html5 C

Vue

Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源 JavaScript框架，也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目。

vue 移动端hybird 框架混合app框架
安卓+ iOS 跨平台的套壳程序
vue ：适合中小型APP开发 react/angularJS：适合大型APP开发

SPA:single page application ( 单页应用程序 )

渐进式
渐进增强（向上兼容）
优雅降级（向下兼容）
mvc设计理念
m model 模型（数据层）
v view试图（模板）
*c * controller 控制层（业务层）
注：实际开发中，如果使用了vue之后，尽可能不操作dom，不使用jq js等。

Vue-指令

操作指令元素

用法：放置在元素内部做属性

名字	作用
`v-test="dataname"`	等价于`innerText`
`v-html="elname"`	将原来的节点替换为声明的节点
`v-show="true"`	改掉元素的`display`
`v-if="true"`	跟`v-show`一样的功能但是会删掉节点//`remove()`
`v-else`	跟`v-if`组成逻辑
`v-else-if`	跟`v-if`组成逻辑
`v-for="(v,k) in arr"`	循环遍历指令值：`{{ v }}` 键：`{{ k }}`
`v-on`or`@`	绑定事件`v-on:事件名="函数名"`or `@click="函数名"`
`v-bind:`属性or `:`	动态绑定一个或多个属性
`v-model:`"msg"or`#`	双向数据绑定只能给表单元素指向`value`值
`v-pre`	忽略解析原样输出
`v-cloak`	解决数据被解析之前的闪烁问题
`v-once`	只渲染一次

钩子函数

即vue生命周期，从创建到销毁的过程，当实例化vue的时候会创建几个相应的状态，在某种情况下做特定的功能，自动执行。

执行函数

对象创建状态
- beforeCreate 最先执行的广告开场动画
- created 对象创建成功后 data数据已经有了模板没有加载可以初始化数据
模板挂载状态
- beforeMount获取到了页面的模板还没有进行替换
- mounted模板已经重新进行了渲染页面已经有了结果
修改数据状态
- beforeUpdate监测mounted里面变更数据的操作才会触发
- updated同上
对象销毁状态
- beforeDestroy 在对象销毁成功之前结束动画
- destored 销毁整个实例对象之后渲染时不会触发荣登极乐

Vue请求

vue-resource 自带的库

Get

new Vue = ({
    el:"#app",
    data:{},
    created(){
        this.$http.get("data.php",{params:{userName:"memeda"}}).then(function(res){
            console.log(res);
        })
    }
})

Post

new Vue = ({
    el:"#app",
    data:{},
    created(){
        this.$http.post("data.php",{userName:"memeda"},{emulateJSON:true}).then(function(res){
            console.log(res);
        })
    }
})

Jsonp

new Vue = ({
    el:"#app",
    data:{},
    created(){
        this.$http.jsonp("data.php",{userName:"memeda"},{emulateJSON:true}).then(function(res){
            console.log(res);
        })
    }
})

Axios请求

Get

axios.get("data.php",{params:{user:"admin"}}).then((res)=>{
    console.log(res);
})

Post

axios.post("data.php","user:admin&pwd=123").then((res)=>{
    console.log(res);
})

组件

全局组件

在任何实例里面都能使用的就叫全局组件。

注册全局组件

<body>
       <template id="memeda">
                <div>
                        <h1>{{ test }}</h1>
                        <button @click="test()">按钮</button>
                </div>
    </template> 
</body>

<script>
Vue.component('myTest',{
template:'<h1>你好呀~</h1>',//或者定义template标签 通过#memeda选择器获取 必须放在一个根节点里面
data:function(){//或者data(){}
    return {
       test:"测试组件" 
    }
},
methods:{
    function test(){
        console.log(111);
    }
}
})
</script>
//调用
<my-test></my-test>

this.$set.(this.arr,index,value)//解决修改组件内部引用类型（数组，对象）之后 页面渲染不同步问题

封装底部导航demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.xiaohuwei.cn/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
    a:hover{
        text-decoration: none;
        transform:scale(1.1);
        color:red;
    }
    a{
        text-decoration: none;
        font-size:20px;
        transition: .3s;
    }
    a:focus{
        text-decoration: none;
    }
*{
    padding:0;
}
    </style>
</head>
<body>
    <div id="box">
        <navbar></navbar>
    </div>
    <template id="navbar">
        <div class="container-fluid text-center bg-info" style="height: 50px; line-height: 60px;position: fixed;bottom: 2px;width: 100%;">
            <div class="row">
                <div class="col-xs-4">
                    <a @click.prevent="memeda(0)" href="#" class="glyphicon glyphicon-user" v-if="!arr[0]"></a>
                    <a @click.prevent="memeda(0)" href="#" class="glyphicon glyphicon-user" style="color:red" v-else></a>
                </div>
                <div class="col-xs-4">
                    <a href="#" @click.prevent="memeda(1)" class="glyphicon glyphicon-home" v-if="!arr[1]"></a>
                    <a href="#" @click.prevent="memeda(1)" class="glyphicon glyphicon-home" style="color:red" v-else></a>
                    </div>
                    <div class="col-xs-4">
                            <a href="#" @click.prevent="memeda(2)" class="glyphicon glyphicon-menu-hamburger" v-if="!arr[2]"></a>
                            <a href="#" @click.prevent="memeda(2)" class="glyphicon glyphicon-menu-hamburger" style="color:red" v-else></a>
                        </div>
            </div>
        </div>
    </template>
</body>
<script>
    const ops = {
        data(){
            return{
                arr:[0,0,0],
            }
        },
        template:"#navbar",
        methods: {
            memeda(index){
                this.arr.forEach((v,k)=>{
                    this.arr[k]=0;
                })
                this.$set(this.arr,index,1);
            }
        },

    };
    Vue.component("navbar",ops);
    new Vue({
        el:"#box"
    })
</script>
</html>

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

注册局部组件

Vue.component('myTest',{
template:'<h1>你好呀~</h1>',//或者定义template标签 通过#memeda选择器获取 必须放在一个根节点里面
components:{
    testson:{
        template:'<h1>你好呀~</h1>',
        data:function(){//或者data(){}
    return {
       test:"测试组件" 
    }
},
methods:{
    function test(){
        console.log(111);
    }
}
    }
}
})

//调用
只能在父组件模板里面调用

定义插槽

<template>
<slot></slot>
</template>

名称	作用
prop	获取一个组件外的值作用：父子组件传值
slot	插槽，用于构建模板的时候占位，有具名和未具名的

父给子传值

<body>
    <div id="app">
    <fuji></fuji>
    </div>
</body>
<script>
var vm =  new Vue({
    el:"#app",
    components:{
        "fuji":{
            data() {
                return {
                    msg:"父级组件",
                }
            },
            template:"<ziji :nihao='msg'></ziji>",// 将父级的msg通过：给绑定 调用子级组件 页面显示为msg
            components:{
                "ziji":{
                    props:["nihao"],//接受父级的值
                    data(){
                        return {
                            msg2:"子组件",
                        }
                    },
                    template:"<span>{{ nihao }}</span>",
                }
            }
        }
    }
})
</script>

子给父传值

<body>
    <div id="app">
    <fuji></fuji>
    </div>
</body>
<script>
var vm =  new Vue({
    el:"#app",
    components:{
        "fuji":{
            data() {
                return {
                    msg:"父级组件",
                }
            },
            methods: {
                getval(val){//接值函数
                    this.msg = val;
                }
            },
      template:"<h1><ziji @change='getval'> </ziji>{{ msg }}</h1>",// 定义接值函数 页面显示为msg2
            components:{
                "ziji":{
                    data(){
                        return {
                            msg2:"子组件",
                        }
                    },
                    template:"<span></span>",
                    created() {
                        this.$emit("change",this.msg2);//模板挂载时 将变量抛出 谁抛的谁接
                    },
                }
            }
        }
    }
})
</script>

兄弟传值

兄弟传值为兄弟B传值给父级然后父级再传给兄弟A

<body>
    <div id="app">
    <fuji></fuji>
    </div>
    <template id="memeda">

        <h1>
                {{msg}}
            <zijione :lalala="key"></zijione>
            <zijitwo  @change='getval'><zijitwo>//定义接值函数 
        </h1>
    </template>
</body>
<script>
var vm =  new Vue({
    el:"#app",
    components:{
        "fuji":{
            data() {
                return {
                    msg:"父级组件",
                    key:""
                }
            },
            methods: {
                getval(val){//接值函数
                    this.key = val;
                }
            },
            template:"#memeda",// 定义接值函数 
            components:{
                "zijione":{
                    props:["lalala"],
                    data(){
                        return {
                            msg2:"子组件1",
                        }
                    },
                    template:"<span>{{ lalala }}</span>",//已经接到值了
                    mounted() {

                    },
                },
                "zijitwo":{
                    data(){
                        return {
                            msg3:"子组件2",
                        }
                    },
                    template:"<span>{{msg3}}</span>",
                    created() {
                        this.$emit("change",this.msg3);//模板挂载时 将变量抛出
                    },
                }
            },
        },
    }
})
</script>

Vue WEB前端开发总结
Vue Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个...
计算机毕业设计Python新冠疫情数据分析可视化平台
开发技术前端开发：VUE、ElementUI、ECharts、Maptalks、D3js 后端web开发：Fla...
开始Vue之旅(一)--Vue的介绍
对于前端开发者来说为什么要学习vue？由于近两年前端技术变革速度太快，vue不论针对web项目开发，网站制作，还是...
Web前端开发之构建Vue-cli3.0工程
** Web前端开发之构建Vue-cli3.0工程 ** # 参考资料 Standard Tooling for ...
2018-05-16
web前端开发什么是web前端 web前端开发也戏称“web前端开发攻城狮”，目前这个职位也叫“大前端”。这个职...
怎么能学好Web前端开发，如何快速掌握Vue框架
怎么能学好Web前端开发？如何快速掌握Vue框架？很多人看好Web前端的市场前景，因此纷纷选择学习入行前端行业。很...
Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架（三） vue是一款渐进式javascript框架，由evan you开发。vue...
最全vue面试必问题（附题）
vue面试题： web前端开发工程师（vue） | 智一面[http://www.gtalent.cn/exam/...
MVVM在前端(web)使用
前端框架vue,MVVM模式今天咱们不谈iOS,说说web(MVVM模式)。MVVM模式在前端开发应该还是挺多的...
2019年兄弟连web前端开发视频培训教程移动开发Html5 C
2019年兄弟连web前端开发视频培训教程移动开发Html5 CSS JS Web PHP VUE 随着互联网的迅...