Vue入门知识点—初识vue
来源:互联网 发布:nginx body filter 编辑:程序博客网 时间:2024/04/30 10:18
本博客所有内容为博主学习之时自整理,算不上什么干货,如有错误欢迎大家批评指正
Vue介绍
Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动
(附上教程链接——Vue.js )
注:在学习Vue之前你最好已经有HTML,CSS,JavaScript等中级前端知识
Vue构造器属性与方法
<div id="app"> <!--模板渲染{{}}--> {{text}}</div><script type="text/javascript" src="vue.js"></script><script>new Vue=({ el:"#app",//挂载元素 data:{ text:'哈哈哈' }})</script>
实现效果:
Vue-组件
什么是组件?
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。
注册一个全局组件
组件的注册,分为全局注册,和局部注册,全局注册必须在实例之前
要注册一个全局组件,你可以使用 Vue.component(tagName, options)
Vue.component('my-header',{ template:'<h1><a href="#">超文本连接{{name}}</a></h1>', data:function () { return{ name:'百度' } } })
组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用。要确保在初始化根实例 之前 注册了组件:
<div id="example"> <my-component></my-component></div>
注册一个局部组件
var MyFootChild={ template:'<h1><a href="#">我是底部的子组件</a></h1>' } var MyFooter={ template:'<h1><my-footer-child></my-footer-child><a href="#">我是底部的链接</a></h1>', components:{ 'my-footer-child':MyFootChild } } new Vue({ el:"#app",//挂载元素 data:{ }, components:{ 'my-footer':MyFooter } })
不必在全局注册每个组件。通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用:
<div id="app"> <my-footer></my-footer></div>
效果:
1 0
- Vue入门知识点—初识vue
- Vue入门01-vue初识
- Vue初识
- 初识Vue
- 初识vue
- vue初识
- vue知识点
- vue 知识点
- vue快速入门知识点(一)
- Vue快速入门知识点(二)
- vue入门
- Vue入门
- Vue入门
- vue入门
- Vue入门
- Vue入门
- Vue入门
- Vue入门
- 零基础写java网络爬虫
- Linux学习_第一章计算机结构001
- c中三个数的排序
- 蓝桥杯 历届试题 九宫重排 (八数码问题--康托展开去重 + bfs搜索)
- nyoj 973 天下第一
- Vue入门知识点—初识vue
- [转]POJ 1001 Exponentiation Java大数处理高精度小数
- NGUI学习笔记(六):ScrollView、Grid和Table
- 【转载】在erlang项目中使用protobuf
- CodeForces 627 B.Factory Repairs(BIT)
- 如何用递归算法判断一个数组是否递增
- bzoj 4031: [HEOI2015]小Z的房间 矩阵树定理
- android获取周围基站信息
- 对象反序列化时,如果父类未实现序列化接口,则反序列出的对象会再次调用父类的构造函数来完成属于父类那部分内容的初始化