vue
ronghua_yang
学习前端
展开
-
Vue3组件通信总结
前言我们知道vue3的Composition Api是它几个最大亮点之一,所以下文都是在setup中演示代码的实现。后面会以开发几个简单form组件为例子来演示。基本操作这里先简单开发一个VInput的输入框组件。组件就像一个函数,主要就是处理输入和输出。Vue3在setup函数上提供了两个参数,一个props,一个是context下面的emit方法,分别来处理输入和输出。props现在VInput就是子组件,我需要它能够接受父级传递一个值,让它可以帮我做后续的逻辑处理在返回给父级。所以,这里原创 2020-12-16 21:07:41 · 10957 阅读 · 1 评论 -
深入浅出vue.js 最佳实战
聊下Vue.js开发项目的最佳实践以及风格规范,为列表渲染设置属性Keykey这个特殊属性主要用在Vue.js的虚拟DOM算法中,在对比新旧虚拟节点时辨识虚拟节点。在v-if/v-if-else/v-else 中使用key如果一组v-if+v-else的元素类型相同,最好使用属性key(比如两个元素)// 不好的做法<div v-if="error"> 错误:{{ error }}</div><div v-else> {{ results }原创 2020-12-13 17:14:43 · 707 阅读 · 0 评论 -
Vue3新特性
官方还没有正式推出来,利用@vue/composition-api先预热一下初始化项目npm install -g @vue/clivue create vue3npm install @vue/composition-api --save// main.js 导入import VueComposition from '@vue/composition-api'Vue.use(VueComposition)一、setupsetup是专门为使用vue3的composition-api新特性原创 2020-12-03 23:43:24 · 158 阅读 · 0 评论 -
Vue.js 模板语法
1. Vue.js 模板语法Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。2. 插值文本数据绑定最常见的形式就是使用{{...}}(双大括号)的文本插值:文本插值<div id="app"> <p>{{ me原创 2020-11-27 19:40:31 · 124 阅读 · 0 评论 -
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won‘t
vue-cli项目打包报错Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.报错原因因为vue-cli的默认配置中,publishPath是用绝对目录, 所以dist文件夹里的文件必须放在服务器的根目录, 如果你想本地打开的话, 可以在npm run build完成之后执行以下命令:npm install -g http-serve...原创 2020-09-12 10:02:08 · 8198 阅读 · 0 评论 -
vue中的动画
vue中的动画使用过度类名实现动画动画自定义v-前缀钩子函数实现半场动画transition-group元素使用过度类名实现动画使用tranisition元素,把需要被动画控制的元素包裹起来,tranisition是vue官方提供的。<tranisition> <h1>我需要动画</h1></tranisition>自定义两组样式,来控制tranisition内部的元素实现动画(1) v-enter(这是一个时间点)是进入之前,元素的原创 2020-08-29 16:15:38 · 146 阅读 · 0 评论 -
vue-resource实现get,post,json请求
vue-resource实现get,post,json请求getpostjson除了vue-resource之外,还可以使用‘axios’的第三方包实现数据的请求。在引入vue-resource包时,因为vue-resource依赖于vue,所以要先引入vue,再引入vue-resourceget假如get的api为:http://vue.studyit.io/api/getlunbo<input type="button" value="get请求" @click="getInfo">原创 2020-08-28 14:17:54 · 724 阅读 · 0 评论 -
vue生命周期钩子
vue生命周期钩子生命周期图示beforeCreateCreatedbeforeMountMountedbeforeUpdateUpdated生命周期图示beforeCreate表示实例完全被创建出来之前,会执行他。数据观测(data observer)和event/watcher事件配置之前被调用。注意:在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化beforeCreate() { console.log('beforeCreate')原创 2020-08-28 09:46:13 · 103 阅读 · 0 评论 -
v-bind及class与style的绑定
github利用git上传项目文件初始化仓库,在git中输入:“git init”添加文件项目:在git中输入 “git add .”描述项目信息,输入:git commit -m “项目信息”将本地的仓库关联到github上,输入:git remote add origin “你的ssh仓库地址”。把代码上传到github仓库,输入:git push -u origin master如果显示如上图,则须把readme.md文件下载到本地,输入:git pull --rebase or原创 2020-08-26 15:10:41 · 234 阅读 · 0 评论 -
vue报错
执行vue报错出现如下情况解决方法:在编译vue是报错,排查后是,在.vue文件中后加入空行后就能够解决了。出错情况如下:表示多次导入element-ui解决方法如下:原创 2020-08-25 18:39:37 · 237 阅读 · 0 评论 -
Eslint报错整理与解决方法
Eslint报错整理与解决方法1.‘Unexpected tab character’ 字面意思理解呢就是意想不到的制表符,当时出现的时候就是我习惯的使用Tab键去打空格,但是eslint默认不认可Tab,所以解决方法很简单: 在eslint的配置文件中(.eslintrc)rules项中添加一行:"no-tabs":"off"。如下:2.‘expected indentation of 2 spaces but found 1 tab’ 字面意思就是预期缩进2个空格,但找到1原创 2020-07-18 20:10:40 · 1885 阅读 · 0 评论