标签：vue

木灵鱼儿 6年前 vue前端开发快速入门与专业应用

Vue 动态组件

component通过compoent标签加上:is就可以判断让哪些组件显示。compoent可以理解为一个所有组件的母体，它包含了所有的组件，通过:is的值就可以让对应的组件显示出来。<div id="app"> <ul> <li @click="showview='home'">主页</li> <li @click="showview='list'">列表</li> ...

5368 0 0

vue

制作一个简单的modal模态框

木灵鱼儿 6年前 vue 基础

制作一个简单的modal模态框

制作一个简单的modal组件，主要效果就是，点击按钮能够弹出这个模态框，然后模态框有两个按钮，点击取消能够关闭，确认就alert弹出提示信息，并且他的宽度由父组件控制，内容也由父组件渲染，然后按钮的事件也是父组件的。效果图首先我们创建一个组件，由于html代码过多，所以采用在html文件中创建，然后js获取。先引入一个css文件：<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css"><script id=&quo...

4493 0 0

vue modal 模态框

Vue 组件

木灵鱼儿 6年前 vue 基础

Vue 组件

组件创建注册vue通过组件可以达到重复利用，有点类似jq的插件，但是又不同，组件需要先创建再注册，注册后再到html里引用，组件又分全局和局部。全局组件注册var myTitle = Vue.extend({ template : '<h2>我是一个全局的标题组件</h2>' }); Vue.component('my-title',myTitle); var app = new Vue({ el : '#app' });<div id="app"> ...

5049 0 0

vue vue组件

Vue 过渡

木灵鱼儿 6年前 vue前端开发快速入门与专业应用

Vue 过渡

class类名之间的区别单个说明不是很好理解，我们直接看它的流程图v-enter(动效开始之前)>------>------>------>v-enter-to(动效结束) v-leave(动效开始之前)>------>------>------>v-leave-to(动效结束)这两个表示一个来回，第一次点击运行第一个v-enter,第二次点击运行v-leave，这样有来有回就产生动效。两个动效一般都不会在类名里面写transition：all .3s；这种来控制动效时间，他们都有一个通用的类名，在开始到结束一直存在的：v-enter-...

5306 0 0

vue vue过渡

Vue过滤器

木灵鱼儿 6年前 vue前端开发快速入门与专业应用

Vue过滤器

由于2.0版本取消了所有的内置过滤器，而且过滤器只能在插值中使用，也就是{{xxx}}中使用，格式为{{name | 过滤器}}；通过一个管道符号将前面需要过滤的内容隔开，后面写一个函数用于过滤，过滤器会将name作为第一个参数传入这个函数中，并且还支持传参。创建一个过滤器全局过滤器Vue.filter('deta',function(value){ if(!data instanceof Data) return value; return value.toLocaleDateString(); });通过Vue.filter创建一个全局过滤器，deta为过...

4572 0 0

vue vue过滤器

入门基础

木灵鱼儿 6年前 vue前端开发快速入门与专业应用

入门基础

v-if/v-else看书上说v-show也可以和v-else配合使用，实际上并不行。:style 也支持三元判断，和:class一样，三元需要加个括号，然后里面如果是普通的string值需要用引号括起来，不然会认为是对象或者Vue对象的属性方法那些，从而报错。例子：<div :class="['one',(isFlag?'two':'three')]"></div> <div :style="{'font-size':(isFlag?'1...

4746 0 0

vue