Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容，而组件的通信更是vue数据驱动的灵魂，现就四种主要情况总结如下： 使用props传递数据---组件内部//html <div id="app1"><i>注意命名规定：仅在html内使用my-message</i><child my-message="组件内部数据传递"></child> </div> //js <script>Vue.component(child, {props: [myMessage],template: <mark>{{ myMessage }}<mark/>});new Vue({el: #app1}) </scri...
Vue2.0删除了很多1.0的比较实用的过滤器，如filterBy，orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能，自己又加入了大小写通用检索功能，比较简单，学一下。 <body><div class="app"><input type="text" v-model="name"><ul><li v-for="user in newUsers" >{{ user.name }}</li></ul></div><script>new Vue({el: .app,data: {name: ,users: [{ name: Bruce },{ name: Chuck },{ name: Jackie },{ name: 赵 }] },compute...
Vue 框架的入口就是 Vue 实例，其实就是框架中的 view model ，它包含页面中的业务处理逻辑、数据模型等，它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 Vue 实例在文档中经常会使用 vm 这个变量名表示 Vue 实例，在实例化 Vue 时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。 Vue 实例化的选项需要注...
本文实例为大家分享了vue图片加载与显示默认图片的具体代码，供大家参考，具体内容如下 HTML： <div class="content-show-img"><div class="show-img"><img class="default-image" :src="data.image" @load="successLoadImg" @error="errorLoadImg"></div> </div> JS： Vue.prototype.successLoadImg = function(event) {if (event.target.complete == true) {event.target.classList.remove("default-image");;var imgParentNode ...
这个插件未压缩版本只有7.62kb，很精简，支持img标签和background-img资源的lazyload。支持vue.js 1.0 和vue.js 2.0 安转 $ npm install vue-lazyload --save使用方法 //main.jsimport Vue from vue // import VueLazyload import VueLazyload from vue-lazyload//use custom directive Vue.use(VueLazyload)// use options Vue.use(VueLazyload, {preLoad: 1.3,error: dist/error.png,loading: dist/loading.gif,attempt: 1 })new...
一 过滤器写法 {{ message | Filter}}二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Vue自带的过滤器</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script src="../js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div class="test">{{message | cap...
本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html#Props本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更适合新手阅读 props数据传递①组件实例的作用域：是孤立的，简单的来说，组件和组件之间，即使有同名属性，值也不共享。 <div id="app"> <add></add> <del></del> </div> <script> var vm = new Vue({ el: #app, components: { "add": { template: "<button>btn：{{btn}}</button>"...
在网上搜索了Vuejs2.0 动态级联select许久未果，决定自己总结一下自己的经验，有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术，我参考了网上成熟的经验，选择以Vue.js 2.0+Vue-router+Vuex的全家桶。 select首先要区分单选和多选，v-model在select单选和多选上有区别。 select单选实例： <select v-model="fruit"><option selected value="apple">苹果</option><option value="banana">香蕉</option><...
html代码： <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? - : +}}]</span> </div> <!--v-show控制当前元素的display属性，根据v-show里面的值来判断，true显示，false不显示--> <ul v-show="open" v-if="isFolder"> <!--model用于双向绑定数据--> <item class="item" v-for="model in model.children" :model="mode...
一、需求与准备 1、准备 使用bootstrap实现页面的基础样式（依赖jquery），使用vue实现功能需要 2、功能需求 1）、表单实现输入任务清单后加入到展示项中 2）、点击删除按钮弹出警告框询问是否删除（bootstarp模态框插件） 3)、确定删除时，删除对应项（单项删除，全部删除） 4）、任务列表为空时，显示“数据为空” v-show二、实例 1、静态页面 demo使用bootstrap来快速搭建页面 1）、表单组件： .form, form-group, form-con...
Vue实例的一些简单方法 <!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"><script src="http://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box">{{a}}</div><script type="text/javascript">var vm = new Vue({el:#box,data:{a:1,},});//vm就是实例对象console.log(vm.$el); //这里就是div元素vm.$el.style.background = red;console.log(vm.$data); console.log(vm.$data.a); //1 </scrip...
市面上大多数关于Vue.js自定义指令的文章都在讲语法，很少讲实际的应用场景和用例，以致于即便明白了怎么写，也不知道怎么用。本文不讲语法，就讲自定义指令的用法。自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。比如谷歌图片的加载做得非常优雅，在图片未完成加载前，用随机的背景色占位，图片加...
实现此例您可以学到： vue-cli的基本应用父组件如何向子组件传递值单文件组件如何引入scssv-on和v-for的基础应用源码下载 一、搭建vue开发环境 1）更换镜像到cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 2）安装vue-cli cnpm install -g vue-cli 3）初始化vue项目 命令模式进入项目所在的目录，如d:\test\，输入vue init 项目名称即可。如果你想引入vue2.0框架，必须把nodejs、webpack和npm升级到最新版...
前言最近几个月一直在看VUE，然后试着只用原生js+vue实现某些组件。PC端时间选择组件 这是最开始实现的pc上的时间选择，平时移动端也在做，所以就想实现一下移动端的时间选择器，下面分享一下我实现移动端滚轮特效时间选择器的思路和过程。整个组件是基于vue-cli来进行构建的功能1.时间选择[ A.年月日选择 B.年月日小时分钟选择 C.小时分钟选择 D.分钟选择]2.滚轮效果[ A.构成一个圆环首尾相连 B.不构成首尾相连]3.时间选择范围设置...
最近看了 Vue.js 的递归组件，实现了一个最基本的树形菜单。 项目结构：main.js 作为入口，很简单： import Vue from vue Vue.config.debug = true import main from ./components/main.vue new Vue({el: #app,render: h => h(main) })它引入了一个组件 main.vue： <template><div class="tree-menu"><ul v-for="menuItem in theModel"><my-tree :model="menuItem"></my-tree></ul></div> </template> <script> var myData = [{id:...