vue学习笔记
willard_cui
这个作者很懒,什么都没留下…
展开
-
Vue条件渲染 v-if,v-else-if,v-else,v-show
1 v-if指令1.1 v-if:根据表达式的布尔值判断是否插入标签 v-if指令,当show为true时显示div内容,当show为false时隐藏div内容 <div id="root"> <div v-if="show">hello wirld</div> <button @click="handle&quo原创 2018-08-30 22:30:08 · 14088 阅读 · 0 评论 -
Vue 动画特效
1、过渡(摘自vue官网)Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点如下例: <style> .v-enter, .v-leave-to{ opacity: 0; ...原创 2018-09-13 20:30:37 · 2225 阅读 · 0 评论 -
Vue中的插槽和作用域插槽
1、Vue中插槽的作用和使用方法定义一个名child子组件,为该子组件添加内容应该在子组件的template中定义,直接在父组件的<child>标签中定义的内容不会被渲染,如下例。<div id="root"> <child> 需要插槽才能渲染的内容 <p>Dell</p...原创 2018-09-07 22:42:38 · 40728 阅读 · 24 评论 -
非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)
使用总线机制(bus)实现非父子组件间传值 在两个child组件间传值,实现点击一个child组件,另一个组件变成与此相同的值<div id="root"> <child content="the first value"></child> <child content="the second value">&原创 2018-09-06 21:17:07 · 208 阅读 · 0 评论 -
Vue动态组件与v-once指令
1、动态组件动态组件可以实现组件之间的切换,先看一个不使用动态组件实现组件切换显示的例子<div id="root"> <child-one v-if="type==='child-one'"></child-one> <child-two v-if="type==='child-two'">&a原创 2018-09-08 22:30:36 · 365 阅读 · 0 评论 -
Vue中父子组件传值
1、父组件通过属性向子组件传递数据: 1.1Prop 子组件通过props接收父组件的传值: props:['prop1','prop2','prop3',……]<div id="root"> <counter count="hello world"></counter> </div><script&a原创 2018-09-04 23:09:43 · 247 阅读 · 0 评论 -
Vue中的ref和$refs
Vue中的ref和$refsref 用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通DOM元素上使用,引用指向的就是DOM元素,如果用在子组件上,引用就指向组件实例:例如在DOM上使用ref <div id="root"> <div ref="hello" @click="handleClic...原创 2018-09-04 21:44:57 · 298 阅读 · 0 评论 -
Vue中的is属性,及子组件的data
1、is属性根据HTML规范,<table>、<ul>、<ol>、<select>等元素只能包含特定元素,当模板标签在使用有限制性的元素,在渲染时就会出现bug。如下例所示: <div id="root"> <table> <tbody>原创 2018-09-04 21:44:06 · 3601 阅读 · 0 评论 -
Vue中的Class和Style绑定
1、绑定Class1.1使用对象绑定:<div :class="{active:isActive}"></div>active这个class是否存在取决于isActive的值,如以下实例:设置样式 .activated{color=red}<div id="root" > <div @click="handleClick"原创 2018-08-29 21:49:00 · 2443 阅读 · 0 评论 -
vue组件: todolist功能开发,todolist组件拆分,todoLidt删除
通过todolist案例学习vue中组件的概念和使用‘1、 todolist功能开发使用v-model、v-on(@)、v-for指令实现todolist功能实例:<div id="root"> <input type="text" v-model:value="inputValue"> <button @click=...原创 2018-08-25 19:51:42 · 711 阅读 · 0 评论 -
vue 安装、挂载点、模板与实例、vue实例中的数据,事件和方法
1、安装1.1在Vue.js官网下载,并用<script>标签引用1.2使用CDN方法 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 1.3NPM方法命令行工具$ npm install vue2、实例、挂载点、...原创 2018-08-23 23:25:35 · 2988 阅读 · 0 评论 -
vue中的属性绑定和双向数据绑定、计算属性和侦听器
1、属性绑定v-bind :例如<div id="root"> <div v-bind:title="title">hello world</div></div><script> new Vue({ el:"#root", data:{原创 2018-08-23 23:25:52 · 7186 阅读 · 0 评论 -
Vue列表渲染 v-for
循环语句v-forv-for指令以item of/in array的形式实现循环1 v-for绑定数组v-for绑定数据到数组list来渲染列表<div id="root"> <div v-for="(item,index) in list" :key="item.id"> {{item.text}}---{{...原创 2018-08-30 22:43:17 · 1658 阅读 · 0 评论 -
Vue中多个元素或组件的过度
1、多个元素的过度对于原生标签可以使用v-if/v-else.当相同标签名的元素切换时,需要通过key特性设置唯一的值来标记,如下例:<style> .v-enter, .v-leave-to{ opacity: 0; } .v-enter-active, .v-leave-active{ ...原创 2018-09-20 21:50:10 · 1430 阅读 · 0 评论