Vue2.5入门-3
安装和使用
全局安装vue
npm install --global vue-cli
创建基于webpack模板的新项目
vue init webpack my-project
安装依赖
cd my-project
npm run dev
测试代码
父组件可以通过属性的方式向子组件传值,:content
App.vue
<template>
<div>
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item>
</ul>
</div>
</template> <script>
import TodoItem from './components/TodoItem.vue'
export default {
components: {
'todo-item': TodoItem
},
data () {
return {
inputValue: '',
list: []
}
},
methods: {
handleSubmit () {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete (e) {
// delete this.list[e]
this.list.splice(e, 1)
}
}
}
</script> <style> </style>components/TodoList.vue,子组件可以通过this.$emit向父组件传递事件
<template>
<div @click="handleClick">{{content}}</div>
</template> <script>
export default {
props: ['content', 'index'],
methods: {
handleClick () {
this.$emit('delete', this.index)
}
}
}
</script> <style scoped> </style>
全局样式与局部样式
scoped起限制作用域的作用
.item {color: red;}
Vue2.5入门-3的更多相关文章
- vue2.0入门
vue2.0 开发实践总结之入门篇 vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工 ...
- 【数据售卖平台】—— Vue2.0入门学习项目爬坑
前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...
- Vue2.5入门-2
todolist功能开发 代码 <!DOCTYPE html> <html> <head> <title>vue 入门</title> &l ...
- Vue2.5入门-1
vue如何引用和使用,实例和挂在点的介绍 <!DOCTYPE html> <html> <head> <title>vue 入门</title&g ...
- Vue2.0 入门 安装Vue-cli
因为要用到npm命令先按装node.js 具体安装如下: 一.安装Node.js步骤 1.下载对应你系统的Node.js版本:https://nodejs.org/en/download/2.选安装目 ...
- vue2.x入门学习
vue安装 # 最新稳定版本 $ npm install vue # 最新稳定 CSP 兼容版本 $ npm install vue@csp 引包 cd /d/vue/demo cnpm instal ...
- Vue2.5学习路线及基础知识总结。
在接触新技术不了解时,我喜欢去慕课网上看新手教程,在学习vue时,在慕课网上看了几个老师的视频,发现这挺好,讲到挺详细的,适合新手,有兴趣的可以先看一下,vue2.5入门教程. 然后在学习路上看见了一 ...
- Vue入门到TodoList练手
学习资料 慕课网 - vue2.5入门 基础语法 示例代码1 <div id="root"> <h1>hello {{msg}}</h1> &l ...
- vue
vue.js 插件 setting--> plugins 搜索vue,下载安装如果想要高亮显示*.vue文件,可以在File Types 选项里找到HTML,然后在下方手动添加*.vue,这样就 ...
随机推荐
- Tomcat服务时区设置
tomcat服务不设置时间,会自动取系统时间,根据项目部署服务器位置不同时间会有差别,统一设置tomcat服务集群时间为东八区时间,具体设置如下: 在tomcat目录的bin文件夹下,找到文件cata ...
- curl 抓取页面信息
<?php // 1. 初始化 $ch = curl_init(); // 2. 设置选项,包括URL curl_setopt($ch, CURLOPT_URL, "www" ...
- 3、Spring Cloud - Eureka(构建服务端/客户端)
3.1.Eureka简介 3.1.1.什么是 Eureka 和Consul.Zookeeper 类似, Eureka 是一个用于服务注册和发现的组件,最开始主要应用 于亚马逊公司旗下的云计算服务平台 ...
- 學習Extjs比較好的資源
http://www.qeefee.com 學習mvc extjs等比較好 还有就是extjs文档 要多看extjs文档中的方法源码 egg:图片 点击format.js看源码如何定义
- selenium + python自动化测试unittest框架学习(三)webdriver元素操作(二)
上一篇是元素的定位,那么定位元素的目的就是对元素进行操作,例如写入文本,点击按钮,拖动等等的操作 (1)简单元素操作 简单元素操作 find_element_by_id("kw") ...
- face++
1.链表反转 2.快排 3.m*k n*k两矩阵计算欧几里得距离np.tile 4.链表排序,要求时间复杂度小于O(N^2),空间O(1),不允许改变链表的值 5.2sum及其变体 6.给一个数组 ...
- 百度Apollo安装说明
前言:最近在和百度Apollo合作,Apollo的人很nice,大家都在全力帮助我们解决问题.但Apollo系统有点难搞,安装起来很费劲,为了避免再次踩坑,留下笔记,流传后人,O(∩_∩)O. 1. ...
- PHP面试系列 之Linux(六)---- 面试题整理
1.shell命令 top:查看有哪些系统进程正在运行.该命令提供了实时对系统处理器状态的监控,它能够实时显示系统中各个进程的资源占用情况.该命令可以按照对CPU.内存使用和执行时间对系统任务进程进行 ...
- JDK(六)JDK1.8源码分析【集合】LinkedHashMap
本文转载自joemsu,原文连接 [JDK1.8]JDK1.8集合源码阅读——LinkedHashMap LinkedHashMap的数据结构 可以从上图中看到,LinkedHashMap数据结构相比 ...
- (转)解决nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed错误
重新启动服务器,访问web服务发现无法浏览啦!登陆服务器之后进到nginx使用./nginx -s reload重新读取配置文件,发现报nginx: [error] open() "/usr ...