Vue
关注
分享
扫一扫
文章平均质量分 74
Vue
九宫格输入法
正在码代码ing
展开
-
28.Vue Vuex状态集中式管理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 官方用户指南 https://vuex.vuejs.org/zh/ 简单的说，在复杂应用中，Vuex 对vue应用中多个组件的共享状态进行集中式的管理； 这个状态自管理应用包含以下几个部分： state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actions，响应在 view 上的用户输入导致的状态变化。 以下是一个表示“单向数据流”理念的简单示意： Vuex具体原创 2021-07-17 11:49:40 · 172 阅读 · 1 评论 -
27.Vue Router编程式路由导航
编程式，顾名思义，就是通过写代码来实现路由跳转； 主要有三个方法；push(压入栈)，replace(替换)，back(回退) 改下前面实例： 学生信息列表<template> <div> 学生信息列表 <ul> <li v-for="(student,index) in students" :key="student.id"> <router-link :to="`/menu2/subM原创 2021-07-17 11:49:23 · 193 阅读 · 0 评论 -
26.Vue Router路由组件传参
我们点击路由的时候，经常需要传递参数，路由组件传参分为param和query传参两种方式； 我们分别来学习下； 首先我开发了两个服务接口： http://localhost:81/student/list 获取所有学生信息接口 返回：{"ret":1,"studentList":[{"id":1,"name":"张三","age":20,"grade":"一年级"},{"id":2,"name":"李四","age":25,"grade":"二年级"},{"id":3,"name":原创 2021-07-17 11:49:10 · 171 阅读 · 1 评论 -
25.Vue Router路由缓存
vue Router缓存路由keep-alive 平时开发应用，有那种多tab的表单； 类似图上，多tab页，我们要保证 用户切换的时候，表单数据依然存在； 我们把前面的实例，两个子菜单，都加个input；<div> 子菜单1内容 <input type="text"></div> 我们发现 每次切换，文件框里的数据都没了，说明每次切换，路由组件都销毁掉，每次点开重新生成； 如何解决这个问题呢； vue提供了keep-aliv原创 2021-07-17 11:48:50 · 683 阅读 · 1 评论 -
24.Vue Router嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件 搞个实例，菜单1下面再搞两个子菜单； 首先我们在pages下建两个子菜单： SubMenu1.vue<template> <div> 子菜单1内容 </div></template><script> export default { name: "SubMenu1"原创 2021-07-17 11:48:36 · 133 阅读 · 0 评论 -
23.Vue Router路由基本使用
vue Router路由组件是vue的核心组件； 平时我们通过路由组件来实现导航菜单以及各种页面切换； vue Router路由组件安装； 我们用vue-cli初始化的时候，可以选择添加vue Router； 也可以单独 执行 npm install vue-router --save 来安装； 我们首先建两个目录 router和pages，分别放路由路由模块配置文件和组件文件 再建两个组件Index.vue和Menu1.vue； Index.vue<templat原创 2021-07-17 11:48:09 · 199 阅读 · 1 评论 -
22.Vue 过渡&动画
vue提供了vue 过渡&动画支持，用起来非常简单； 直接用transition标签 然后再定义样式即可； 定义：TransitionItem.vue<template> <div> <button @click="isShow=!isShow">toggle</button> <!--transition标签包裹住--> <transition name="fade"> &原创 2021-07-17 11:47:42 · 112 阅读 · 1 评论 -
21.Vue Ajax框架vue-resource&axios
vue的ajax框架有vue-resource和axios； vue-resource插件非官方库，目前vue1,2都支持； axios是ajax通用请求库，vue官方推荐；vue-resource： 主页：https://github.com/pagekit/vue-resource 安装下vue-resource，命令：npm install vue-resource main.js里全局引入，使用该插件；import VueResource from 'vue-resou原创 2021-07-17 11:45:08 · 221 阅读 · 1 评论 -
20.Vue slot插槽
我们前面讲过传值，今天讲的是可以直接传一个标签，通过slot插槽实现；主要作用： 某一个区块，先占位，然后可以动态的搞个标签进去，方便切换该位置的内容，无需再搞多个页面； 新建Foot.vue 假如引入该组件的父组件没有给插槽设置内容，那默认就显示 ‘’要被替换的内容‘’；如果设置了内容，那将被替换掉；<template> <div class="foot"> <!--这里的 <slot name="f">要被替换的内容</原创 2021-07-17 11:44:48 · 2794 阅读 · 0 评论 -
19.Vue 消息订阅与发布组件Pubsub
我们前面讲了父子组件之间通过prop来实现消息传递；但是再其他情况，比如兄弟组件，爷孙组件消息传递时候，就要用到高级的消息订阅与发布； 首先我们安装下消息订阅与发布pubsub组件； 命令：npm install --save pubsub-js 然后我们来改造下前面的案例； 修改App.vue：<template> <!--声明标签--> <Menu :menus="menus" :webSite="webSite"></Menu&g原创 2021-07-17 11:44:08 · 252 阅读 · 0 评论 -
18.Vue 自定义事件实现父子组件交互
前面我们父组件通过传递方法对象，来实现子组件调用父组件，我们也可以通过自定义事件来实现； 主要通过：this.$emit(‘myEvent’) 我们修改下前面的案例：@addMenu=“addMenu” 绑定事件； 因为我们去掉了 传值，所以Menu.vue子组件里 prop里去掉，以及this.addMenu我们要改成 this.$emit(‘addMenu’,menu) 触发事件，效果一样；<template> <div> <a :hre原创 2021-07-16 15:55:58 · 243 阅读 · 0 评论 -
17.Vue 父子组件方法传递及回调
开发的时候经常会遇到子组件需要调用父组件方法，来实现业务逻辑； 这时候我们常用的方式是父组件直接传一个方法给子组件，然后子组件调用父组件传来的方法； 改造下前面的案例，App.vue增加一个新增菜单 addMenu 方法，这个方法最终要在子组件调用：<template> <!--声明标签--> <Menu :menus="menus" :webSite="webSite" :addMenu="addMenu"></Menu></te原创 2021-07-16 15:49:56 · 1096 阅读 · 0 评论 -
16.Vue 通过Prop实现父子组件数据传递
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。 父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”： 创建Menu.vue，制作几个菜单链接，当前菜单链接的内容和参数时写死的：<template> <div> <a href="https://cn.vuejs.org/" title="Vue.js官网"> <img src="../assets/logo.p原创 2021-07-16 15:46:49 · 500 阅读 · 0 评论 -
15.Vue 基于vue-cli搭建HelloWorld项目
首先这个index.html是项目首页，名字不要改； 这个src下的main.js 这个是项目入口配置文件，名字不要改； 现在我们把 src下的文件删除，然后来全新的写一个HelloWorld；我们新建一个组件App.vuevue文件，分三大块，<template>模版代码块，<script>是js代码块，<style>是样式代码块；<template>模版代码块只能有一个根节点，多个根节点无法渲染；<style>是样式代原创 2021-07-16 15:37:13 · 558 阅读 · 0 评论 -
14.Vue cli脚手架安装
vue-cli 是vue官方提供的一个脚手架工具，用于初始化一个Vue项目；vue-cli的优势:1、成熟的vue项目架构设计，而且会跟随vue版本的更迭而更新；2、提供了一套本地测试服务器，而且是一个热加载的服务器；3、提供了自己的一套集成打包上线的方案，webpack 或者gulpify在创建项目的时候可以进行选择；有了以上优势，可以非常快速的搭建项目；vue-cli对系统的要求:vue-cli 是命令行的一个工具，系统需要1、node.js(>=4.x)2、能使用node的命令原创 2021-07-14 16:51:22 · 177 阅读 · 0 评论 -
13.Vue 生命周期
生命周期示例图：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。每个生命周期都会有对应的生命周期的函数，或者叫做勾子函数；实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-07-14 14:14:38 · 139 阅读 · 0 评论 -
12.Vue 表单处理（值绑定）
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：<!-- 当选中时，`picked` 为字符串 "a" --><input type="radio" v-model="picked" value="a"><!-- `toggle` 为 true 或 false --><input type="checkbox" v-model="toggle"><!-- 当选中第一个选项时，`se原创 2021-07-14 14:09:10 · 298 阅读 · 0 评论 -
11.Vue 表单处理（双向绑定）
文本：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>文本</h2> <input v-model="message" placeholder="ed.原创 2021-07-14 12:31:27 · 124 阅读 · 2 评论 -
10.Vue 事件处理器
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <button v-on:click="coun原创 2021-06-22 15:53:11 · 157 阅读 · 0 评论 -
9.Vue 样式属性Class与Style绑定
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&g原创 2021-06-15 16:58:31 · 172 阅读 · 0 评论 -
8.Vue 监听属性
案例：计算一个数值的平方，这里先用计算属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <input type="text" v-model="n" style="width: 30px"原创 2021-06-15 16:44:38 · 102 阅读 · 0 评论 -
7.Vue 计算属性
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。computed属性，用于计算复杂业务逻辑，把复杂逻辑抽取，实现维护方便模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="app"> {{ message.split('').reverse().join('') }}</div>下面的实例中声明了一个计算属性 reversedMessage 。提供的函数将用作属原创 2021-06-15 16:39:03 · 111 阅读 · 1 评论 -
6.Vue 循环语句
循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表：<div id="app"> <h2>列表遍历</h2> <ul> <li v-for="item in items"> {{item.name}} </li&g原创 2021-06-15 16:32:29 · 137 阅读 · 2 评论 -
5.Vue 条件语句
v-if：1.条件判断使用 v-if 指令：<div id="app"> <h2>v-if：</h2> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <p>学的不仅是技术，更是梦想！</p> <p>哈哈哈，打字辛苦啊！！！</p> </template><原创 2021-06-15 16:26:17 · 213 阅读 · 2 评论 -
4.Vue 模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。插值：1.文本：数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：<div id="app"> <p>{{ message }}</p>&l原创 2021-06-15 14:35:19 · 582 阅读 · 10 评论 -
3.Vue 调试工具 devtools谷歌插件 安装
前言：npm是node.js的一个插件，安装之前请先安装node.js和npm1.到github下载：https://github.com/vuejs/vue-devtools/tree/v5.1.12.在vue-devtools目录 F:\RJ\vuejs\vue-devtools-5.1.1 下安装依赖包，cmd 输入命令：cnpm installnpm run build3.修改shells/chrome/manifest.json中的"persistent": false。将值改为tr原创 2021-06-04 09:22:10 · 244 阅读 · 0 评论 -
2.Vue HelloWorld实现
1.新建项目：Input输入框和 下方文本同步，用vue来实现，核心原理是数据监听和双向绑定；2.完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <input type="tex原创 2021-06-04 09:17:58 · 175 阅读 · 0 评论 -
1.Vue 简介
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API；Vue.js是一个构建数据驱动的Web界面的库。Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。简而言之：Vue.js是一个构建数据驱动的 web 界面的渐进式原创 2021-06-04 09:13:22 · 200 阅读 · 0 评论