精华内容
下载资源
问答
  • 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>
    
    展开全文
  • 创建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:40
    1:按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目录中,输入命令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全局组件的方法就介绍到这里,若有不足之处,欢迎指正!

    本文为原创内容,若转载请注明出处,转发感激不尽。

    展开全文
  • 一个集成了webpack + vue-loader + vuex + axios的自定义vue-cli模板,其中包含webpack热更新,linting,测试以及css处理器等内容 该模板兼容Vue2.0。对于Vue1.x,执行命令: vue init Brickies/vue-template#1.0 my...
  • 启动命令窗口, 进入在上篇中我们搭建的vue目录中,输入命令npm run dev启动测试环境,如下图: 查看测试页面,打开谷歌浏览器中的vue调试工具,查看生成的组件是否正确,如下图: 如果出现这...
  • 原文地址: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命令1、vuecli3以下package.jsonbuild/build.jswebpack.prod.conf.jsbuild/utils.jsbuild/webpack.base.conf.jsbuild/vue-loader.conf.jsconfig文件夹index.jsvuecli3以下打包流程新增npm run ...
  • vue封装节流的自定义命令 节流方法: function throttle (method, context) { clearTimeout((method.tId)) method.tId = setTimeout(function () { method.call(context) }, 100) } function resizeDiv ()...
  • 子组件内部增加自定义命令 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-...
  • 控件拖拽问题(二) initDropEvents是绑定在bind中的(droppable.js) 而这个droppable是在install_derictive.js中定义的定义命令Vue.directive(...这两个自定义命令在main.js中被执行: import instal...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 423
精华内容 169
关键字:

自定义vue命令

vue 订阅