VUE
橘九。
进击的小白
展开
-
24.VUE_插槽slot
什么时候需要用插槽:子组件除了展示自身标签外,还要展示一段内容,但是这个内容不是子组件所决定的,而是父组件传递过来的。按照以前学的内容,从父组件传递给子组件,需要通过属性的形式来传递。这样是可行的,但是会有一个问题,如果父组件向子组件传值传的比较少,这样做是没问题的;但是当要传的内容很多的时候,代码就会变得很难阅读。所以当子组件有一部分内容是根据父组件传递过来的DOM进行显示的时候,这时候...原创 2019-11-18 17:04:50 · 181 阅读 · 0 评论 -
23.VUE_axios写法优化
如果之前所有的发送请求过程都定义在vue组件中,每次都定义一遍比较麻烦,我们可以每个接口简化写一下,单独定义,然后在vue中调用即可;1.比如我先在src/api/api.js中进行接口发送封装;’import axios from 'axios';var host = 'https://dog.ceo';export const dogs = ()=>{ return ax...原创 2019-11-15 17:44:27 · 180 阅读 · 0 评论 -
22.VUE_axios_执行多个并发请求
执行多个并发请求function getUserAccount() { return axios.get('/user/12345');} function getUserPermissions() { return axios.get('/user/12345/permissions');}axios.all([getUserAccount(), getUserPermiss...原创 2019-11-14 18:13:07 · 1646 阅读 · 1 评论 -
21.VUE_axios_发送带参数的请求
GET 方法传递参数格式如下:// 直接在 URL 上添加参数 ID=12345axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通...原创 2019-11-14 18:03:22 · 761 阅读 · 0 评论 -
20.VUE_axios配置和使用
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文档。安装axios:...原创 2019-11-14 18:00:07 · 507 阅读 · 0 评论 -
19.VUE_实例的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。生命周期钩子的 this 上下文指向调用它的 Vue 实例。不要在选项属性或回调上使用箭头函数,比如 created: () => console.l...原创 2019-11-14 00:44:13 · 101 阅读 · 0 评论 -
18.VUE_组件components
定义Vue组件什么是组件:组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;组件声明在/src/main.j...原创 2019-11-13 21:57:00 · 150 阅读 · 0 评论 -
17.VUE_ query传参和params传参的区别
####1.query字符串传参路由: var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register', component: register } // name 或 path ...原创 2019-11-12 22:15:43 · 164 阅读 · 0 评论 -
16.VUE_嵌套路由
重定向和别名使用原创 2019-11-12 18:13:10 · 100 阅读 · 0 评论 -
15.VUE_路由_router-link制作导航
之前 用 a标签 ,每次都需要在href 里面添加 #, 用router-link 可以避免 <router-link to='/login' tag="span">登录</router-link> <router-link to='/registe' tag="span">注册</router-link>我们想设置默认路由显示指定的组建 ,...原创 2019-11-12 17:22:22 · 150 阅读 · 0 评论 -
18.VUE_路由_name的用法
一、路由重定向在定义routes数组时,可以指定页面的重定向链接。比如,当打开配置了路由的页面时,自动跳转到/first页面:{ path: '/', redirect: '/first'},二、<router-link>标签一些属性介绍(来源菜鸟教程)1.to表示目标路由的链接。 当所在的 <router-link>被点击后,内部会立刻把to的值传到 rou...原创 2019-11-11 21:00:45 · 760 阅读 · 0 评论 -
14.VUE_路由
路由一、常见应用场景需求一:后台系统最常见的,就是点击左边的导航栏的页面1,右边就会显示页面1的内容,然后刷新的话,页面依旧停留在页面1,而不是跳到默认首页去。需求二:一个页面中,有几个不同的画面来回点击进行切换二、准备工作Vue.js的路由模块是vue-route安装下载1.npm:cnpm install vue-router(推荐)2.直接下载:https://unpkg.c...原创 2019-11-11 17:57:21 · 149 阅读 · 0 评论 -
12.VUE_vue中使用elementUI
vue中使用elementUI引入Element因为整个项目是依赖ElementUI框架做的,所以采用了全部引入elelent地址:https://element.eleme.cn/#/zh-CN/component1,在项目根目录执行命令:进行安装npm i element-ui -S2,在main.js中引入element:import Element from 'elemen...原创 2019-11-07 21:11:24 · 134 阅读 · 0 评论 -
11.VUE_v-model实现双向绑定
v-bind<template> <div> <form> <label for="username">用户名:</label> <input type="text" id="username" placeholder="...原创 2019-11-07 21:06:09 · 165 阅读 · 0 评论 -
13.VUE_Table表单的使用
<template slot-scope="scope"> <div> <el-table ref="multipleTable" class="project_list" :data="tableData" tool...原创 2019-11-11 20:59:37 · 720 阅读 · 0 评论 -
10.VUE_v-if和v-show
再看一下v-if和v-show的案例:<template> <div class="p1"> <p v-if="flag1">p标签啊由v-if控制</p> <p v-show="flag2">p标签啊由v-show控制</p> </div></template&g...原创 2019-11-05 23:12:50 · 121 阅读 · 0 评论 -
9.VUE_插值表达式和v-bind
1.如果需要直接插入文本值,则需要用{{}}括起来<template> <div class="p1"> <p>{{name}}{{msg}}</p> </div></template><script> export default { name: "hel...原创 2019-11-05 22:57:52 · 575 阅读 · 0 评论 -
8.VUE_练习使用组件
1.先在components目录下创建组件hello01.vue主要是<template>中的视图层v并定义M中的data数据;<template> <div class="p1"> <p>{{msg}}</p> </div></template><script>...原创 2019-11-05 22:43:57 · 189 阅读 · 0 评论 -
7.VUE_WebStorm配置启动
import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({ render: h => h(App),}).$mount('#app')<template> <div id="app"> <img alt="Vu...原创 2019-11-05 22:31:29 · 133 阅读 · 0 评论 -
6.VUE_计算属性computed
计算属性计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子:<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="https://cd...原创 2019-10-31 19:08:46 · 139 阅读 · 0 评论 -
5.VUE_条件与循环
条件判断v-if条件判断使用 v-if 指令:<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min....原创 2019-10-31 18:46:31 · 138 阅读 · 0 评论 -
4.VUE_模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。插值1. 文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:...原创 2019-10-31 18:26:43 · 135 阅读 · 0 评论 -
3.VUE_通过简单案例了解VUE
每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下:var vm = new Vue({ // 选项})直接写个小的案例,下边我分析下并找出对应模型的部分.<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title...原创 2019-10-30 18:04:38 · 401 阅读 · 0 评论 -
2.VUE_环境配置
Vue官网:https://cn.vuejs.org/一、安装官网安装:https://vuejs.org/js/vue.min.js,然后用<script>导入Staticfile CDN(国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.jsNPM方法因为nmp是和Node.js一起安装的包管理工具,所以安装Node.j...原创 2019-10-30 17:17:38 · 158 阅读 · 0 评论 -
1. Vue.js和MVVM
之前一段我们学习了前端三大模块,HTML,CSS和JS这三个部分也是学习VUE的基础;一、什么是Vue.js?前端三大主流框架Angular.js、React.js、Vue.js简单小巧使用gzip压缩后,只有20kb左右入门容易自动进行响应式更新只需要关注前端业务逻辑,无需操作DOM高级特性解耦视图与数据可复用组件前端路由状态管理虚拟DOM二、MVVM模式MV...原创 2019-10-30 17:01:30 · 293 阅读 · 0 评论