- 博客(141)
- 收藏
- 关注
RSS订阅转载 Vuejs路由过度动画
需要在App.vue文件里添加<transition>标签，并给标签起一个名字叫fade。CSS 过度类名：组件过度过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name='fade'，会有如下四个CSS类名：1、fade-enter进入过度的开始状态，元素被插入式生效，只应用一帧后立刻删除。2、fade-en...
2019-07-17 10:28:00
192
转载 ReactJS 的5种路由模式
我们一直在使用的路由方式是BrowserRouter，也就是浏览器的路由方式，其实React还有几种路由方式：1、BrowserRouter：浏览器的路由方式，也就是在开发中最常使用的路由方式2、HashRouter：在路径前加入#号成为一个哈希值，Hash模式的好处是，再也不会因为我们刷新而找不到我们的对应路径3、MemoryRouter：不存储history，所有路由过程...
2019-07-15 20:49:00
1193
转载 React组件的生命周期
一个组件完整的声生命周期包含实例化阶段、活动阶段、销毁阶段三个阶段，每个阶段又由相应的方法管理。过程中涉及三个主要的动作术语：- mounting表示正在挂载虚拟DOM到真实DOM- updating表示正在被重新渲染- unmounting表示正在将虚拟DOM移除真实DOM每个动作术语提供两个函数：- componentWillMount()- com...
2019-07-12 15:16:00
183
转载 React基础__JSX语法进阶
JSX语法两种数组的声明方式：1）第一种，在组件中遍历数组<script> let names=['web-react','web','react'] var Component = React.createClass({ render: function () { return <div> { ...
2019-07-11 16:57:00
135
转载 React基础__初识JSX语法
<script>var HelloComponent = React.createClass({ render: function () { return <h1>hello world.</h1>}})ReactDOM.render( <HelloComponent />, document.g...
2019-07-11 16:22:00
76
转载 ReactJS基础__Hello Word程序
在这里采用CDN引用react.js的方法，来编写hello word程序这里主要使用了两个方法1）react.createClass() 创建一个组件2) ReactDOM.render() 渲染代码如下：<!DOCTYPE html><html lang="en"><head> <meta cha...
2019-07-10 10:31:00
114
转载 vue 内置组件__slot讲解
slot 是vue的内置组件，主要分为传值和接收值两部分;首先写一个自定义组件：例如 <js></js>再写一个template模板并在构造器中使用components：{} 挂载，在构造器的data中写一个选项方法：data: { jsData: { url: 'http://www.baidu.com', ne...
2019-06-29 11:50:00
143
转载 vue 实例事件
好处是在构造器外部增加一个构造器内部事件有三个实例事件方法：- $on() // 点击一次执行一次- $once() // 只执行一次- $off() // 关闭事件方法外部方法通过 $emit 方法调用代码示例如下：<!DOCTYPE html><html lang="en"><head> <...
2019-06-29 11:19:00
133
转载 vue axios用法
可以用在前端后端（vue，Node.js）用法：- npm install axios安装完成后，需要在使用的文件中导入import asiox from 'asiox'const http = { get(url) { return axios({ url, method: 'GET' }) }}ex...
2019-06-29 10:20:00
108
转载 vue实例方法 example methods
介绍几个vue 的实例方法：- $destroy()==>销毁方法- $forceUpdate()==>更新方法- $nextTick()==>数据修改方法需要配合钩子函数使用具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta c...
2019-06-29 10:01:00
206
转载 vue实例，extend methods——实例属性 vue和jQuery.js一起使用
使用前需要引入jQuery.js CDN然后再构造器内部使用挂载，直接使用jQuery方法即可；在构造器外部也可以调用构造器内部的方法，需要给构造器命名，然后在构造器外部，使用构造器外部名称调用内部方法即可代码示例如下：<!DOCTYPE html><html lang="en"><head> <me...
2019-06-28 22:25:00
514
转载 vue.js基础__ extend 扩展选项
extend 扩展选项需要在构造器外部进行定义，并使用updated方法；在构造器中使用 extend 方法以对象的形式调用，方法的执行顺序为：原生的methods方法优先执行，然后是扩展的updated方法，最后执行的是原生的updated方法差值使用{{ }}进行插入，在构造器中设置delimiters:['${','}']，则可以使用${}进行插值代码示例如下：...
2019-06-28 22:07:00
285
转载 vue.js基础__ mixins 选项
mixins 选项主要应用于新增需求；在不改变原有方法的基础上，使用mixins 混入选项；- 以点击加1为例，分为局部和全局两种- 再混入选项中设置updated方法- updated 方法，会在局部，全局，以及原生方法中设置- 执行顺序为 全局的updated优先执行，然后局部的updated方法执行，最后原生的updated方法执行代码示例如下：&l...
2019-06-28 21:38:00
121
转载 vue.js基础__ watch 选项
watch 选项主要用于数据监控，有两种书写方式：一种是写在构造器内部，另一种是在构造器外部使用下面以监控天气为例，代码如下：- 每次加减5°C，在watch内部做 if 判断<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2019-06-28 20:01:00
124
转载 vue.js基础__ methods 选项
methods 选项主要定义了一个执行函数，以下例子主要讲述了组件的三种方式，包括内部组件，外部组件以及自定义组件的定义及使用方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...
2019-06-28 19:23:00
208
转载 vue.js基础__ computed 选项
computed 选项的好处是原始的值没有被污染，代码示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
2019-06-28 17:56:00
99
转载 vue.js基础__ propsData 选项
首先写一个扩展 ，头部标签然后再script中声明一个对象，对象中有一个模板需要挂载扩展，然后磁能生效propsData 主要用于传值，在扩展里需要接收，需用 props接收具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...
2019-06-28 17:27:00
153
转载 vue-cli, webpack + vue 目录结构解读
下面是安装好的项目目录：让我们依次解读：1、build- 与项目构建相关，webpack相关的都在这个目录下2、config- 开发环境配置3、node_modules- 里面是安装的各种包4、src- 源码目录5、static- 静态文件目录- 放一些图片，json数据等6、package.json转载于:https://ww...
2019-06-28 15:19:00
94
转载 vue-cli 的安装，webpack+ vue构建项目
概念：Vue-cli是vue官方出品的快速构建单页应用的脚手架由于使用 webpack 构建项目较多，所以在此也是用webpack构建项目首先来进行安装目录解读：安装完成后会出现接下来的提示信息按步骤操作即可安装完成后会出现node-modules包，所有下载的包都会在此文件夹中接下来可以通过 npm run dev 来启动项目项目启动后，出现如...
2019-06-28 14:58:00
95
转载 vue.js基础__componen 标签
以代码为例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2019-06-28 10:37:00
124
转载 vue.js基础__component 继承
component 继承就是父子组件的关系，在构造器外部写局部注册组件；如果把局部组件的编写放到构造器内部，若组件代码量很大，会影响构造器的可读性，造成拖拉和错误；所以要把组件填写的代码放到构造器外部或者说成单独组件；应先声明一个对象，对象里就是组件的内容，代码示例如下：<!DOCTYPE html><html lang="en">...
2019-06-28 10:12:00
176
转载 vue.js基础__componen props属性设置
以局部组件为例，在components中设置 props选项，挂载我们设置的属性，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
2019-06-28 09:41:00
112
转载 vue.js基础__component 初识组件
组件定义可分为两部分：一种是全局组件，另一种是局部组件;区别是全局组件可以全局调用，而局部组件，在作用域外不可调用1、首先来看一下全局组件，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...
2019-06-28 08:36:00
122
转载 vue.js基础__Template 模板
template 模板有四种写法，在此仅介绍三种：1、在script标签中写template2、写在body中，然后再new Vue（{}）实例对象中引用3、在body中 以script 形式写入，但是要声明script 标签类型，引入方式与第二种相同转载于:https://www.cnblogs.com/sunyang-001/p/11100180...
2019-06-27 22:58:00
193
转载 vue.js基础__Vue的生命周期（钩子函数）
Vue的生命周期，也就是钩子函数；Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容代码示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na...
2019-06-27 22:22:00
77
转载 vue.js基础__Vue.set 全局操作
Vue.set 用于操作数组，由于javascript的限制，无法直接使用下标对数组进行直接操作，所以vue提供Vue.set这种方法来操作数组，代码示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...
2019-06-27 21:51:00
130
转载 vue.js基础__vue.extend 扩展实例构造器
vue.extend 扩展实例构造器一般与组件联合使用代码示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
2019-06-27 21:30:00
119
转载 vue.js基础__Vue.directive 自定义指令，全局API
一、什么是全局API?全局API并不在构造器里，而是先声明全局变量或者直接在Vue省定义一些新功能，Vue内置了一些全局API，比如指令Vue.directive。简单来说就是在构造器外部用Vue提供给我们的API函数来定义新的功能二、自定义绑定事件- 自定义指令有五个生命周期（也叫钩子函数），分别是 bind, inserted, update, componen...
2019-06-27 17:53:00
152
转载 vue.js基础__v-pre & v-cloak & v-once 指令
1、v-pre 指令可以用于鸳鸯输出2、v-cloak 指令在渲染完成后，才显示3、v-once 仅渲染一次代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...
2019-06-27 16:32:00
108
转载 vue.js基础__v-bind 标签属性绑定
v-bind 顾名思义可以绑定标签属性，代码示例如下：v-bind 指令可以简写-->如v-bind:class 可以简写为 :class<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name...
2019-06-27 15:37:00
215
转载 vue.js基础__ v-model 数据源绑定指令
v-model 可以绑定文本框，文本域，多选框绑定一个值或绑定多个值，以及绑定单选框，代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...
2019-06-27 14:50:00
141
转载 vue.js基础__v-on指令
v-on指令是绑定事件，v-on:click 可以简写成 @click 以下代码可以完成加减运算，使用methods 方法属性还可以绑定键盘事件：转载于:https://www.cnblogs.com/sunyang-001/p/11096268.html...
2019-06-27 12:04:00
115
转载 vue.js基础__v-text & v-html指令
1、v-text以代吗为例：{{ message }} 与v-text=“message” 两种写法效果一致，但是 {{ message }} 这种方式在网络较慢的情况下，会出现不友好的页面显示方式， 所以推荐 v-text 这种写法2、v-html在语句中存在标签的情况下，v-text会将标签解析为文本；所以要用 v-html 这种写法...
2019-06-27 09:20:00
125
转载 vue.js基础__v-for指令
1、首先循环一个数组，代码如下：然后对数组进行排序，添加一个计算属性-computed：2、循环输出一个对象：对数组对象进行排序：转载于:https://www.cnblogs.com/sunyang-001/p/11094985.html...
2019-06-27 08:55:00
198
转载 vue.js基础__ v-if & v-else & v-show指令
1、v-if 条件判断为true时显示，为false时不显示代码如下：2、v-show 用法基本相同，为true时显示，为false时隐藏代码如下：转载于:https://www.cnblogs.com/sunyang-001/p/11094017.html...
2019-06-26 21:30:00
98
转载 vue.js基础__Hello Word!实例
1、新建项目文件夹，创建如下项目目录结构2、进入项目文件夹- 输入npm init -y 初始化项目- 生成一个package.json文件- 全局安装live-server 用于启动项目 输入npm install -g live-server命令3、创建一个index.html 文件，代码如下3、创建两个文件夹 分别为1) assets...
2019-06-26 20:26:00
124
转载 cookie
为什么需要cookie：cookie的典型应用：cookie的工作原理：cookie的属性：cookie的缺点：转载于:https://www.cnblogs.com/sunyang-001/p/11091411.html...
2019-06-26 17:50:00
52
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人