vue的一些点点滴滴

vue.js

一：组件(components)

由三个部分组成

1.<template>

         <divid='mydiv'><Helloworld/></div>   //每个template里必须具有一个div作为容器

 </template>

 

2.<script>

         import组件名 from "url"

 

         exportdefault{

                  name:"app",//该组件的名字

                  components:{

                     Helloworld //注册从外部引入的组件

                  }

         }

</script>

 

 

二：vue实践遇到的问题

 

组件中this指向问题

<script>

        exportdefault {

           name: "Mvvn",

           data() {

              return {

                  people: {

                      name: "",

                      age: "",

                     address: ""

                  },

                  arr: [{

                      name: "xiebin",

                     age: 24,

                     address: "广东省"

                  },{

                      name: "gujing",

                     age: 24,

                     address: "广西省"

                  },{

                      name: "xiaoling",

                     age: 22,

                     address: "湖南省"

                  }]

              }

           },

           methods:{

             

              add: function() {

                  var that = this  //在闭包中this指向window  所以要转值

                  that.arr.push(that.people);

                  that.people = {

                      name: "",

                     age: "",

                     address: ""

                  }

//                alert(1)

               },

              deletes: function(index) {

                  var that = this

                  that.arr.splice(index, 1);

//                   alert(2)

              }

           }

      

    }

    </script>

 

当然处理这种this指向问题还有一种方式就是在export fault前先声明一个空对象，然后利用beforecreate函数将this赋值给该对象：如

var that = {}

        exportdefault {

           name: "Mvvn",

           data() {

              return {

                  people: {

                      name: "",

                      age: "",

                     address: ""

                  },

                  arr: [{

                      name: "xiebin",

                     age: 24,

                     address: "广东省"

                  },{

                      name: "gujing",

                     age: 24,

                     address: "广西省"

                  }, {

                      name: "xiaoling",

                     age: 22,

                     address: "湖南省"

                  }]

              }

           },

           beforeCreate () {

              that = this

              },

           methods:{

              add: function() {          

                   //在闭包中this指向window  所以要转值

                  that.arr.push(that.people);

                  that.people = {

                      name: "",

                      age: "",

                     address: ""

                  }

                 

              },

              deletes: function(index) {

                  that.arr.splice(index, 1);

//                   alert(2)

              }

           }

      

    }

    </script>

2.平级组件之间传值问题

3.vue axios post请求参数传递问题

4.vue 动态生成input取值问题

 

三：个人理解

其实在vue组件化开发的过程中，就相当于将原先一个页面的html分割成多个单一模块，然后通过import 和 template进行拼接，其中app.vue这个组件又起到

了组件组装车间的作用，将各个组件导入然后拼装到其设置的 div容器中 再通过main.js将其自身作为主组件渲染到index.html容器内进行展示；

 

 

四：vue 之钩子函数（生命周期函数）

 

 

 

Observe Data:观察数据是否变动

Init event：初始化事件

Compile template into render function : 将模板编译进渲染函数

 

Create vm.$el   and replace el with it :创建一个新的el来替换旧的

 

When data changes :当数据发生改变

 

Virtual Dom re-render and patch  之前的该Dom节点重新渲染 (浏览器重构)

 

 

根据自己的理解简单的说一下vue的生命周期函数以及双向数据绑定的原理！！

 

1.vue 生命周期函数整体包含一下几种：

beforecreate :创建前

created ：创建完成时

beforemount ：挂载前

mounted ：挂载完成时

beforeupdata ：数据更新前

updated ：数据更新完成时

beforedestory ：数据销毁前

destoryed ：数据销毁完成时

 

 

2.首先vue 是一种强调双向数据绑定的框架 即M –V –VM

因此当我们进行vue实例化时 或数据发生变化时，会激发vue内部的生命周期机制或钩子函数机制。

2.1

在beforecreate 与created之间会发生的事：

一、

触发observe 调用object.defindpropity函数的setter和getter监听元素节点的data属性的数据是否有变动，并依照指令初始化事件函数。

二、

如果数据发生了变动，新的数据将重新赋值给变量。但此时的新的el即view(dom节点)并没有重新渲染，这也从侧面解释了为什么 vue是数据驱动页面，先有数据再有页面！

三、

所以在beforecreate函数执行前，vm（v表示view,el；m表述model,data）都是undefind的

 

当在created函数执行完成时，m已初始化好了,可以获得。但v依然没有进行渲染

2.2

在created ---mounted函数之间发生的事：

一、

首先判断是否有el 和template选项，假若都有，机制会将新的模板编译进渲染函数，同时创建一个新的el来替换旧的，当然在数据更新函数执行前还会再做一次数据监测，看数据是否变动，变动则重构浏览器，直到mounted函数完成，然后进入本次生命销毁阶段！

 

