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 ...
随机推荐
- java socket之上传文件
一.功能介绍 该功能主要实现,将客户端的:F:/work/socketSample/filetemp/client/test_client.txt上传到服务端F:/work/socketSample/ ...
- 第07章：MongoDB-CRUD操作--文档--创建
①语法 insert() save() --有修改没有新增 insertOne() [3.2版本新增]向指定集合中插入一条文档数据 insertMany() [3.2版本新增]向指定集合中插入多条文 ...
- servlet 解决乱码问题
对于servlet大家应该都很熟悉了,今天再复习一下,如果有哪里写的不好或不对的地点希望广大的网友批评指正.今天只讨论get和post两w种方式,他们之间有很多的不同点,所以解决编码的方式也会不一样, ...
- Java交流分享（522818473）
今天来分享哈自己的技术交流群,记得还是刚接触Java建立的群,那时候学习Java很有动力,经常和群友谈论问题,现在都专注公司业务和技术这一块,很多后端框架都没用除了restful,其他都是封装的,不过 ...
- 25个Linux相关的网站
下面是25个最具有影响力,也是最重要的Linux网站,这些网站提供了Linux的分发包,软件,文件,新闻,以及其它所有的关于Linux的东西.关于Linux的分发包历史,可以看看本站的这篇文章< ...
- MVC框架-.net-摘
MVC模式(三层架构模式)(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller) ...
- C#-VS发布网站-准备待发布网站-摘
通过使用“发布网站”工具部署网站项目 准备网站源文件 在vs生成发布文件 配置IIS .NET Framework 4 其他版本 Visual Studio 2008 Visual Studio ...
- Alpha阶段敏捷冲刺（五）
1.站立式会议 提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 祁泽文:实现了个人遗忘曲线图 徐璐琳:完成了微信Web ...
- hive函数 get_json_object的使用
hive提供了json的解析函数:get_json_object 使用方法 对于jsonArray(json数组),如person表的xjson字段有数据: [{"name":&q ...
- CSS 基础 例子 最小高度和最大高度设置
最小高度,无论什么时候,高度不会小于该值,即使内容很少,不限制高度最大值,超出时候,按照实际内容来决定高度 最大高度,无论什么时候,高度不会大于该值,即使内容很多,不限制最小高度,超出时候,多出部分会 ...