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,这样就 ...
随机推荐
- 判断计算机是否可以ping通
#!/usr/bin/python # -*- coding: utf-8 -*- import os of = open('servers.txt','r') ofw=open('servers_p ...
- Python实例---简单购物车Demo
简单购物车Demo # version: python3.2.5 # author: 'FTL1012' # time: 2017/12/7 09:16 product_list = ( ['Java ...
- JavaScript学习---JavaScript基础知识
JavaScript的引入方式 JavaScript的引入方式: 1.直接在script里面写: 2.使用<script src="JS的文件位置"> {#1 直接编写 ...
- 设置OWA访问HTTP到HTTPS的重定向
需求:公司要求使用Http://mail.ever.com的方式来统一访问邮箱,所以需要进行相关的设置,将访问需求重定向到https://extest.ever.com/owa 首先在DNS里的eve ...
- contextlib
contextlib with 语句 上下文 任何对象,只要正确实现了上下文管理,就可以用于with语句. 实现上下文管理是通过__enter__和__exit__这两个方法实现的. 例如,下面的 ...
- 微软最新设计Fluent Design System初体验
微软最新设计Fluent Design System初体验 本文图片不全!建议移步知乎专栏查看!!! https://zhuanlan.zhihu.com/p/30582886 原创 2017-11- ...
- 通过163smtp服务器向各大邮箱发送邮件(SOCKET编程)
package server; import java.io.*; import java.net.*; import java.sql.Time; import java.util.Scanner; ...
- js 调用 oc 的解释
JavaScriptCore NSInvocation js解释器在解释函数调用时,会在执行环境进行函数搜索,主调者类型判定: 如果是js调用,直接解释执行: 如果是oc调用,则将调用打包成NSInv ...
- 【[TJOI2010]电影迷】
一度自闭 这道题一看就是最小割无疑 我们假设源点\(S\)表示看这个电影,汇点\(T\)表示不看这部电影 如果一个电影的价值为正,我们就从源点点连一条容量为\(val\)的边,表示割掉这个边也就是选择 ...
- [Python 多线程] threading.local类 (六)
在使用threading.local()之前,先了解一下局部变量和全局变量. 局部变量: import threading import time def worker(): x = 0 for i ...