VUE.js入门学习(1)-起步
1、hello world
<div id="app">{{content}}</div>
var app = new Vue({
el:'#app',
data:{
content:'hello world'
}
})
2、两秒后改变文字为“bye world”
setTimeout(function(){
app.$data.content='bye world'
})
集中在数据的操作上面而不是在dom上。
3、基础语法 v-for、v-model、v-for、v-on
(1)<li v-for="(item,index) in list">{{item}}</li>
(2)v-on:click="" 简写 @:click=""
(3) v-model 数据的双向绑定 data中进行定义
4、组件化
(1)全局组建:
<todo-item></todo-item>
vue.component("TodoItem",{
template:"<li>todo item</li>"
})
(2)v-bind:content="item"
vue.component("TodoItem",{
props:['content']
template:"<li>todo item</li>"
})
父级通过v-bind(简写 :)绑定一个变量content把数据传给子模版。子模版用props进行接收。
(2)局部组建
var TodoItem = {
props:['contnet'],
template:"<li>todo item</li>"
}
var app = new Vue({
el:"#root",
components:[TodoItem], //局部组建需要注册
data:{
}
methods:{
}
})
5、简单的组建间传值 子元素向父元素传值
子元素通过$emit定义一个"delete"向父元素传递,dom绑定一个事件@delete="fmethods"
<todo-item @delete="handleItemDelete" :content="item" :index="index" v-for="(item,index) in list"></todo-item>
var TodoItem = {
props:['contnet','index'],
template:"<li @click='handleItemClick'>todo item</li>",
methods:{
handleItemClick:function(){
this.$emit("delete")
}
}
}
var app = new Vue({
el:"#root",
components:[TodoItem], //局部组建需要注册
data:{
}
methods:{
handleItemDelete:function(){
}
}
})
最新文章
- awk使用说明
- How PhoneGap &; Titanium Works
- .NET跨平台之旅:将示例站点从ASP.NET 5 Beta5升级至Beta7
- 微信开发笔记:公众号获取access_token
- DBN 入门学习资料整理
- DevExpress GridControl使用方法总结
- virtualbox 不能为虚拟电脑打开一个新任务/VT-x features locked or unavailable in MSR.
- PHP 日期比较
- PySe-002-Py-简单示例及编码设定
- iOS9 UITableViewCell separatorInset设置为0分割线还是没有顶到头的问题
- c语言0 ‘0’ &#39;\0&#39;空格都是什么玩意儿
- UVA 10139 Factovisors(数论)
- linux 常用命令之一
- C语言范例学习06-上
- TJU ACM-ICPC Online Judge—1191 The Worm Turns
- [LeetCode] Convert Binary Search Tree to Sorted Doubly Linked List 将二叉搜索树转为有序双向链表
- Python&#160;关于类函数设计的一点总结
- 如何将 jar 包导入Maven 本地仓库
- 一个非常好的php实现手机号归属地查询接口类
- SSH框架开发蛋糕房管理系统之质量属性
热门文章
- ModelSim安装步骤
- iOS 安全地在主线程执行一个Block
- NOIp2018普及组初赛试卷
- tensorflow学习笔记(二)常量、变量、占位符、会话
- Day6 - M - 动态逆序对 HYSBZ - 3295
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-pencil
- Linux系统下的/etc/nsswitch.conf文件
- Oracle IF-ELSE条件判断结构
- 一百、SAP中ALV事件之十三,给ALV的自定义按钮添加事件
- 三十七、SAP中文本资源的存放