Vue WEB前端开发总结

Vue

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

---

1. vue 移动端hybird 框架 混合app框架

2. 安卓+ iOS 跨平台的套壳程序

3. 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-onor@	绑定事件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);
})

组件

全局组件

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

注册全局组件

        



//调用

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

封装底部导航demo

事件修饰符

...



...

注册局部组件

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

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

定义插槽

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

父给子传值

子给父传值

兄弟传值

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