-
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...
vue
订阅