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 ...
随机推荐
- 2018.10.26 NOIP模拟 性感手枪（搜索）
传送门 vis[x][y]vis[x][y]vis[x][y]记录这个点是否在之前被搜过,且被搜过的坐标是什么. 然后搜索的时候记录一个循环的下标和不循环的下标就行了. 代码
- 微信小程序设置全局字体
微信小程序设置全局css,需要在app.wxss文件中设置page的样式 page { font-family:"PingFangSC-Thin"; font-size:32rpx ...
- linux利用命令将一个盘上的所有复制到另一个盘上
1.fdisk -l 查看硬盘状况 2.将目标盘利用mount挂载 3.查看硬盘使用状况,看目标盘是否有足够的空间:df -h 4.如果足够,利用dd命令将源盘数据拷贝到目标盘:dd if=/dev/ ...
- 常量表达式和constexpr（c++11）
常量表达式 常量表达式是指值不会改变且在编译阶段就能得到计算结果的表达式(两点要求) ; //是常量表达式 ; //是常量表达式 "; const int siz=s.size(); //不 ...
- c语言spline
#define NRANSI #include "nrutil.h" void spline(float x[], float y[], int n, float yp1, flo ...
- ASP.NET 日志组件Smart.LogNet.DLL 引用即可写入日志及读取日志
借助LogNet组件,以后查看站点日志,再也不用去服务器下载了 日志组件:LogNet.DLL ,引用即可使用 写入方法: 1.LogNet.Log.WriteLog("日志标题" ...
- gcc和vs在c的一些区别
1.switch中每个标签后面的命令在gcc中需要{}括起来以指明作用域. 2._itoa是非标准的c和c++扩展函数,在linux下可以使用sprintf(string, "%d &q ...
- centos设置服务开机自动启动的方法
centos安装好apache,mysql等服务器程序后,并没有设置成开机自动启动的,为避免重启后还要手动开启web等服务器,还是做下设置好,其实设置很简单,用chkconfig命令就行了. 例如要开 ...
- MFC中处理UI界面时的注意点
最近开发时,在处理界面上遇到了下面的问题: 上位机与下位机通信时,如果出现超时,弹出MessageBox提示的情况下,更新界面上的CStatic控件会出现重影. 经过调查发现 原因是由于在UI线程中处 ...
- 增加显示记录数的label及隐藏refresh按钮
1. 在UniDBgrid的extEvent属性中写入以下代码: function OnAfterCreate(sender) { var toolbar=sender.getDockedItems( ...