Vue2.5入门-3
2024-09-01 12:58:50
安装和使用
全局安装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;}
最新文章
- C# Using 用法
- sufeinet
- 移动端UC浏览器和QQ浏览器的部分私有meta属性
- Oracle 中 call 和 exec的区别
- CSS3之过渡Transition
- Unicode 编码概念
- Java基础01 ------ 从HelloWorld到面向对象
- nginx添加未编译安装模块
- Linux备份入门：3种克隆方法详解_Clonezilla
- oracle 转 mysql 最新有效法（转）
- 使用recordmydesktop进行屏幕录像
- 超实用Java快捷键
- JS之正则表达式
- Tomcat的常用内置对象
- 微信小程序中的app.js-清除缓存
- 网页的异步请求（Ajax）
- Visual studio中编译和使用libpng和zlib
- 理顺FFT
- sql server中调用c#写的dll里的方法
- andriod studio 获得程序名