Vue
初来乍到到
一切文章都是为了记录自己
展开
-
Vue keep-alive的作用
最常见的的场景: 从 列表页-->详情页,详情页 -->列表页。我们希望,从 详情页-->返回列表页 的时候页面的状态是缓存,不用重新请求数据,提升用户体验。keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。实现原理: 其实就是created 时候将需要缓存的vnode节点放到cache中在render的...原创 2020-05-22 09:59:24 · 663 阅读 · 0 评论 -
Vue-cli 4安装
10月16日,官方发布消息称Vue-cli 4.0正式版发布,让我们看看更新了什么。安装的方式和vue-cli3.0的是一模一样的,对比了一下3.0的脚手架,除了目录发生变化一些,其他的都一样npm install -g @vue/cli查看版本:安装脚手架vue create hello-world default 是 使用默认配置 ...原创 2019-10-17 14:41:18 · 2051 阅读 · 0 评论 -
vuex
https://blog.csdn.net/qq_36407748/article/details/80174272一篇讲解的很细,很明白的关于vuex的文章。建议边看边练习。转载 2019-05-07 15:13:21 · 99 阅读 · 0 评论 -
vue中阻止@click事件冒泡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, max...原创 2019-05-27 16:18:51 · 23927 阅读 · 1 评论 -
v-for指令的使用
当在组件中使用 v-for 时,key 现在是必须的是为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性1.简单插值的使用<template> <p>{{list[0]}}</p> <p>{{list[1]}}</p> <p>...原创 2019-07-11 14:56:56 · 3722 阅读 · 0 评论 -
Vue路由懒加载
路由懒加载当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。(官方是这样定义的) 实现懒加载起初是这样的: import HelloWorld '@/components/HelloWorld ' routes: [ { p...原创 2019-07-12 10:14:50 · 125 阅读 · 0 评论 -
Vue重定向
在router文件中index.js里面的routes中加入默认路径{ path:"/", redirect:"index"}原创 2019-07-12 10:18:39 · 2491 阅读 · 0 评论 -
Vue反向代理(解决跨域问题)
在config文件中index.js文件里第13行配置;起初是这样的:module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, //第13行 // Various Dev Server set...原创 2019-07-12 10:28:17 · 1251 阅读 · 0 评论 -
Vue中v-model的数据双向绑定
<template> <div id="app"> <div id="example-5"> <select v-model="selected"> <option disabled value>请选择</option> <option>小明</opt...原创 2019-07-16 16:46:08 · 190 阅读 · 0 评论 -
Vue v-if和v-show的区别
使用v-if和v-else或v-else-if之间不能添加其他元素。<p v-if="type==1">正确示范</p><p v-else>索隆</p>v-else元必须紧跟在带v-if或者v-else-if后面<p v-if="type==1">错误示范</p><p>路飞</p&g...原创 2019-07-25 18:23:05 · 446 阅读 · 0 评论 -
Vue scoped属性的作用
功能作用: 实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。实现原理: 可以进行观察DOM结构来发现:vue在DOM结构以及css样式上加上唯一的标记,保证唯一性来达到样式私有化,来保证不会被污染全局的作用。 使用栗子:<template> <div class="nav">hi</di...原创 2019-09-12 16:49:50 · 2194 阅读 · 0 评论 -
Vue底部导航icon图标或图标切换功能实现
功能需求:底部导航切换页面,同时切换图片。底部为公共组件 通过click点击事件获取下标来进行类名动态切换图标。这里之所以使用v-show,因为底部导航要进行频繁的切换。<template> <footer class="footer"> <ul> <li v-for="(item, index) of...原创 2019-09-24 13:43:37 · 7299 阅读 · 2 评论 -
vue拖拽
js 代码 在methos// 模块拖拽事件 move(e) { let Module = e.target; //获取目标元素 let _this = this; //算出鼠标相对元素的位置 let disX = e.clientX - Module.offsetLeft; let disY = e.clientY - Mo...原创 2019-05-09 17:08:46 · 383 阅读 · 0 评论 -
vue组件传值---- 非父子组件传值
import Vue from 'vue'export default new Vue上面就是bus.js文件内容<template id="banner"> <div> <p>组件一</p> <button @click="tap()">点击传值</button&g...原创 2019-01-02 17:28:42 · 269 阅读 · 0 评论 -
vue按钮倒计时
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> <style...原创 2019-01-03 20:18:53 · 774 阅读 · 0 评论 -
vue过滤器小案例
当我们请求后台数据时,我们有的就需要用到过滤器了,比如订单状态、性别等。下面就是过滤器的使用小案例<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="../lib/vue.js" type="text/j...原创 2018-12-29 16:30:20 · 535 阅读 · 0 评论 -
vue计算属性小案例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head>...原创 2018-12-29 16:33:17 · 540 阅读 · 0 评论 -
Vue项目脚手架搭建
安装淘宝镜像就是为了快速的安装npm包。(网速不好的建议使用)全局安装npm install-g cnpm--registry=https://registry.npm.taobao.org 安装脚手架cnpm install vue-cli创建项目vue init webpack myapp? Project name myapp (起项目名字)...原创 2019-07-05 16:37:49 · 762 阅读 · 0 评论 -
vue组件传值----- 父组件给子组件传值
父组件给子组件传值首先我们定义两个组件1.一个父组件和一个子组件。2.在子组件标签中绑定自定义属性名,值为父组件传送的值。3.子组件内部通过props,以数组的形式来接收书属性名---属性名指的是传送数据的变量。下面就是小案例:<!DOCTYPE html><html> <he...原创 2019-01-02 16:56:49 · 246 阅读 · 0 评论 -
vue组件传值----- 子组件给父组件传值
子组件给父组件传值首先我们需要定义两个组件,一个父组件和一个子组件。1.需要在子组件中写个自定义事件,值函数名(属于父组件)。2.子组件通过内部$emit进行传值,父组件通过函数参数来接收。下面就是小案例<!DOCTYPE html><html> <head> &...原创 2019-01-02 17:06:19 · 369 阅读 · 0 评论 -
vue定义组件
首先声明模板,第一步定义组件,第二步注册组件。第三部使用组件。下面就实现一个组件的小案例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>定义组件</title> <script原创 2019-01-02 17:43:00 · 126 阅读 · 0 评论 -
vue中利用ref来操作dom元素
在原生js中我们来操作dom原始是一件很麻烦的事情,vue中利用ref就可以来操作dom元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ref操作dom</title> <s原创 2019-01-02 19:15:58 · 5054 阅读 · 1 评论 -
vue组件单选和全选。
我这是一个关注的页面,功能是单选和全选,然后去各自的取消。我用的不是input框,用的是阿里的icon图标。先开始把图标隐藏,然后点击的时候再出现,再次点击就消失。<template> <div class="content"> <div class="guan"><span>关注你感兴趣的人</span&g原创 2019-01-15 21:30:44 · 950 阅读 · 0 评论 -
vue 选项卡
<div id="box"> <!--点击设置msg的值 如果msg等于0,第一个a添加cur类名,如果msg等于1,第二个a添加cur类名,以此类推。 添加了cur类名,a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式--> <div class="tab...原创 2019-04-10 11:33:19 · 221 阅读 · 0 评论 -
Vue插值文本换行问题
问题背景:后端返回的字符串带有\n换行符,但Vue将其插值渲染成div内部文本后,文本并不换行,换行符显示为一个空格目标:让文本在换行符处换行。解决方法:思路:实现文本换行有两种方法,一是HTML方法,即<br>标签;二是CSS方法,即white-space属性。方法1.使用v-html 首先,将字符串里的\n替换为<br>,然后用v-ht...转载 2019-04-09 14:04:35 · 2595 阅读 · 0 评论 -
vue搜索功能边搜索变显示
vue搜索功能边搜索变显示 话不多说直接上代码 <template> <div id="box"> <el-input v-model="title" placeholder="请输入内容"></el-input> <ul v-for="(item,index) in s原创 2018-12-27 11:03:22 · 1849 阅读 · 2 评论