最近一,两个月都在用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 : '';