工作之谈，使用vue开发项目（不间断更新）

        最近一，两个月都在用vue做一个后台管理中心系统，刚接触vue的时候看那些命令符号还是能看的懂，vue的特点是不去获取DOM元素（当然你想获取DOM，this.$refs.标记名来获取整个DOM对象），而是用data（）里面的数据去控制DOM元素的变化。

        常见的控制元素显示和隐藏，用v-if较多，也有v-show用的少。v-if=‘data’，data为true时，显示，false时，整个DOM对象都不会出来，也就是F12看不到隐藏的DOM对象，但是他会留有<!-- -->这种注释标记，估计是把他给注释掉了，但又看不见。

        v-show 就是用的css里的display：block和none。隐藏的DOM对象F12还是能找到他。条件控制显示隐藏用v-if，如果是经常来回切换用v-show。

绑定 v-bind   简写:   可以在绑定DOM对象上的自有属性或者自定义属性。 父组件传值给子组件用的最多就是这个咯。

而子组件传值给父组件是通过this.$emit('自定义事件名'，‘值1’，‘值2’，......)；父组件接收回来对应自定义事件绑定要触发的方法。

@自定义事件名=‘方法名’

          绑定事件  v-on:  简写 @ ，  @click用的最多，@change用在input控件较多，例如上传图片的按钮，下拉，输入框等等。

v-model ，vue一大特色，双向数据绑定，v-bind 和 @input 的结合体。 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange。所以v-model只适用于input控件的原因。

          在vue里，有一个思路是组件，什么是组件？一个页面，一个页面里的头部区域，头部区域里的左边区域div也可以是一个组件。组件的目的是为了复用，可以理解成是一个可重复用的功能或者区域。引用组件的本身叫父组件，被引用的叫子组件。父传值给子，通过v-bind，子组件里面用props:{data:{type:String,default:''}},先用props来声明绑定过来的数据，可限定传进来的数据类型，初始值，（多限定少bug呗），就可以在子组件里使用。子传值给回父，就是通过通过this.$emit('自定义事件名'，‘值1’，‘值2’，......),在父组件里绑自定义事件在子组件上@自定义事件名=‘方法名’。就是通过这个自定义事件，让子组件传值给到父组件里面来。

          路由，刚开始学是学的晕乎乎的，不知道他怎么走的。后来学习后，理解后，敲代码去验证和尝试。有所了解了。router-link和router-view。router-link渲染后再HTML代码里是a标签，有个to属性，渲染后是href属性。router-view就是你跳转之后的页面在这里面显示，渲染后是一个div。做出来的效果类似用jquery做的选项卡切换，只是他是切面之间点击切换。在单页面开发里，需要有一个router.js的页面来管理整个项目里页面的路由访问。路由传值有两个对象。params和jquery。

this.$router.push(name:'路由的命名',params:{id:1,type:'good'});在路由里的path要写上 path:'list/:id/:type'。在浏览器路径就会看到 /list/1/good。this.$router.push(name:'路由的命名',query:{id:1,type:'good'});不需要再path写额外东西。

在浏览器路径就会看到 /list?id=1&type=good。这个就等于a标签上的路径传参，看着不美观，而且暴露参数咯。建议用params对象传参多些。还有导航守卫beforeRouterUpdate(to,from,next){}      to是下一个路由对象，from是上一个路由对象，next是要走下去的一个方法把。      从当前路由获取传过来的参数   this.a =  this.$router.params.id 。

严谨写法是 this.a = this.$route.params.hasOwnProperty('id') ? this.$route.params.id : '';