App.vue<template><div id="app"><h3>welcome vue-loading</h3><Loading></Loading> <!--<Loading></Loading>是自定义组件--> </div></template>main.jsimport Vue from ‘vue‘
import App from ‘./App.vue‘import Loading from ‘./components/loading‘ //定义Loading,components、loading是一个文件夹，loading里面必须要index.jsVue.use(Loading) //use Loadingnew Vue({el: ‘#app‘,render: h => h(App)
})index....
注册组件代码如下： // 设置自定义指令v-focus directives: {// focus指令名称 focus: {inserted(el) {el.focus()},},}, 以上我是按照之前教学视频进行注册的自定义指令，但是失效。运行之后可以试着打印下el，看下值是什么：截图： 通过截图可以看到返回的值是div，我们所以el并不是input而是他的父标签div。所以我们只需用querySelector获取到input再绑定即可。代码：// 设置局部指令v-focus directives: {// focus指令名称...
最近在学习vue，今天看到自定义事件的表单输入组件，纠结了一会会然后恍然大悟...官方教程写得不是很详细，所以我决定总结一下。 v-model语法糖v-model实现了表单输入的双向绑定，我们一般是这么写的：1<div id="app">2<input v-model="price">3</div>1new Vue({
2 el: ‘#app‘,
3 data: {
4 price: ‘‘
5 }
6 });通过该语句实现price变量与输入值双向绑定实际上v-model只是一个语法糖，真正的实现是这样的：...
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<link rel="stylesheet" type="text/css" href="./css/bootstrap.css"/> 7<script src="../vue.js" type="text/javascript" charset="utf-8"></script> 8</head> 9<body> 10<div id="app"> 11 12<div class="panel panel-primary"> 13<div class="panel-heading"> 14<h3 class="panel-title">demo</h3> 15</div> 16<div class="panel-body fo...
组件（Component）是我的理解就是自定义元素.(一)自定义组件任何一个以.vue结尾的组件内都可以写自定义组件,一个自定义组件的使用主要2个步骤:1.注册:上代码2.组件使用 原文：http://www.cnblogs.com/gutianer/p/7827055.html
首先，你需要了解插件实现的基本原理 插件基本原理： 我们都知道用Vue.use注册插件，那你知道Vue.use(plugin) 干了什么？以下是我对Vue官网的一些摘录和个人的理解 Vue.use( plugin ) 参数：{Object | Function} plugin 用法：安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用。当...
cell-month 组件<template><div class="cell-month"><div class="weeklist"><!--星期几--><div class="week_box"><p v-for="(item,index) in weekData">{{item}}</p></div><!--slot插入时间--><slot slot="select_month"></slot><!--具体的时间--><div class="monthDayList"><divv-for="(item,index) in daysData" class="dayList"@click="selectDate(item,index)":class="{selectDay:isSelect == index,unData:item.day == ‘ ‘}...
参考资料：1. vue 自定义指令；2. vue 自定义指令实现 v-loading； v-loading，是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令，项目中也很少需要自己去写自定以指令。碰巧这段时间自己练习了编写组件，完成看看能不能实现一个自定义的这样一个指令。话不多说，上代码：<div class="table" v-loadAnimation="loading">...
</div><script>
export default {data() {return {...}},directives: {loadAnimation: ...
自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。在vue中，除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令下面定义了一个v-test指令绑定数据name：<template><div class="hello"><div v-test=‘na...
三个技能，父组件 —> 子组件传值（props）、子组件 —> 父组件传值（$emit）、以及插槽（slot）；对于一个独立的组件来说，props是用来为组件内部注入核心的内容；$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；而$emit的作用则是让这些轮子能够和整辆车完美...
el-table中可以在一行的某列进行筛选，代码如下： <el-table-column prop="classOfTest" class="test" label="测试类名" :filters="classList" filter-placement="bottom-start" width="300" column-key="testOfClass"></el-table-column>其中 filters 就是筛选列表，格式为 classList = [{text: ‘Test_配电箱自动识别‘, value: ‘Test_配电箱自动识别‘},{text: ‘Test_门自动识别‘, value: ‘Test_门自动识别‘},……]filter-...
一：工程安装less、less-loader配置版本如下： "devDependencies": {"less": "^3.0.4","less-loader": "^5.0.0",/**其它配置*/
} 二：在main.js中引入vant的less文件import ‘vant/lib/index.less‘三：创建自定义主题变量文件less如下比如，resetui.less:@blue: #2897ff;四：修改配置文件中的utils.js代码原代码：return {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders(‘less‘),sass: generateL...
vue中指令分为全局指令和局部指令先来看全局自定义指令：第一个参数是指令的名字，第二个参数可以是函数也可以是对象，先来看函数：函数中接收三个参数：el在这里是input元素bindings里是一些绑定信息：其中expression是指绑定的变量名字，这里是contentname是指令名字value是绑定数据的值，上面content为空，所以目前value为空 v-slice上还可以写修饰符还可以传参：vnode虚拟节点：vnode中contex是vue实例，其中的content是vue中的...
在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件// Cmponent.vue<template> <div> 我是组件 </div></template><script> export default { }</script><style scoped> div{ font-size:40px; color:#fbb; text-align:center; }</style>2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来...
通常我们在vue里面使用别人开发的组件，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。今天我简单的也来use一个自己的组件。这里我用的webpack-simple这个简单版本的脚手架为例，安装就不啰嗦了，直接进入正题首先看下目前的项目结构：webpack首先会加载main.js，所以我们在main的js里面引入。我以element ui来做对比说明import Vue from ‘vue‘
import App from ‘./App.vue‘// 引入element-ui组件
impor...
