002_Vue零基础
关注
分享
扫一扫
文章平均质量分 59
002_Vue零基础
wnashi_万石
这个作者很懒，什么都没留下…
展开
-
0203父子组件的通信
父传子父传子的时候通过属性传递子要声明props:[‘属性名’] 来接收收到就是自己的了，随便你用在template中 直接用在js中 this.属性名 用子传父子组件里通过$emit(‘自定义事件名’,变量1，变量2)触发父组件@自定义事件名=‘事件名’监听子组件方法里 this.$emit(‘sendfather’,val1,val2)触发自定义事件父组件里 <child @sendfather=‘mymethods’><!DOCTY..原创 2021-03-13 01:35:32 · 168 阅读 · 0 评论 -
0401购物车案例
001_0401购物车案例(h3)源代码<!DOCTYPE html><html> <head> <title>购物车</title> <style type="text/css"> span { cursor: pointer; } </style> </head> <body> <div id="app"> <div>原创 2021-03-04 21:13:42 · 185 阅读 · 1 评论 -
0306路由守卫
001_0306路由守卫(h3)const router = new VueRouter({ ... }//前置的钩子函数 最后要执行next（）才会跳转router.beforeEach((to, from, next) => {// ...})//后置的钩子函数 已经跳转了不需要nextrouter.afterEach((to, from) => {// ...})路由守卫主要用于检验是否登录了，没登录就跳转到登录页面不让他在其他页面停留，但是现在这种处理主要的都原创 2021-03-04 01:57:40 · 76 阅读 · 1 评论 -
0305嵌套路由
001_0305嵌套路由(h3)router-view的细分router-view第一层中，包含一个router-view每一个坑挖好了，要对应单独的组件路由配置routes: [{path:’/nav’,name:‘nav’,component:Nav,//路由嵌套增加此属性children:[//在这里配置嵌套的子路由]}]源代码<!DOCTYPE html><html><head> <title&原创 2021-03-04 01:51:38 · 77 阅读 · 1 评论 -
0304路由的传参和取参
001_0304路由的传参和取参(h3)查询参配置（传参） :to="{name:‘login’,query:{id:loginid}}"获取（取参） this.$route.query.id路由参数配置（传参） :to="{name:‘register’,params:{id:registerid} }"配置路由的规则 { name:‘detail’,path:’/detail/:id’}获取 this.$route.params.id总结:to传参的属性里原创 2021-03-04 00:55:35 · 157 阅读 · 1 评论 -
0303路由的跳转
001_0303路由的跳转(h3)路由的跳转方式有：通过标签：<router-link to='/login'></router-link>通过js控制跳转this.$router.push({path:'/login'})区别：this.$router.push() 跳转到指定的url，会向history插入新记录this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上原创 2021-03-04 00:46:37 · 129 阅读 · 1 评论 -
0302路由的安装和使用
001_0302路由的安装和使用(h3)路由是以插件的形式引入到我们的vue项目中来的vue-router是vue的核心插件下载 npm i vue-router -S安装插件Vue.use(VueRouter);创建路由对象 var router = new VueRouter();配置路由规则 router.addRoutes([路由对象]);路由对象{path:'锚点值',component:要(填坑)显示的组件}将配置好的路由对象交给Vue在options中传递-原创 2021-03-04 00:40:53 · 101 阅读 · 3 评论 -
0202插槽和获取子实例父实例
001_0202插槽和获取子实例父实例(h3)slot插槽slot就是子组件里给DOM留下的坑位<子组件>DOM</子组件>slot是动态的DOMref获取子组件实例识别：在子组件或元素上使用属性ref=“xxxx”获取：this.$refs.xxxx 获取元素$el 是拿其DOMparent获取父组件实例（可在子组件直接使用this.parent获取父组件实例（可在子组件直接使用this.parent获取父组件实例（可在子组件直接使原创 2021-03-03 22:05:24 · 216 阅读 · 1 评论 -
0201组件化开发
001_XXXX(h3)创建组件的两种方式var Header = { template:‘模板’ , data是一个函数,methods:功能,components:子组件们 }//局部声明Vue.component(‘组件名’,组件对象);//全局注册 等于注册加声明了组件类型通用组件（例如表单、弹窗、布局类等)业务组件（抽奖、机器分类）页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）组件开发三步曲：声明、注册、使用源代码<html原创 2021-03-03 21:49:52 · 86 阅读 · 1 评论 -
0106计算属性和侦听属性
001_XXXX(h3)watch监听单个，computed监听多个思考业务场景：类似淘宝，当我输入某个人名字时，我想触发某个效果利用vue做一个简单的计算器当watch监听的是复杂数据类型的时候需要做深度监听computed 监视对象,写在了函数内部, 凡是函数内部有this.相关属性,改变都会触发当前函数源代码<html><head> <title></title></head><原创 2021-03-03 21:45:22 · 184 阅读 · 1 评论 -
0105过滤器
001_XXXX(h3)过滤器就是可以对我们的数据进行添油加醋然后再显示过滤器有全局过滤器和组件内的过滤器全局过滤器Vue.filter(‘过滤器名’,过滤方式fn );组件内的过滤器 filters:{ ‘过滤器名’,过滤方式fn }{{ msg | 过滤器名}}最终都是在过滤方式fn里面return产出最终你需要的数据源代码<html><head> <title>过滤器</title></head>原创 2021-03-03 21:23:18 · 73 阅读 · 1 评论 -
0104.单双向数据绑定及事件绑定
001_XXXX(h3)vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性)例子：<input v-bind:value="name" v-bind:class="name">单向数据绑定 内存改变影响页面改变v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染vue双向数据流 v-model 只作用于有value属性的元素例子：<input v-model="name" v-bind:class原创 2021-03-03 21:13:34 · 104 阅读 · 1 评论 -
0103指令
001_XXXX(h3)什么是指令在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。譬如在HTML页面中这样使用<div v-xxx=''></div>在vue中v-xxx就是vue的指令指令就是以数据去驱动DOM行为的,简化DOM操作常用的指令有哪些，及怎么使用这些指令v-text 不可解析html标签v-html 可解析html标签v-if 做元素的插入（append）和移除（remove）操作v-原创 2021-03-03 21:02:53 · 192 阅读 · 1 评论 -
0102引包、留坑、实例化
001_0102引包、留坑、实例化(h3)引包确认已经下载了node,然后执行命令 npm install vue页面引入刚下载的包<script type="text/javascript" src="vue.js"></script>留坑 即留一个vue模板代替的地方或者是vue代码对其生效的地方实例化 即启动Vue启动： new Vue({el:目的地,template:模板内容});实例化传入的是一个对象optionsoptions目的原创 2021-03-03 20:56:39 · 102 阅读 · 1 评论