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 ...
随机推荐
- c# 二维list排序和计时
using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...
- HDU 5663 Hillan and the girl (莫比乌斯反演 + 分块)
题意:给定n,m,求,其中F(x)=0,,如果x是完全平方数,否则是1. 析: 由于按照题意的F,不好筛选,所以我们反过来,F(x),x是平方数,就是1,否则是0. 这个是可以预处理出来的,可以用筛选 ...
- oracle 数据库io 异常，错误代码17002 解决办法
数据库使用一个月了,突然挂掉:错误代码17002 io异常:read timeout 解决: 1.登陆sql命令窗口 [oracle@hostname ~]$ sqlplus /nolog SQL*P ...
- 【慕课网实战】Spark Streaming实时流处理项目实战笔记八之铭文升级版
铭文一级: Spark Streaming is an extension of the core Spark API that enables scalable, high-throughput, ...
- js基础学习笔记（六）
事件(可以被 JavaScript 侦测到的行为) 主要事件表: 加载事件(onload) 事件会在页面加载完成后立即发生,同时执行被调用的程序. 卸载事件(onunload) 当用户退出页面时(页面 ...
- （树形dp）鸡毛信问题 （fzu 1227）
http://acm.fzu.edu.cn/problem.php?pid=1227 Problem Description 大革命时期,地下党组织的联络图是一个树状结构.每个党员只和一个比他高一 ...
- 【MySQL】死锁问题分析
1.MySQL常用存储引擎的锁机制: MyISAM和MEMORY采用表级锁(table-level locking) BDB采用页面锁(page-level locking)或表级锁,默认为页面锁 ...
- 用delegate实现.NET应用程序的同步函数的异步调用－.NET多线程编程实践之一
在C++中有2种类型的线程:UI Thread和Worker Thread,前者是基于用户界面的有消息循环的线程.后者是没有用户界面的侧重于大时空运算的线程.直接调用Windows相关线程及同步对象的 ...
- 1.mysql安装
Navicat账号:root 密码:weihu 账号:weihu 密码:weihu 1.首先进入的是安装引导界面 2.然后进入的是类型选择界面,这里有3个类型:Typical(典型).Complete ...
- CxGrid鼠标移到更改颜色
CxGrid鼠标移到更改颜色 设置表单中TcxGrid1DBTableView的Styles属性,设置Selection procedure TForm1.cxGrid1DBTableView1Mou ...