一、vue中的自定义组件

html的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue1</title>

    <script type="text/javascript" src="../vue.js"></script>

</head>

<body>

    <div id="app">

        <my-component my-name="huhx"></my-component>

    </div>

    <script type="text/javascript" src="js/vue3.js"></script>

</body>

</html>

vue3.js的代码：

// 定义

var MyComponent = Vue.extend({

    template: '<div>A custom component!{{myName}}</div>',

    props: ['myName']

})

// 注册

Vue.component('my-component', MyComponent);

// 创建根实例

var ap = new Vue({

    el: '#app',

})

运行效果如下：

二、vue中的自定义指令

html的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue4</title>

    <script type="text/javascript" src="../vue.js"></script>

</head>

<body>

    <div id="app">

         <div v-my-directive="someValue">{{msg}}</div>

    </div>

    <script type="text/javascript" src="js/vue4.js"></script>

</body>

</html>

vue4.js:

Vue.directive('my-directive', {

    bind: function() {

        // 准备工作

        console.log("bind function.");

    },

    update: function(newValue, oldValue) {

        // 值更新时的工作

        console.log("new: " + newValue + ", old: " + oldValue);

    },

    unbind: function() {

        // 清理工作

        console.log("unbind function.");

    }

});

var demo = new Vue({

    el: '#app',

    data: {

        msg: 'hello!'

    }

})

运行的效果:

console打印的日志：

bind function.

new: undefined, old: undefined

三、vue中的自定义过滤器

html的代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue5</title>

    <script type="text/javascript" src="../vue.js"></script>

</head>

<body>

    <div id="app">

        <span v-text="message | reverse"></span>

    </div>

    <script type="text/javascript" src="js/vue5.js"></script>

</body>

</html>

js的代码如下：

Vue.filter('reverse', function (value) {

  return value.split('').reverse().join('')

});

var demo = new Vue({

    el: '#app',

    data: {

        message: 'hello!'

    }

});

运行的效果如下：

vue中的重要特性的更多相关文章

  1. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  2. Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  3. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  4. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  5. 在vue中使用import()来代替require.ensure()实现代码打包分离

    最近看到一种router的写法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const login = ...

  6. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  7. 详解vue组件的is特性：限制元素&动态组件

    在vue.js组件教程的一开始提及到了is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul> <li></li> </ul&g ...

  8. 基于iscroll的better-scroll在vue中的使用

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...

  9. better-scroll在vue中的坑

    在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开“微信 —> 钱包—>滴滴出 ...

随机推荐

  1. [Java] 内部类的用法

    package test.file; import java.io.File; import java.io.FilenameFilter; /** * 内部类的使用 * @author Frost. ...

  2. 并发之 volatile

    使用volatile: 每次读取volatile变量的值,都强制从主存读取最新的值. (每次修改volatile变量都会同步到主存中) i++ 之所以不能保证线程安全,是因为volatile不能解决非 ...

  3. MSDN知识库_c#关键字_static

        Static 是C#会用到的关键字,可以用来修饰类.字段.方法.属性.运算符.事件和构造函数.今天在多线程中被静态成员不小心被撞了一下,因此将MSDN的内容整理转下来 一)静态类 Static ...

  4. 查看用户的SQL执行历史

    程序开发少不来SQL,基本都是基于SQL开发,程序仅仅起一个流程控制的作用.但是数据库本身存在许多内置的视图或者内置的表,如果打算研究SQL执行的效率已经SQL执行的历史记录,通过这些视图可以知道. ...

  5. sql 2008 r2

    http://jingyan.baidu.com/article/6c67b1d6ca06f02787bb1ed1.html

  6. SQL必知必会笔记（1）

    去SQL AXDB 中Query数据 Open the SQL > Connect > Select AXDB > new Query select REFID, ITEMID, R ...

  7. html5标签css3的常用样式

    <meta name=''> name:有如下6个值:application-name:文档名或者应用名,整个文档只能包含一个值.author:文档作者description:文档描述ge ...

  8. 多线程——GCD

    一. GCD的基本概念 GCD:强大的中枢调度,纯C语言,提供了非常多强大的函数. 任务(block):执行什么操作. 队列(queue):用来存放任务. 同步函数dispatch_sync():不创 ...

  9. React生命周期和虚拟DOM

    一.虚拟DOM 1.React并不直接操作DOM,React中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器 2.React实 ...

  10. Flash图表控件FusionCharts自定义图表y轴最大/最小值

    自定义图表y轴的最大值和最小值 用户可以使用FusionCharts图表中<chart>元素的yAxisMaxValue和yAxisMinValue属性设置图表限制. 示例: <ch ...