Vue 实现todolist功能

基础知识：

事件绑定 v-on: 可简写为 @

属性绑定 v-bind: 可简写为 :

数据的双向绑定 v-model

v-if , v-show, v-for 指令

全局组件局部组件

v-for 指令可以绑定数组的数据来渲染一个项目列表：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Vue入门</title>
<script src="vue.js"></script>   <!--安装-->
</head>
<body>

<div id="root">
<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"
><!--
      :content="item"和:index="index"为父组件向子组件传值，这些值都要通过props接收
      @delete为父组件通过父组件中的deleteItem函数，监听子组件中额delete事件。
    -->

</todo-item>
</ul>
</div>

<script>
Vue.component("todo-item",{
	props:["content", "index"],   //子组件利用props：[...] 接收每一个父组件传过来的值
	template:"<li @click='handleClick'>{{content}}</li>",
	methods:{
		handleClick: function(){
			this.$emit("delete",this.index)   //子组件向父组件传值: this.$emit()
      //通过事件触发向上一层触发事件，父组件监听此事件，获取子组件带出的数据内容

		}
	}
})


new Vue({
	el:"#root",
	data:{
		inputValue:"",
		list:[]
	},
	methods:{
		handleSubmit:function(){
			this.list.push(this.inputValue)
			this.inputValue=""
		},
		handleDelete:function(index){
			this.list.splice(index,1)
		}
	}
})
</script>
</body>
</html>

实现的功能：在input输入，点击提交，会显示li，然后点击li，会删除li。

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var vm=new Vue({ ...})

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

生命周期钩子的 this 上下文指向调用它的 Vue 实例。

//比如 created 钩子可以用来在一个实例被创建之后执行代码：
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

绑定 HTML Class

通过 Prop 向子组件传递数据

<!-- 父组件 -->
 
<template>
 <div>
  <h1>我是父组件！</h1>
  <child message="我是子组件一！"></child> //通过自定义属性传递数据
 </div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>

<!-- 子组件 -->
 
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
  props: ['message']  //声明一个自定义的属性
 }
</script>

使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。需要被v-bind绑定

父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。

this.$emit()
通过事件触发向上一层触发事件，父组件监听此事件，获取子组件带出的数据内容

vueRouter中用 redirect 来定义重定向。

Vue 实现todolist功能

基础知识：

猜你喜欢