![](https://img-blog.csdnimg.cn/20210521103158584.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
vue
Lhy@@
不写博客的程序媛不是记性好的程序媛。
展开
-
Vue源码之虚拟DOM与Diff算法
虚拟DOM一、虚拟DOM1.1、h() ==》虚拟节点Vnode1.2、将虚拟节点 上树(显现到界面上)二、Diff算法策略一、虚拟DOM1.1、h() ==》虚拟节点Vnodeh( sel , data ,c )sel: 选择器 ; data:属性(class,id,key…); c:文本节点 或者 虚拟节点h()返回虚拟节点:Vnode文件 h.jsexport default function(sel,data,c){ if(arguments.length!=3){原创 2022-03-07 10:53:07 · 403 阅读 · 1 评论 -
Vue源码之mustache模板引擎核心
Vue原创 2022-03-07 09:51:33 · 270 阅读 · 0 评论 -
Vue 简单封装component 并上传到 npm
一、新建一个 Vue 项目注释:可以是Vue2.0构建 也可以是Vue3.0 构建新项目,这个案例使用的是Vue2.0。二、先看下我的项目文件结构简单介绍下:example 文件夹 ----- 是原 src 文件夹,用来开发过程中测试组件packages 文件夹 -----是新建的,保存着组件以及涉及的样式、js文件,打包文件新建了vue.config.js ---- 配置启动的 入口文件如果想要完整代码:git download 地址代码中也有相应的注释。...原创 2021-10-13 10:54:10 · 244 阅读 · 0 评论 -
Vue Router路由跳转方式(含参数)
1、router-link1. 不带参数// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name 2.带参数 <router-link :to="{name:'home', params: {id:1}}">原创 2021-06-25 19:52:26 · 540 阅读 · 1 评论 -
Vue之 v-model 数据的双向绑定
目录一、v-model 的使用范围二、v-model 基本用法三、v-model 的实质四、自定义组件(Input) v-model 双向绑定五、自定义check组件 v-model一、v-model 的使用范围v-model 官网解释。二、v-model 基本用法 谈及Vue ,都会说到MVVM(Mode-View-View-Model)双向绑定。v-model 就是个很好的证明,input 输入的值,会立即显示到 span 上,<template> <div>原创 2021-06-04 15:16:43 · 468 阅读 · 0 评论 -
Vue watch 与 computed
目录一、watch二、computed一、watchvue 的功能属性 : watch:监听数据的变化,主要监听:data 数据props 数据路由 data 数据:data() { return { b: 120, obj:{ c:99, d: 100, }, state: "", }; },watch:{ //简单属性 num(newValue,olbValue原创 2021-06-03 14:42:35 · 75 阅读 · 0 评论 -
Vue 之vue-cli 脚手架项目的目录结构介绍
一、项目的目录结构项目例子二、目录结构介绍node_modules : 项目的依赖中心public : 静态资源文件,和assets 不同的是:public不会被webpack打包,使用的是绝对路径src :项目的核心区域:所有的开发文件的核心内容区域,包括组件,静态资源等等。assets : 静态文件夹,使用的是相对路径components : 整个vue功能组件的存放位置App.vue : 整个vue的根组件,main.js :vue 的入口文件,...原创 2021-06-02 14:32:44 · 231 阅读 · 0 评论 -
Vue 之使用vue-cli 脚手架快速生成vue项目
1、安装 vue-cli 步骤vue-cli 是 vue 的脚手架工具,帮助我们快速生成了 vue 的起步项目,它内置了一些必备的比如打包工具,配置文件等等。安装 vue-clinpm install -g @vue/cli检查 vue-cli 是否安装成功vue --version 如果输出的是版本号,表示安装成功2、创建 vue 项目步骤vue create projectname它会让你选择 vue 2 还是 vue 3,根据喜好选择,我选了vue原创 2021-06-02 11:32:30 · 196 阅读 · 0 评论 -
VSCode Vue项目中报错 [vue/require-v-for-key]
一、错误如下[eslint-plugin-vue][vue/require-v-for-key]Elements in iteration expect to have ‘v-bind:key’ directives.Renders the element or template block multiple times based on the source data.二、解决办法 更改vetur配置 vscode->首选项->设置->搜索(vetur原创 2021-05-28 17:28:05 · 814 阅读 · 0 评论 -
Vue 解惑之 关于axios 回调函数中 this 的指向
一、主要内容SendGet 函数中的两个this打印情况如果 this 不想等,找找原因?二、打印结果两个this 是不一样的,out this 指向的是Vue 实例;inner this 指向的是window;三、结果分析其实两个this指向不一样是因为调用它们所在函数的对象不一样,out this所在的函数SendGet 是被Vue 实施调用,inner this 所在的回调函数时是在执行栈中被执行,this指向就是window了四、修改 this 的指向方法 这个修改原创 2021-05-28 11:04:40 · 891 阅读 · 1 评论 -
Vue项目引入自定义.css的样式文件
Vue项目引入自定义.css的样式文件原创 2021-03-27 16:22:17 · 552 阅读 · 0 评论 -
Vue -- 获取点击元素的兄弟元素
一、首先 //首先是获取当前点击事件 //view绑定并传递 $event <span v-show="depart" v-on:click="searchDepart($event)">部门</span>二、然后,script e.target; //是你当前点击的元素 e.currentTarget; //是你绑定事件的元素 //获得点击元素的前一个元素 e.currentTarget.prev原创 2020-10-17 14:42:01 · 4331 阅读 · 2 评论 -
vue-element-ui表单验证走过的坑(表单项明明有值,却总是提示验证失败)
首先,看看官方(https://element.eleme.cn/#/zh-CN/component/form)例子(我就截取部分):视图:<el-form-item label="特殊资源" prop="resource"> <el-radio-group v-model="ruleForm.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio l原创 2020-09-27 15:01:22 · 1769 阅读 · 2 评论 -
vue element ui el-autocomplete模糊查询功能
相关的控件属性 方法参考:https://element.eleme.cn/#/zh-CN/component/input需要注意的是:el-autocomplete中数组值的结构必须是{value:'值',·····}value 所对应的就是:下拉列显示的文本,所以你发现后台请求到了数据,但是组件下拉列空白,就说明你需要数据格式化一下,将要显示的内容的key 改为value!...原创 2020-09-11 15:59:04 · 746 阅读 · 0 评论 -
Vue Itea软件里直接npm run build 报错npm ERR! missing script :build
导致报错的环境:1、missing script :build;看了下项目的整个目录:2、度娘了一番,大多数的解决方案是:查看package.json的内容,比如:如果是build:prod -----> 对应你输入的指令就是:npm run build:prod --report3、如第二步 :本人的项目里有两个package.json文件,本人点开了第一文件,查看:看图可知本人指令:npm run build 是没错的,4、后来我把第二个package.j.原创 2020-09-11 15:45:33 · 1579 阅读 · 0 评论 -
计算属性与methods方法对比
都可以实现复杂的计算并且响应。不同之处:计算属性会对结果进行缓存的,如果属性不变的话,不会重新进行计算; methods每次调用都会重新执行函数。...原创 2020-04-01 16:21:55 · 295 阅读 · 0 评论 -
Vue 中 v-show 与 v-if
v-if:是真正的条件渲染,因为它会确保在切换过程中条件快内的时间监听器和子组件适当的被销毁和重建v-show : 不管初始条件是什么,元素总是会被渲染,并且只是简单的CSS进行切换。详细参考:Vue.js 官网介绍。...原创 2020-03-05 09:45:14 · 222 阅读 · 0 评论 -
Vue组件创建
Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})来自...原创 2020-01-06 09:01:58 · 105 阅读 · 0 评论 -
vue项目中,网页地址栏添加小图标
前提:Vue项目,网页添加小图标相信大家都知道图标的添加方法:在<head></head>里添加,在Vue项目中的index.html里编辑<link rel="shortcut icon" type="image/x-icon" href="图标的路径">需要主要的是:1、图标的格式:.ico(尺寸:16*16)2、图片存放的位置。解...原创 2019-12-31 15:17:13 · 2292 阅读 · 0 评论 -
element-ui表单验证rules
其实在element-ui官方文档上,关于rules的用法已经讲得很详细了。以下是例子代码:<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"&g...原创 2019-12-30 11:14:18 · 1402 阅读 · 0 评论 -
vue项目打包的时候出现 CssSyntaxError问题,导致npm run build失败
就是有些地方css存在语法错误,修改好就可以打包啦。原创 2019-12-25 15:06:19 · 1563 阅读 · 2 评论 -
简单增删改查功能VUE轻应用开发项目总结
1、手机端字体的大小:最小:12px ,一般标题的大小为14/16px;2、关于本地缓存的使用:a、首先引入插件:cnpm install --save vuex b、创建js文件如store.js:state里定义缓存的变量import Vue from 'vue'import Vuex from ...原创 2019-12-17 10:14:15 · 314 阅读 · 0 评论 -
打包Vue项目并发布到Tomcat服务器
第一、修改config/index.js的两处:第二、执行 npm run build 命令第三、将工程下的dist文件 复制粘贴到 Tomcat下的webapp文件夹下原创 2019-04-20 16:02:44 · 757 阅读 · 0 评论 -
Vue 创建一个新项目的基本步骤
第一、进入到需创建项目的目录下,输入:vue init webpack ProjectName(项目名),这里会对项目的初始配置。第二、进入项目 cdProjectName(项目名),第三、下载包, npm install,到此项目创建完成第四、 编辑项目界面可以添加一些ui插件,比如element ,cnpm i element-ui -S第五、项目需要网络请求可添加axios...原创 2019-03-23 16:35:52 · 1956 阅读 · 0 评论