weixin_42617604的博客

原文链接：https://www.jianshu.com/p/4394009f53b9Vue是怎么做到在我们更新了data之后就更新视图的呢?在我们new Vue 之后,生成的实例就是data的代理,data一发生改变,就会被setter知道这个时候就帮我们去更新视图。什么是getter&setter？let 我 = { 姓: "孙", 名: "笑川", get 姓名(...

前端路由的基本用法此章节一定要先看前面写的Part10（vue-cli搭建脚手架）或者用过vue-cli的再看，不然可能会的有点蒙什么是路由？----通俗的来讲，其实就是网址。比如 http://www.baidu.com/111 ，这个后缀 /111 的网址无论能否显示出来都是一个网址，这就是一个路由，访问不同的路由，就会加载不同的组件。用一个例子去理解用法：需求：使用npm run...

按照这个来配置就好了，这里相当于是帮你把webpack需要的繁琐的配置给你都弄好了，然后你直接从那里全部下下来就可以记得先下好nodejs，安装的代码记得全都c v，不要自己敲安装完nodejs之后再安装淘宝npm镜像，安装完了之后后面的安装速度会快一点npm install -g cnpm --registry=https://registry.npm.taobao.org然后按照下面...

这里介绍一下render函数。作用：使用render函数就不需要在template中一点点的写html了，可以通过函数去构建，实际上render函数就是用来构建一个组件的这里分为以下几点去讲解，每个都有一个小例子：1、render函数的初步了解2、render函数的第一个参数3、render函数的第二个参数4、render函数的第三个参数5、this.$slots在render函数中...

v-model作用：可以实现数据的双向绑定，没了。其实v-model是一个语法糖，等同于下面的代码<input v-bind:value="message" v-on:input="message = $event.target.value" />一、基本用法：与 v-bind 的用法差不多，直接在需要绑定的元素上加就好了<input type="text" v-m...

自定义指令用法：和组件类似，分为全局注册和局部注册，区别就是把component换成了directive钩子函数指令定义函数提供了几个钩子函数（可选）：bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document中）。update: 被绑定元素...

这里的下半部分包括：1、组件中使用v-model2、插槽的简单用法3、访问slot4、动态组件的使用组件相关的上半部分博客可以点击查看：1、组件中使用v-model需求：通过子组件的加号按钮来给父组件传递数据直接看例子吧<btn-comp v-model="total"><btn-comp>data:{ total:0},components:{...

组件原因：使用组件可以提升代码的复用性，非常的方便，节省了很多时间成本。由于组件设计的知识点较多，所以就分为两个部分写，这里先写上半部分。主要包括以下几点：1、组件的使用方法2、组件使用时的一些奇技淫巧3、父子组件传递数据4、单向数据流5、数据验证6、组件通信1、组件的使用方法组件的使用方法分为两点：全局注册和局部注册1.1、全局注册用法：Vue.component(‘t...

此章节涉及到的内容：1、vuex的store用法2、vuex的相关操作和核心用法什么是 vuex？vuex 是一个状态管理模式，可以用来共享数据。以淘宝为例，如果在首页登录了自己的账户，当点击首页的链接跳转到其他页面时，仍然会是登录状态。这就是vuex，而实现这些的是因为用到了vuex中的store（仓库），这个 store 会让各个组件获取到你当前的状态，根据状态去判断渲染出什么。...

此章节内容包括：1、Axios中的get请求2、Axios中的post请求3、vuex的store用法4、vuex的相关操作和核心用法1、Axios的get请求ajax的作用是与服务端进行数据交互，并且从服务端拿到所需要的数据，说白了就是两句话：发送请求，拦截响应。这里的 axios 的作用和 ajax 的作用基本上是一样的，用法上可能会有点区别。官方一点的说法是：axios 是...

内置指令作用： VUE中有很多内置的指令，使用这些指令能会让开发过程中变得更加方便，所以也是需要掌握的一、内置基本指令1、v-cloak作用：是解决初始化慢导致页面闪动的最佳方式，与 display:none 一起结合使用<style>[v-cloak]{ display: none;}</style><p v-cloak>{{ cloak...

1、什么是计算属性？因为VUE中 {{ }} 内只能写一行表达式，如果操作比较复杂导致表达式过长的话就会显得可读性很差，而且不好看，这时候就使用到了计算属性来代替这些复杂的操作例子：<div id="app"> //需求：把数组111,222,333翻转成333,222,111 //如果是不用计算属性写法 {{ text.split(',').reverse().join(...

1、了解 v-bind 指令概念：DOM元素经常会动态的绑定一些 class 属性和 style 样式，v-bind 可以动态的绑定元素的属性，并且更改属性，所以会经常用到例子：<div id="app"> <a v-bind:href="url">点我去百度</a> <img v-bind:src="imgUrl" alt="">...

VUE基础篇，包括以下内容：1、生命周期、钩子2、指令3、过滤器1、生命周期、钩子生命周期：Vue实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。生命周期钩子：就是可以让你在页面生成的不同阶段执行动作的api，作用就是只要页面到了这个阶段就会触发这个对应钩子里的js钩子共分为...