vue.js
Boxbiu
这个作者很懒,什么都没留下…
展开
-
vue: 项目启动报错 You may use special comments to disable some warnings.
vue项目启动报错 You may use special comments to disable some warnings.解决办法找到build目录xia的webpack.base.conf.js文件注释掉如下图所示的代码原创 2019-12-18 19:46:51 · 734 阅读 · 0 评论 -
Vue:npm run dev报错:travel@1.0.0 dev: `webpack-dev-server --inline --progress --config build/web
执行npm run dev的时候报错在项目目录下依次执行命令npm installnpm run build最后执行npm run dev问题解决,项目启动成功原创 2019-11-25 16:11:46 · 1887 阅读 · 0 评论 -
Vue:Vue动画效果全解析
Vue中的CSS动画原理当使用transition 标签包裹标签时,Vue会自动分析其css样式,从而构建动画流程。下图中的点的开头到结尾即为一个动画流程,当一个动画流程执行时,内部被transition 标签包裹的标签瞬间增加两个fade-enter 和 fade-enter-active标签,在动画的第一帧执行结束后,fade-enter去除,同时加上fade-enter-to,在动画执行...原创 2019-11-25 01:11:35 · 1260 阅读 · 0 评论 -
Vue:动态组件与v-once指令
通过组件实现一个简单的点击切换功能<div id="app"> <child-one v-if="type === 'child-one' "></child-one> <child-two v-if="type === 'child-two' "></child-two> <button @click="...原创 2019-11-23 00:45:25 · 211 阅读 · 0 评论 -
Vue:作用域插槽
作用域插槽必须是template开头结尾使用 slot-scope="props"来接收数据,这里的props是自定义的使用这种方式的时候显示什么,怎么显示不再是子组件决定了,而是父组件调子组件的时候给子组件传递模版<body> <div id="app"> <child> <template slot-scope="props"&...原创 2019-11-23 00:21:04 · 192 阅读 · 0 评论 -
Vue:插槽的作用,具名插槽的使用
一.插槽的作用声明一个child组件<div id="app"> <child>你好Box</child> </div> <script> Vue.component('child',{ template: `<div> <p>Hello box</p>...原创 2019-11-22 17:21:44 · 1186 阅读 · 0 评论 -
Vue:非父子组件间的传值--bus(总线/观察者模式/发布订阅模式)
非父子组件间的传值通过在Vue.prototype上绑定bus属性,在之后所创建的vue实例都具有bus这个属性,子属性接收到数据后,通过emit向父组件传值,通过每个组件都含有的生命周期钩子mounted,创建方法通过this.bus.$on触发传值的事件并接收所传的值<div id="app"> <child content="Box"></child&...原创 2019-11-21 01:31:03 · 430 阅读 · 0 评论 -
Vue:给组件绑定原生事件
如何给组件绑定原生事件其实方法很简单,只需要在@click加上native -->@click.native,即可给组件绑定原生事件<div id="app"> <child @click.native="hdclick"></child> </div> <script> Vue.component('chi...原创 2019-11-21 00:58:35 · 211 阅读 · 0 评论 -
Vue:组件参数校验与非 props 特性
对props接收到的数据进行参数校验<div id="app"> <child :content="123"></child> </div> <script> Vue.component('child',{ props:{ content: String }, template: '...原创 2019-11-21 00:49:40 · 237 阅读 · 1 评论 -
Vue:通过一个小的计数demo演示父子组件传值,emit,props
创建一个简单的点击计数的功能<div id="app"> <counter :count="0"></counter> <counter :count="1"></counter> </div> <script> var counter = { props: ['count'],...原创 2019-11-20 22:57:55 · 388 阅读 · 0 评论 -
Vue:子组件使用的细节,子组件中的data,ref的使用,
我们创建一个table<div id="app"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table></div>我们希望每一行的...原创 2019-11-20 22:09:28 · 2718 阅读 · 0 评论 -
Vue:v-for的使用,列表的循环,对象的循环,数据改变,set的使用
v-for循环列表其中item为内容,index为下标注意这里的key为唯一值,尽量不使用index<div id="app"> <div v-for="(item, index) of list" :key="item.id"> {{item.text}} ---- {{index}} </div> </div> ...原创 2019-11-20 17:18:35 · 1992 阅读 · 0 评论 -
Vue:class的对象绑定,style的对象绑定
如何实现class的对象绑定创建一个点击文字改变颜色的小demohtml<div id="app"> <div @click="hdclick" :class="{activated: isActivated}">Hello Box</div></div>js<script> var app = new Vue({ ...原创 2019-11-20 16:10:21 · 701 阅读 · 0 评论 -
Vue:计算属性和方法的区别和watch监听器的使用
html<div id="app"> <div>{{firstName + " " + lastName}}</div></div>js<script> var app = new Vue({ el:'#app', data:{ firstName:"Min", lastName:"Box" } }...原创 2019-11-20 15:02:41 · 317 阅读 · 0 评论 -
vue :v-text和v-html的区别和使用
首先新建一个小demohtml<div id="app"> <div>{{name}}</div> <div v-text="name"></div> <div v-html="name"></div></div>jsvar app = new Vue({ el:'#app', ...原创 2019-11-20 13:54:27 · 499 阅读 · 0 评论 -
vue第一个小demo:使用vue.js做一个简单的todolist
html<div id="app"> <!-- 使用v-model绑定输入框中的数据 --> <input type="text" v-model="todoValue"/> <!-- 使用v-on触发时间,click,点击事件 --> <button v-on:click="hdclick">提交</button>...原创 2019-11-20 01:55:45 · 429 阅读 · 0 评论