Vue.js相关知识2-组件

Vue.js 相关知识（组件）

1. 组件介绍组件(component),vue.js最强大的功能之一作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体根组件:我们实例化的Vue对象就是一个组件,且是所有组件的根组件分类:全局组件,局部组件不足:跳转时,无法传递参数,则无法实现同一个页面根据不同的参数显示不同内容注:每个组件都是Vue的实例对象 2. 全局组件通过Vue的静态方法(component)定义,全可在所有组件中使用.语法如下: <div id="app"…

Vue.js相关知识3-路由

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .v-link-active { color: red; } </style></head><body><div id="app"> &l…

Vue.js相关知识2-组件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .v-link-active { color: red; } </style></head><body><h3>#使用props传递数据</h3>…

Vue.js相关知识1

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .v-link-active { color: red; } </style></head><body><div id="demo"> &…

Vue.js 相关知识（路由）

1. 简介路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤安装vue-router或者直接引入vue-router.js(下载地址:https://router.vuejs.org/) 例:SPA页面(Single Page Application,将一个网站的所有页面写在一个文件,通过不同的div进行区分,再通过div的显示.隐藏实现跳转效果) 定义组件对象(页面).组件模板.注册组件定义…

Vue.js 相关知识（动画）

1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:<transition name=””>元素或组件(进入或离开时会有动画效果)</transition> name 属性是执行动画效果的 css 类名,与6个 css 类产生关联: 假设 transition 的 name为v,transition 组件会自动在不同时机添加如下6个类: v…

Vue.js 相关知识（基础）

1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪注:学习 vue.js 时,一定要抛弃 jQuery 的思想(jQuery的特点在于强大的选择器.dom操作,而vue.js 的特点在于数据驱动来实现数据和显示相分离) 特点: 数据驱动,数据(模型层).视图层的分离双向数据绑定:MVVM Model变化,View视图也跟着变化 View视图变化,Model模型也跟着变化 SPA(Single Page…

Vue.js相关知识4-路由

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .v-link-active { color: red; } </style></head><body><div id="app"> &l…

Vue.js 相关知识（脚手架）

1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤安装npm 或 cnpm npm config set registry https://registry.npm.taobao.org npm install cnpm -g 安装webpack.webpack-cli 建议全局安装一次: cnpm install webpack webpack-cli –g 本地安装一次:…

vue.js相关UI组件收集

内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vue和WeUI的组件库 mint-ui ★4870 - Vue 2的移动UI元素 iview ★4782 - 基于 Vuejs 的开源 UI 组件库 Keen-UI ★2401 - 轻量级的基本UI组件合集 vue-material ★2294 - 通过Vue Material和Vue 2建立精美的a…

vue.js基础知识篇(6):组件详解

第11章:组件详解组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 Vue.js的组件注册分为全局注册和局部注册. 全局注册使用Vue.component方法.第一个参数是组件名字,第二个参数是组件的构造函数,要么是function,要么是object. <!DOCTYPE html> <html lang="en"> <hea…

vue.js基础知识篇(2):指令详解

第三章:指令 1.语法指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v-text,v-el,v-html,v-on,v-bind,v-ref,v-pre,v-cloak,v-if. 2.内部指令 (1)控制元素的显示与否:v-if,v-show.v-else v-if是真实的条件渲染,根据表达式的true/false在DOM中生成或移除一个元素. 第一,这个指令是惰性…

Vue.js 第4章组件与路由

组件什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式一个组件中一般可以设置:结构,功能和样式为什么要使用组件: 使用方便复用组件的创建和使用组件的分类: 全局组件:在vm实例外通过Vue.component来创建的组件,在当前vm实例指定的app模板范围内都能使用子组件:在组件内部通过components属性来创建的组件在vue中如何创建组件组件是可复用的 Vue 实例:这句话告诉我们组件就是一个vue实例,那么就意味着在之前创建vue…

基于Vue.js的表格分页组件

有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一…

Vue.js的表格分页组件

转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件…

vue.js基础知识篇(7):表单校验详解

目录网盘第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue"); var VueValidator=require("vue-validator"); Vue.use(VueValidator); 2.直接使用script标签引入vue.js 要下载vue-validator,那么进入cdn的地址https://cdn.bootcss.com/…

vue.js基础知识篇(5):过渡、Method和Vue实例方法

第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEventListener方法添加事件监听,但并不推荐,因为它并不符合"关注点分离"的设计理念. 使用v-on指令有几点好处: 通过HTML模板(视图)就能看到js对应的方法;无需手动绑定事件,ViewModel和DOM完全解耦.易于测试;当一个ViewModel被销毁时,所有的事件处理器都会被自…

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=…

vue.js中的全局组件和局部组件

组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三个步骤: 1.创建组件构造器 2.注册组件 3.使用组件先来看一段代码: <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使…

Vue.js 2.x：组件的定义和注册（详细的图文教程）

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言什么是组件组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 模块化和组件化的区别模块化:是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一组件化:是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用全局组件的定义和注册…

《前端福音，vue.js 之豆瓣电影组件大揭秘-video》

{{ message }} 小胡子语法在 Vue 中被称之为双花括号插值表达式 ---------------- http://todomvc.com/ TodoMVC是一款开源的JavaScript框架,它使用各种不同的MV*框架实现一个相同的Todo应用.TodoMVC最大的优点就是帮助开发者挑选出合适的MV*框架,从Backbone, Ember, AngularJS, Spine...一系列框架中决定使用哪个框架. 开发者现在有很多的MV*框架选择来组织开发web应用程序.Back…

简单易懂的 Vue.js 基础知识！

根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold  <div id="app"> Hello {{ name }}! </div> // 这是我们的 Model var model = { name: 'Vue.js' } // 创建一个 Vue 实例或 "viewModel" //…

Vue.js 基础知识

0. Vue.js 是轻量级的MVVM框架: 1. index.html:<app></app>:组件载入:入口文件会默认调用一个 main.js: 2. App.vue:入口文件,其它注册过的组件要引入 App.vue 文件中才生效: 3. import:ES6语法: ES6模块主要有两个功能:export.import: export:对外输出本模块变量的接口(一个文件可以理解为一个模块): import:在一个模块中加载另一个含有 export 接口的模块: 也就是说,使用…

vue的相关知识

一.DOM vs 函数库 vs框架 DOM: API繁琐函数库:JQuery对DOM的每个步骤的API进行一对一的简化,但并没有改变DOM做事的步骤和方法. 框架:一个包含部分已经实现的功能的半成品项目,只是暂时缺少数据和个性化页面. 优点:彻底简化了开发的步骤,且彻底避免了大量重复的劳动. 缺点:需要转变观念. 二.什么是Vue Vue是基于MVVM设计模式开发的渐进式的前端js框架渐进式:可以有选择的,逐渐使用框架中的功能 vs "全家桶":必须完整使用所有功能,不能掺杂其…

详细讲解vue.js里的父子组件通信（props和$emit）

在进入这个话题之前,首先我们先来想一下在vue里,如何写一个父子组件.为了简单起见,下面的代码我都没用脚手架来构建项目,直接在html文件里引入vue.js来作为例子.父子组件的写法如下: <div id="app"> <parent></parent></div><script src="node_modules/vue/dist/vue.js"></script><script>…

Vue.JS快速上手（组件生命周期）

一.什么是组件组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用程序,实际是由一个根组件(实例)+多个子组件(实例)组成.说白了组件其实就是自定义标签. 二.组件化意义 1. 页面元素及逻辑的复用 2. 易于页面的重构与维护 3. 提升页面渲染性能三.组件基本用法 1.全局注册第1步:创建组件第2步:使用组件 2.局部组件基本用法四.组件生命周期一个组…

vue-core-video-player-基于vue.js的视频播放器组件

一介绍一款基于 vue.js 的轻量级的视频播放器插件插件个性化配置 i18n 服务端渲染画中画模式事件订阅易于开发移动端适配 1.1 官方文档 https://core-player.github.io/vue-core-video-player/zh/get-started.html 1.2 安装和快速使用第一步:安装 NPM npm install --save vue-core-video-player 或者使用 yarn yarn add -S vue-core-vid…

vue.js基础知识篇(4):过滤器、class与style的绑定2

代码下载:网盘欢迎私信第一章:过滤器过滤器是对数据进行处理并返回结果的函数. 1.语法语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做字符串处理,不带引号的参数被当做数据属性名处理. {{message | filterFunction "arg1" arg2 }} vue.js支持在任何出现表达式的地方添加过滤器. vue.js支持链式调用,上一个过滤器的输出结果作为下一个过滤器的输入.类似于Linux shell的管…

vue.js基础知识篇(3):计算属性、表单控件绑定

第四章:计算属性为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="example"> <i…

vue.js基础知识篇(1):简介、数据绑定

目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章:vue.js是什么? 1.vue.js是MVVM框架 MVVM的代表框架是Angular.js,以及vue.js. MVVM的view和model是分离的,View的变化会自动更新到ViewModel上,ViewModel的变化会自动同步到View上显示.这种自动同步依赖于ViewModel的属性实…

【Vue.js相关知识2-组件】的更多相关文章