这也是vue双向数据绑定的原理：数据劫持！

 

（双向数据绑定的原理有三种：vue:数据劫持、augular:脏值检测、发布者和订阅者模式）

 

http://www.cnblogs.com/tjyoung/p/6832234.html 安装vue

 

五、组件间传值：

http://blog.csdn.net/h5_queenstyle12/article/details/75386359  参考网址vuex

 

http://www.cnblogs.com/Zsmile/p/6256651.html

 

https://www.cnblogs.com/lastnigtic/p/6486693.html  route  路由参考网站

vuex ：状态管理模式（共享数据）（组件间数据传递）

https://vuex.vuejs.org/zh-cn/   帮助文档

 

 

1.一般的子传父利用vue的events事件this.$emit(“事件名”,data)(自定义事件)传递

2.父传子可以使用vue的props接口;

3.插槽  ：在parent.vue中的<child></child>间写内容，然后在child.vue中添加<slot></slot>  内容就会展现在子组件中

 

利用插槽 可以间接的实现子向父传递信息

Parent.vue中<p slot-scope=’val’ slot=’s1’>{{val.text }}<p> 

在child.vue中<slot name=’s1’ text=’ 我就是要传递的信息’></slot>

 

 

 注意：对于需要实时更新的数据不能使用缓存  不能使用 keep-alive

 

 

<template>

    <div id="box">

       <!--我是父组件-->

       {{ showcompo }}

       <button @click="change">点击我改变组件</button>

    </div>

</template>

<script>

    import child1 from './child1'

    import child2 from './child2'

    export default {

       name:"box",

       data(){

           return {

              showcompo:"child1"  //直接将child1渲染到box中

           }

       },

       components:{

          

       },

       methods:{

           change(){

              this.showcompo = "child2"

              }

           }

    }

</script>

<style scoped>

   

</style>

 

多利用vue中的temple模板 以及v-if  v-show来处理多种情况的需求  而不是使用js控制

对于需要在多个组件共用的代码 可以封装在一个方法中 然后在main.js中注册进vue中  比如

//点击
const goTo = (a,b,c) =>{
    router.push({name:a,params:{title:b,routing:c}})
}
Vue.prototype.$goTo = goTo//这种方式相比于纯写router.push省了不少代码

------------------------------------------------------------------------------------------------------------------------

这里需要注意的是：如果我们在router-view中包了一层keep-alive时  组件中mounted定义的方法只会执行一次，如果想每次加载都执行。则需要activated()  而不是mounted()

keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。这就是问题所在了。

解决办法：

使用Vue组件切换过程钩子activated(keep-alive组件激活时调用)，而不是挂载钩子mounted：

 

关于打包时常见问题：比如出现unexpected pun (()等错误时

https://blog.csdn.net/u012103212/article/details/80966914

开发遇到问题：

一、图片不出来  可以使用require()

二、使用插件是显示节点不存在  查看一下插件初始化是否写在了created()函数中，因为created（）函数是在html生成前就进行的

三、当我们判断后端传过来的数组是否为空时  务必使用v-if  而不是v-show   否则会报错

四、在我们监听物理返回键的时候可以利用mui中的mui.back = function(){return false} 解决  

五、使用vue2.0打包出来的webapp出现兼容性问题  ，解决方法是利用babel-profill  以及在webpack中配置babel-loader等能将es6转换成es5的工具和插件

六、一般的我们直接从输入框获取的value是字符串类型的  哪怕是数字也是   因此我们在做数字间对比判断的时候务必将其转换成数字格式，否则有时会出现意想不到的bug  比如if判断进不去等

关于vue-cli优化的常用方式:

1.在使用ui库时,尽量使用按需加载方式

2.异步加载,尤其是对于路由配置

3.服务端开启 gzip压缩

4.使用webpack插件对静态资源进行拷贝

4.使用CDN+webpack（一般 js库的都比较大 可达几百KB如果我们将不需要经常变的内库用CDN加载 就不需要从服务器中获取 将大大减少要加载的资源总量 从而提升项目构建时间！）

参考：https://www.cnblogs.com/macq/p/8330316.html

 

由于vue2.0打包出来的webApp必须是安卓6.0以上的版本才能正常显示  原因是低版本的浏览器无法解析es6语法

因此我们需要配置babel

1，npm 安装

npm install babel-polyfill 

npm install es6-promise

2，main.js 引入 

import 'babel-polyfill'

import Es6Promise from 'es6-promise'

require('es6-promise').polyfill()//二选一

Es6Promise.polyfill()

3.webpack.base.conf.js

module.exports = { 

　　entry: { 

　　　　"babel-polyfill":"babel-polyfill",

　　　　 app: './src/main.js'

},