Vue2.5开发去哪儿网App 第二章笔记
Vue完成 TodoList
1.默认方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="addItem">添加</button>
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
methods:{
addItem:function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
console.log(app.$data)
</script>
</body>
</html>
2.以全局组件的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="addItem">添加</button>
<tode-item v-bind:content="item" v-for="item in list"></tode-item>
</div>
<script>
var Myconponent = Vue.extend({
props:['content'],
template:"<li>{{content}}</li>"
}) Vue.component('tode-item',Myconponent) var app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
methods:{
addItem:function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
3.以局部组件的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件 TodoList</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="addItem">添加</button>
<todo-item v-bind:content="item" v-for="item in list"></todo-item>
</div>
<script>
var Myconponent = {
props:['content'],
template:"<li>{{content}}</li>"
}
var app = new Vue({
el:'#app',
components:{
'todo-item':Myconponent
},
data:{
list:[],
inputValue:''
},
methods:{
addItem:function () {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
Vue 组件间传值
子组件向父组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件 TodoList</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="addItem">添加</button>
<!--v-bind简写：: v-on: @-->
<todo-item :content="item" :index="index" @delete="HandleItemDelete" v-for="(item,index) in list"></todo-item>
</div>
<script>
var Myconponent = {
props:['content','index'],
template:"<li @click='HandleItemClick'>{{content}}</li>",
methods:{
HandleItemClick:function () {
this.$emit('delete',this.index)
}
}
}
var app = new Vue({
el:'#app',
components:{
'todo-item':Myconponent
},
data:{
list:[],
inputValue:''
},
methods:{
addItem:function () {
this.list.push(this.inputValue)
this.inputValue = ''
},
HandleItemDelete:function (index) {
console.log(index)
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
Vue2.5开发去哪儿网App 第二章笔记的更多相关文章
- Vue2.5 开发去哪儿网App
Vue2.5开发去哪儿网App 技术栈和主要框架
- Vue2.5开发去哪儿网App 首页开发
主页划 5 个组件,即 header icon swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...
- Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
- Vue2.5开发去哪儿网App 第五章笔记 上
1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ o ...
- Vue2.5开发去哪儿网App 第三章笔记 下
1.样式的绑定 我们可以传给 v-bind:class 一个对象,以动态地切换 class 例如: :class="{activated:isactivated}" 上面的语法 ...
- Vue2.5开发去哪儿网App 第三章笔记 上
1. vue 生命周期函数 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 ...
- Vue2.5开发去哪儿网App 从零基础入门到实战项目
第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介 试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...
- Vue2.5开发去哪儿网App 搜索功能完成
效果展示: Search.vue: <div class="search-content" ref="search" v-show="keywo ...
- Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化
一, 兄弟组件间联动 1. 点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...
随机推荐
- .NET性能优化（文摘）
第1章 性能指标 1.1 性能目标 1.2 性能指标 第2章 性能度量 2.1 性能度量方式 白盒测试-小程序 黑盒测试-大型程序 2.2 Windows内置工具 2.2.1 性能计数器 2.2.2 ...
- Matlab编辑器背景修改
将下段代码如到C:\Users\Peng Chen\AppData\Roaming\MathWorks\MATLAB\R2016a\matlab.prf 先备份.prf,再替代之前的. #MATLAB ...
- iphone导入照片不显示，不同步怎么整
可以借助itools或者爱思助手来处理 进入电脑软件后 找到文件管理---->文件系统(用户)这个目录 找到photodata这个文件夹,将photos.sqlite文件删除 最重要的一步来了. ...
- java常用设计模式八：代理模式
一.概述 代理模式是指客户端并不直接调用实际的对象,而是通过调用代理,来间接的调用实际的对象. 其特征是代理类与委托类有同样的接口,真正的核心业务逻辑还是在实际对象里面. 二.为什么要使用代理模式 当 ...
- C++之输出100-200内的素数
素数(质数) 除了1和它本身以外不再被其他的除数整除. // 输出100--200内的素数 #include<iostream> using namespace std; int m ...
- GHOST完成后出现GRUB解决方法
1.试一下这个命令: grub> rootnoverify (hd0,0)(注意空格!!!) 或者 grub>makeacrive (hd0,0)grub> chainloader ...
- ng-repeat动态改变样式
当我们使用AngularJs的ng-repeat时候动态绑定数据时,遇到遍历出来的标签样式都一样,这时候希望根据数组的下标分别对应不同的样式 解决:使用$index获取数组下标根据下标改变样式 < ...
- Vsftpd完全攻略（三）基于系统用户支持ftp上传 访问和vsftp安全设置
原文链接:http://viong.blog.51cto.com/844766/261342 1.关闭匿名用户登录 ftp支持匿名登录是不安全,所以要禁止匿名ftp登录 在/etc/vsftpd/vs ...
- 巧用NULL模式解耦依赖
1. 初始 应用A和应用B均用到了库libX.a中的类class A: 由于需求的变化,应用B需要库libM.a的能力,以便和服务M交互.为了复用和简化,通过类A间接提供,应用B不用修改代码,只需要重 ...
- 给Java开发者的Scala教程
author:Michel Schinz,Philipp Haller 1. 简介 本文将该要的介绍Scala语言和其编译.这里假设读者已经有一定的java开发经验,需要概要的了解他们可以用Scala ...