麻雀虽小五脏俱全的Vue入门案例
很多学习vue的同学ES6、CSS等的基础还不是很好，上来就直接通过 vue-cli提供的脚手架来创建webpack + Vue 项目，这样子是很不利于理解框架原理的，本文通过一个简单的html带大家入门vue，给你一个通透的感觉。
功能简介
ToDoList，待办事件记录，主要功能如下：
增加待办事件
展示待办事件
事件标记为已完成
删除事件包含的知识点：
vue组件生命周期
vue中v-bind动态绑定样式（隔行变色）
v-for、v-bind、 v-on、v-model指令、插值表达式
父子组件相互通信
定义局部组件和全局组件
JS中数组的push、splice等操作<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style type="text/css">.activated{color: red;font-size: 20px;}.unActivated{color: royalblue;font-size: 20px;}</style></head><body><div id="app"><div><input type="text" v-model="inputValue" name="" id="" displayName="123456"><button @click="handleClick" >submit</button></div><ul><Item v-for="(todo,key) in todos" v-bind:content="todo" v-bind:index="key" @delete="handleDelete"></Item></ul></div><script>//局部组件var Item = {props: [content,index],//isActivated是定义在子组件的data里面的，而不是父组件 !!!template: `<li @click=handleItemClick :class="isActivated==0 ? activated : unActivated"> {{ content.text }} </li>`,//注意子组件必须用data function !data: function () {return{isActivated: 0}},created: function(){this.index % 2 === 0 ? this.isActivated = 0 : this.isActivated = 1},methods: {handleItemClick: function () {this.$emit("delete",this.index);}}}//父组件var app = new Vue({el: #app,components:{Item},data: {todos: [{ text: Learn JavaScript },{ text: Learn Vue.js },{ text: Learn Spring },{ text: Learn C++ }],inputValue: ""},methods:{handleClick: function () {if(this.inputValue === ){return}let textObj = {text: this.inputValue}this.todos.push(textObj)this.inputValue =},handleDelete: function (index) {alert("确定要删除" + this.todos[index].text + "?")this.todos.splice(index, 1)}}})</script></body></html>版权申明
本文系作者 @河马 原创发布在河马博客站点。未经许可，禁止转载。
暂无评论数据