vue.js学习日记-组件篇

组件

自定义组件 全局注册

var question={name:‘MR Liu‘}

Vue.component(‘my-header‘,{

template:‘<p>hello world{{name}}</p>

‘,

data:function(){//data必须是函数 且一般只能返回一个对象

return question//没有‘;’这个结束符

}

})

注意 question和template之间的关系一定要自己明确

局部注册:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<two></two>
</div>

<script type="text/javascript">
var ask={age:25}
var three={
template:‘<h1>我是第THREE</h1>‘,

data:function(){

return ask;}
}//这个结尾这里没有‘,’号,因为这个是在,一个对象外部,不需要语句分割符
var two={
template:‘<p><three></three>我是第TWO{{age}}</p>‘,
components:{
‘three‘:three
}
}
var vm=new Vue({
el:‘#app‘,
data:{
holidary:‘WELCOME COME TO 自定义组件‘
},
components:{//el所挂0载 的元素是根元素,<two><two>只能在<div id=‘app‘><div>之内有效

‘two‘:two
}
})
</script>
</body>
</html>

props自定义属性props[‘hello‘] 不能使用v-bind:hello=‘X‘ 只能使用hello=‘x‘

时间: 2024-11-15 04:11:37

vue.js学习日记-组件篇的相关文章

vue.js学习之组件数据流详解

本文和大家分享的主要是vue.js组件数据流相关内容,一起来看看吧,希望对大家学习vue.js有所帮助. 一.组件 组件,可以说是现代前端框架中必不可少的组成部分.使用组件,不仅能极大地提高代码的复用率和开发者的开发效率,对于代码后期的维护也有着非常重要的意义.前端开发,由于历史遗留原因,WebComponent 虽然好用,但其发展情况却受到极大地限制,和很多新兴的前端技术一样,可望而不可即.基于这样的情况,聪明的开发者们尝试通过框架内部集成相应的功能来完成组件化,各种现代前端框架基本上都有各自

vue.js学习总计---路由篇

一.安装 1.下载 cnpm install vue-router 2.在router/index.js引入与使用 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) impport Home from './coponents/Home.vue1.路由传参export default new Router({ routers:[ { path: '/Home/:id', 动态路由参数,以冒号开头

Vue.js学习日记(3)——计算属性和侦听器

1.计算属性 模板不仅可以是简单的声明式逻辑,也可以是较为复杂的表达式. <div id="element"> <!--简单声明--> {{message}} <!--复杂表达式,表示变量message的翻转字符串--> {{message.split('').reverse().join('')}} </id> 如果表达式过于复杂,将不利于直接理解.当需要在模板中多次引用message的翻转字符串时,操作也会变得繁琐. 所以,对于任何复

Vue.js学习笔记(7)组件详解

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js学习笔记(5)tabs组件和Tree升级版(实现省市多级联动) 先给大家看下小颖写了一个简单的组件示例: 组件: <template> <div class='content' v-if='showFlag'> <input type="text" v-bind:style='{ width:compwidth+"px"}' v-model='compvalue' @keyup='m

转: Vue.js——60分钟组件快速入门(上篇)

转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或

vue.js学习之 跨域请求代理与axios传参

vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

vue.js学习笔记(4)— 父子组件之间通信的第一种方式 props 和 $emit

我们知道,vue组件中,父组件把数组传递给子组件的话,通常是使用props传递,而vue规定,prop是只能单向下行传递的,那么子组件要怎么才能实现数据的向上传递呢,这里引述一个概念:"父子组件的关系:prop向下传递,事件向上传递",上一篇文章当中,关于数据向上传递用到的事件方法 $emit() 也进行了详细的说明,不懂的童鞋可以翻回去看一下.下面就是今天要说的父子组件相互通信的问题,点击效果依次如下: 代码如下: <!DOCTYPE html> <html>

Vue.js学习笔记(一) - 起步

本篇将简单介绍一下Vue.js,并在Node.js环境下搭建一个简单的Demo. 一.简介 我个人理解,Vue.js是一套前端视图层的框架,它只关心视图展示和数据绑定,它的一些语法与Angular 1非常相似,如果有Angular 1相关的使用经验,上手会非常快. 相比较其他的React.Angular 2等MVVM框架,它更加的轻量,效率也更高,也能更好的与其他库集成. 它拥有以下几个出色的特性: 数据双向绑定 指令 模板 组件 当前最新的版本为2.1.4.后续也会在这个版本下演示Demo.