-
Vue自定义命令
2017-08-28 15:45:37自定义指令分为两个部分: 1-元素指令 2-属性指令 元素指令相当于定义一个轻量级的组件 对于指令这里需要讲解一下钩子函数,对于Vue.js提供了几个钩子函数,这几个钩子函数之间都是可选的,相互并不制约。钩子...自定义指令分为两个部分:
1-元素指令
2-属性指令元素指令相当于定义一个轻量级的组件
对于指令这里需要讲解一下钩子函数,对于Vue.js提供了几个钩子函数,这几个钩子函数之间都是可选的,相互并不制约。钩子函数的作用就是:
将作用域与DOM进行链接,链接函数用来创建可以操作DOM的指令钩子函数分类:
bind - 只调用一次,在指令第一次绑定到元素上时候调用
update - 在bind之后立即以初始值为参数第一次调用,之后绑定值变化的时候,参数为新值与旧值
unbind - 只调用一次,在指令从元素上解绑的时候调用定义属性指令:
Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象
定义元素指令:
Vue.elementDirective(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象
一个自定义指令的DEMO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>VUE测试项目</title> </head> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!--HTML文件--> <body id="example"> <div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div> </body> <!--JS文件--> <script> window.onload = function(){ Vue.directive('demo',function(value){ console.info(value.color); //white console.info(value.text); // hello! }) var demo = new Vue({ el : '#demo' }) } </script> </body> </html>
-
vscode自定义vue初始代码片段
2020-07-03 15:29:49创建vue页面,快速初始化文件 1、点击vscode左下角的设置图标 2、选择用户代码片段 3、将以下代码复制到文件中的一对{}内 4、添加完成之后保存,当我们输入vue再单击Tab键,就可以初始化文件了 prefix是触发代码...创建vue页面,快速初始化文件
1、点击vscode左下角的设置图标
2、选择用户代码片段
3、将以下代码复制到文件中的一对{}
内4、添加完成之后保存,当我们输入
vue
再单击Tab
键,就可以初始化文件了prefix
是触发代码片段的命令,可以自己设置"Print to console": { // prefix: 触发代码片段的命令 "prefix": "vue", // body: 设置的代码块内容 "body": [ "<template>", " <div>\n", " </div>", "</template>\n", "<script>", " export default {", " name:'',", " data () {", " return {\n", " }", " },", " components: {\n", " }", " }", "</script>\n", "<style scpoed>", " ", "</style>", "$1" ] }
以上代码片段初始化的文件:
-
VS Code 自定义vue代码片段
2018-07-03 17:33:401:按F1或ctrl+shift+p打开命令窗口2:输入snippet,选择 “首选项:打开用户代码段”3:输入vue,如果列表中存在Vue,可直接点击打开vue.json设置文件,如果列表中不存在Vue,按第4步做,如果Vue已存在,直接跳到第...1:按F1或ctrl+shift+p打开命令窗口
2:输入snippet,选择 “首选项:打开用户代码段”
3:输入vue,如果列表中存在Vue,可直接点击打开vue.json设置文件,如果列表中不存在Vue,按第4步做,如果Vue已存在,直接跳到第9步
4:安装插件VueHelper
5:安装插件vetur
6:文件-首选项-用户设置,打开设置文件, 设置:
"files.associations": {
"*.vue": "vue"}
7:重启 VS Code
8:重新启动 VS Code 后,从第1步再来一遍,应该能跳到第9步
9:在已打开的vue.json文件中粘贴
"Print to vue-template": {
"prefix": "vue",
"body": [
"<template>",
"\t<div>\n\t\t$1",
"\t</div>",
"</template>\n",
"<script>",
"\texport default {",
"\t\tdata () => ({\n",
"\t\t}),",
"\t\tcomponents: {\n",
"\t\t}",
"\t}",
"</script>\n",
"<style>\n\t",
"</style>"
],
"description": "vue 模板代码片段"}
10:保存文件,打开任意vue类型文件,输入“vue”,回车直接显示之前设置的代码片段
-
vue 添加全局组件_自定义vue2.0全局组件(下篇)
2021-01-17 14:31:05启动命令窗口, 进入在上篇中我们搭建的vue目录中,输入命令npm run dev启动测试环境,如下图:查看测试页面,打开谷歌浏览器中的vue调试工具,查看生成的组件是否正确,如下图:如果出现这个,则证明我们上次编写的...在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法。虽然能用,但是还不算完美,可扩展性不够强大。在这一篇中,老K继续为大家完善这个按钮组件。
启动命令窗口, 进入在上篇中我们搭建的vue目录中,输入命令npm run dev启动测试环境,如下图:
查看测试页面,打开谷歌浏览器中的vue调试工具,查看生成的组件是否正确,如下图:
如果出现这个,则证明我们上次编写的组件运行正确。现在,我们可以根据Element-ui的按钮组件样式先把通用的按钮组件样式编写好。如下图:
刷新测试页面,查看效果,如下图:
但是,Element-ui的按钮组件有7种主题样式,由type属性来定义,默认是default。上述我们编写的就是default主题。但是,其他主题样式我们能否也能按照Element-ui的方式来定义呢?答案是肯定的。现在,我们就在上篇的代码基础上来实现这种方式。
为了方便理解,我们可以将上篇编写的作为基础组件。其他主题的按钮组件都在此基础上进行扩展。进入custom-global-component/src/components目录,新建extendbutton目录,如下图:
进入extendbutton目录下,新建入口文件index.js、组件文件ExtendButton.vue,如下图:
打开ExtendButton.vue文件,尝试编写一个主题为primary的基础扩展按钮组件,如下图:
扩展组件标签名为“”,具有的主题样式class名为“primay”。
进入入口文件index.js,引入extendbut组件模板,生成名为“et-button”的vue组件并输出。如下图:
这样一个基础的扩展按钮组件就完成了。
现在,我们回到src目录下,尝试一下我们新编写的基础扩展按钮组件。打开main.js和App.vue文件,引入并使用这个组件,如下图:
main.js
App.vue
预览效果:
这样,一个primary主题的基础扩展按钮组件就完成了。当然,这样还没有完成。因为,我们并没有通过设置组件的type属性控制按钮的主题。为了实现这种功能,我们可以做一个工厂方法一样的组件复用。此时我们就会用到prop来传递属性。
打开ExtendButton.vue,进一步修改此文件。如下图:
在ExtendButton.vue中,添加各种主题样式,如下图:
此时我们就可以在App.vue中这样使用组件了,如下图:
预览效果如下图:
这样跟Element-ui的按钮组件用法基本一样了。当然,使用按钮组件免不了给其绑定事件。直接给自定义组件绑定事件显然是不行的。需要提前给组件添加on对象和出发其自定义的事件。分别进入Button.vue和ExtendButton.vue,进一步修改代码,如下图:
Button.vue
ExtendButton.vue
打开App.vue,定义一个测试函数test,给default主题按钮绑定test,如下图:
点击default主题按钮,测试效果,如下图:
此时在组件中就可以绑定事件了。一个完美的Element-ui风格的自定义按钮组件就完成了。上述代码我已提交到github,欢迎参考!
代码地址:
这个自定义vue2.0全局组件的方法就介绍到这里,若有不足之处,欢迎指正!
本文为原创内容,若转载请注明出处,转发感激不尽。
-
vue-template:一个集成了webpack + vue-loader + vuex + axios的自定义vue-cli模板,其中包含webpack热...
2021-02-05 07:37:31一个集成了webpack + vue-loader + vuex + axios的自定义vue-cli模板,其中包含webpack热更新,linting,测试以及css处理器等内容 该模板兼容Vue2.0。对于Vue1.x,执行命令: vue init Brickies/vue-template#1.0 my... -
自定义vue2.0全局组件(下篇)
2017-06-15 13:13:25启动命令窗口, 进入在上篇中我们搭建的vue目录中,输入命令npm run dev启动测试环境,如下图: 查看测试页面,打开谷歌浏览器中的vue调试工具,查看生成的组件是否正确,如下图: 如果出现这... -
仿vue的前端自定义cmd命令拉取项目脚手架
2018-04-22 23:43:52原文地址:https://github.com/screetBloo...含纯node或者commander实现自己的前端...这里主要讲的是如何自定义node命令,拉取项目 snowcat init // 用户安装我们的命令,就可以一行代码拉取对应项目,可扩展成... -
自定义yarn运行vue项目命令
2019-07-31 09:46:05在项目中的package.json文件的scripts块中可以看到新项目的yarn命令集合 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", ...serve 就是vue项目的启动命令,可以通过修... -
vue自定义配置运行run命令
2020-07-07 14:07:01vue自定义配置运行run命令1、vuecli3以下package.jsonbuild/build.jswebpack.prod.conf.jsbuild/utils.jsbuild/webpack.base.conf.jsbuild/vue-loader.conf.jsconfig文件夹index.jsvuecli3以下打包流程新增npm run ... -
给vue封装节流的自定义命令
2019-12-24 19:16:23给vue封装节流的自定义命令 节流方法: function throttle (method, context) { clearTimeout((method.tId)) method.tId = setTimeout(function () { method.call(context) }, 100) } function resizeDiv ()... -
vue 学习自定义命令,实现操作说明
2020-06-04 23:13:28子组件内部增加自定义命令 v-guide=xxx xxx 为name <el-menu-item v-guide="'home'">Test</el-menu-item> <el-menu-item v-guide="'open'">Test</el-menu-item> <el-menu-item v-... -
vue esview 控件拖拽问题(二)Vue.directiove自定义命令
2018-11-14 09:07:36控件拖拽问题(二) initDropEvents是绑定在bind中的(droppable.js) 而这个droppable是在install_derictive.js中定义的定义命令, Vue.directive(...这两个自定义命令在main.js中被执行: import instal...