Vue基础---->VueJS的使用(二)

  组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。今天我们就来学习一下。

vue中的重要特性

一、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!‘
    }
});

运行的效果如下:

友情链接

时间: 2024-11-10 13:50:42

Vue基础---->VueJS的使用(二)的相关文章

Vue基础----&gt;VueJS的使用(一)

Vue.js是一个构建数据驱动的web界面的库.它的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件,今天我们就开始vue.js的学习. vue的安装及使用 一.vue的下载地址:http://vuejs.org/js/vue.js 二.vue的第一个例子: 项目的结构如下,引入vue.js vue1.html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&

Vue基础知识总结(二)

一.解决网速慢的时候用户看到花括号标记 (1)v-cloak,防止闪烁,通常用于比较大的选择器上. 给元素添加属性v-cloak,然后style里面:[v-cloak]{display:none;} (2){{msg}},等价于<span v-text="msg"></span> (3){{{msg}}},html转意输出,等价于<span v-html="msg"></span>(在v2.0上,三括号已经删除) 二.

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM

前端框架Vue自学之Vue基础语法(二)

终极目标:掌握和使用Vue(全家桶:Core+Vue-router+Vuex) 本博客目的:记录Vue学习的进度和心得(Vue基础语法) 内容:通过官网说明,掌握Vue基础语法. 正文: Vue基础语法 一. 原文地址:https://www.cnblogs.com/xinkuiwu/p/12031107.html

vue基础语法

vue基础语法 vue官网链接:https://cn.vuejs.org/  一.Vue简介 Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. Vue.js是一款轻量级的.以数据驱动构建web界面的前端JS框架,它在架构设计上采用了MVVM(Model-View-ViewModel)模式,其中ViewModel是Vue.js的核心,它是一个Vue的实例,而这个实例又作用域页面上的某个HTML元素. 其核心在于通过数据驱动界面的更新

千锋教育Vue组件--vue基础的方法

课程地址: https://ke.qq.com/course/251029#term_id=100295989 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue基础的方法</title&

Vue 基础篇

Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 + ... 代码上的不同: 一般使用库:调用某个函数,自己可以把控库的代码 一般使用框架:其框架在帮我们运行已编写好的代码 框架:初始化自身的一些行为 执行你所编写的代码 施放一些资源 库:小而精 框架:大而全 ( 框架包含了各种库 ) 二.起步 引包 直接用 <scri

[Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串

本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vue模板编译原理(一)-Template生成AST 一起来学Vue模板编译原理(二)-AST生成Render字符串 一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法 这些文章统一放在我的git仓库:https://github.com/yzsunlei/javascri

基础JavaScript练习(二)总结

任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过60个时,添加元素时alert出提示 队列展现方式变化如图,直接用高度表示数字大小 实现一个简单的排序功能,如冒泡排序(不限制具体算法),用可视化的方法表达出来,参考见下方参考资料 任务注意事项 实现简单功能的同时,请仔细学习JavaScript基本语法.事件.DOM相关的知识 请注意代码风格的整齐