Vue
傻她你呀
这个作者很懒,什么都没留下…
展开
-
js监听数据的变化
js监听数据的变化一般来说,变量的值为基本数据类型时基本上没有办法去监听数据的变化,例如:// 定义一个变量let name = "tom"// 变量name的值发生了改变name = "jerry"// 但是无法进行监听但是呢,变量的值为引用数据类型的时候就监听里面属性的数据变化let vm = { name: "tom"}// vm里边的name实际上可以进行监听Object.keys(vm).forEach(key => { definedAttribu原创 2020-06-25 22:54:11 · 19242 阅读 · 1 评论 -
js监听数组的变化
js监听数组的变化最近在造轮子的时候遇到了这么一个问题,那就是数组在调用内部方法的时候怎么才可以监听到数组发生了变化,举个例子:假设一个数组调用了一个push方法,如果才可以知道数组调用了push方法,怎么去监听呢???如果是直接调用数组内部的方法,那么不会监听到数组的变动,为此可以进行改造,代码如下:// 获取Array的原型,并创建一个新的对象指向这个原型const arrayMethods = Object.create(Array.prototype)// 创建一个新的原型,这就是改造原创 2020-06-25 22:38:52 · 11679 阅读 · 0 评论 -
Vue子组件向父组件传data数据
在Vue中,子组件是怎么向父组件传自己的data数据?原理:父组件可以通过给子组件绑定虚拟事件来向子组件传递自己的方法,因此这个虚拟事件就装载了父组件的方法,子组件拿到虚拟事件之后进行注册,就可以使用来自父组件的方法了,因此,只需要向虚拟事件传递参数,那么就相当于向父组件的方法传递参数,而父组件也因此拿到了来自子组件的数据。说那么多,直接上代码:(按照数据传递的流动方向)// 1....原创 2019-05-08 19:20:01 · 8236 阅读 · 7 评论 -
Vue子组件向父组件传递data数据和方法2
上一期通过比较复杂的方式才实现了子组件向父组件传递data数据,但是这一次是很简单的方式,利用 ref属性在子组件里设置ref属性,到时候父组件可以通过ref属性来获取子组件父组件使用 this.$refs.ref值来获取子组件,实际上不仅仅是子组件,在vue实例里面的任意一个DOM元素都可以通过ref属性来获取,因此比较方便,当父组件获取子组件的时候,就可以调用子...原创 2019-05-08 20:06:27 · 2224 阅读 · 0 评论 -
Vue创建路由对象vue-router
路由分为前端路由和 后端路由后端路由:每一个超链接对应一个url地址,每一个url地址对应着后端服务器里边的相应的数据前端路由:在单页面内,通过url地址的hash(#号)来实现不同页面的切换,或者不同组件之间的切换这里主要讲的是前端路由。1.首先定义组件2.然后创建一个路由对象,把组件注册到路由里,和路由连接,一个组件对应一个路由这里注意:compon...原创 2019-05-09 08:33:09 · 2550 阅读 · 0 评论 -
Vue通过query获取路由参数
上一期讲了如果创建一个路由对象以及使用,现在来讲Vue通过query获取路由参数可以看见com1组件里的路由参数为name=zhangsan&job=teacher使用 this.$route.query 来获取路由参数现在就是利用query直接获取路由参数并且以对象的形式展现出来点击按钮之后,查看控制台,可以看见:路由参数以对象的形式展现了出来...原创 2019-05-09 09:00:12 · 30709 阅读 · 0 评论 -
使用 vue-cli 快速构建一个 vue项目
之前说明了怎么手动构建一个项目,但是手动构建比较花时间,还要配置,下包,于是可以使用vue-cli(vue脚手架)构建一个vue项目,很快,也很方便。第一步:新建一个放 vue项目 的文件夹,可以在桌面上,也可以是任意你想要的路径,在这里我新建了一个appdemo1的文件夹用于放vue项目,然后打开cmd命令窗口,进入到这个文件夹,我的是appdemo1文件夹第二步:使用 cn...原创 2019-05-19 09:43:53 · 157 阅读 · 0 评论 -
Vue通过params获取路由参数
上一期使用query获取路由参数,这一次就是利用params获取参数要想通过params获取路由参数,在这之前要事先定制匹配规则,如图:com2/:name/:job 表示 /com2的下一级路由参数就是name,name的下一级路由参数就是job如果路由是这样的,例如:com2/lisi/student那么匹配规则,就有 name = 'lisi', job = 'studen...原创 2019-05-09 17:29:19 · 12500 阅读 · 0 评论 -
教你手动构建一个vue项目
首先要明白vue项目的基本目录结构,如下:1. dist2. src 2.1 index.html 2.2 index.js 2.3 App.vue 2.4 router.js3. webpack.config.js4. .babelrc以上是基本目录,首先应该初始化目录,使用 npm init -y初始化目录,会生成 p...原创 2019-05-18 17:05:27 · 1428 阅读 · 0 评论