分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

Vue.js入门

发布时间:2023-09-06 02:04责任编辑:顾先生关键词:js

Directive 指令

v-for:

<li v-for=’food in foodList’>{{fppd}}

{{}}

new Vue({

  el:

  data:{

  foodList:[…]

}

})

v-bind:

:src

:class=’klass’

new Vue({

   el:

   data:{

     Klass:’btn btn-default’

}

})

 

:class ={active:isActive}

new Vue({

   el:

   data:{

     isActive:true

}

})

 

v-on:

v-on:click=’CLICK’

new Vue({

   el:

   methods:{

 CLICK(){

     Console.log(‘clicked’)

}

}

}

})

示例二:

v-on=’{ mouserenter:onEnter,mouseleave:onLeave }’

示例三:

<form v-on:submit=’onSubmit’>

</form>

示例四:

<form v-on:submit=’onSubmit($event)’>

</form>

示例五://vue把这个也封装了

<form v-on:submit.prevent=’onSubmit($event)’>

</form>

示例六:

 <form v-on:keyup=’fun’>

</form>

示例七:

<form v-on:keyup.enter=’fun’>

</form>

v-model:

v-model.lazy //blur的时候才会触发

v-model.trim

v-model.number //字符串转字母

computed:{

  sum(){

    return this.math + this.pyshics +this.english

}

}

 

 

组件:

Vue.component(‘alert’,{

Template:

Methods:{

}

})

<alert><alert/>

new Vue({

  el:’#seg1’

})

new Vue({

  el:’#seg2’

})

父子通信:

props:[‘a’,’b’]

子父通信:

$emit()

任意平行间组件通讯:

事件调度器 var Event = new Vue()

“我说, 花花说” 案例

$.emit(‘xxx’,…)

$.on(‘xxx’,…)

Filter:

使用管道符 |

{{length|meter}}

Vue.filter(‘meter‘,function(val){

  return val + ‘元‘

})

自定义指令:

自定义指令前面要加v,格式是v-directive

定义的时候就不用了

自定义指令配置传参:

比如我想:

我可以:

。。。(这里写的不详细,以后可以再来看)

组合Mixins

官网示例:

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1

 

插槽Slots:

Vue-Router:

引入vue-router.js

Var routes = [

  {

Path:’/’,

Component:{

   Template:`

    <div>

      <h1>首页</h1>

    </div>

`

},

{

Path:’/about’,

Component:{

   Template:`

    <div>

      <h1>关于我们</h1>

    </div>

`

}

}

]

Var router = new VueRouter({

   Routes:routes

})

New Vue({

   El:’#app’,

   Router:router

})

<Router-link to=’/’></Router-link >

传参:

:params

{{$route.params.name}}

子路由:

Children:{

Path:

Component:

}

手动访问和传参:

this.router.push(‘/about’)

this.router.push({name:’user’,params:{name:’..’}})

命名视图:

Components:{

 A:{

Template:``

}

B:{

Template:``

}

}

<Route-view name=’A’

<Router-view name=’B’

导航钩子:

Router.beforeEach(function(to,from,next){})

Router.afterEach(function(to,from,next){})

路由匹配:

Console.log(‘to.matched:’,to.matched.some(function(item){

}))

元数据:

Path:’/’,

Meta:{

  Login_required.true

}

//item.meta.Login_required

Vue.js入门

原文地址:https://www.cnblogs.com/eret9616/p/9326767.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved