之前总结过一次，但是总结的太随便，这次复习基础知识重新好好理一遍！

一、起步内容总结

1.helloworld示例


el:接管区域
data:定义的变量
使用vue 不用再直接操作DOM 
如果想要setTimeout改变页面内容，不用再操作DOM啦 我们只需要把精力放在数据得管理上就好啦

2.开发todolist

todolist是最最最最基础的小功能，这个不会写就完犊子了 
</head>
<body>
	<div id="app">
		<input type="text" v-model="inputValue"/>
		<button v-on:click="handleBtnClick">提交</button>
		<ul>
			<li v-for="item in list">{{item}}</li>
		</ul>
	</div>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				list: [],
				inputValue: ''
			},
			methods: {
				handleBtnClick: function() {
					this.list.push(this.inputValue)
					this.inputValue = ''
				}
			}
		})
	</script>
</body>
</html>
就是个小小的demo 所以就用script标签引入vue就得了
v-for：循环项目
v-on：事件=“xxx”   ：绑定事件 指向xxx事件处理程序
v-model=“xxx" ：双向绑定 input框发生内容和inputValue绑定后 一个变了 另一个也跟着变
methods：方法 定义函数
注意:当在methods理使用this的时候 this指的是整个app，不过在使用点操作符的时候，会默认先到data里面寻找

3.MVVM

传统的前端设计逻辑是MVP

M 模型 V 视图 P 控制器  核心是控制器 而控制器的主要内容又是进行DOM操作


而MVVM

核心是M层

说白了 MVP面向DOM操作 MVVM则面向数据操作

4.前端组件化

每个组件也都是vue实例
使用组件化思想修改一下todolist 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TodoList</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id="root">
		<div>
			<input type="text" v-model="todoValue"/>
			<button @click="handleBtnClick">提交</button>
		</div>
		<ul>
			<todo-item v-bind:content="item" 
				    v-for="item in list">
			</todo-item>
		</ul>
	</div>

	<script>

		// Vue.component("TodoItem", {
		// 	props: ['content'],
		// 	template: "<li>{{content}}</li>",
		// })

		var TodoItem = {
			props: ['content'],
			template: "<li>{{content}}</li>"
		}

		var app = new Vue({
			el: "#root",
			components: {
				TodoItem: TodoItem
			},
			data: {
				todoValue: "",
				list: []
			},
			methods: {
				handleBtnClick: function() {
					this.list.push(this.todoValue)
					this.todoValue = ""
				}
			}
		})
	</script>
</body>
</html>
v-bind：向子组件传入一个绑定值的意思
template：模板 子组件的内容
props：接收父组件传来的值
但组件又分为全局组件和局部组件：
全局组件： 
		 Vue.component("TodoItem", {
		 	props: ['content'],
		 	template: "<li>{{content}}</li>",
		 })
局部组件： 
var TodoItem = {
            props: ['content'],
            template: "<li>{{content}}</li>"
        }
局部组件还需要在vue实例中注册一下 
components: {
                TodoItem: TodoItem
            },
说完了组件
那不得不提组件间传值：
刚刚已经用到了父组件向子组件传值——使用v-bind 传递和props接收
那么如何从子组件向父组件传值呢——
  • 子组件使用 $emit 向外触发自定义事件 并传出参数 this.$emit("delete",this.index) 
  • 父组件使用v-on= 认真聆听 听到事件了 就进行相应的改变

二、VUE基础
vue生命周期函数：

样式绑定：
class对象绑定 也可以使用style
可以通过对象的形式绑定 也可以通过数组的形式绑定

条件渲染：
v-if：决定一个标签是否在页面展示
v-else
v-else-if：要和v-if紧贴在一起使用
v-show：和v-if类似 但是v-show哪怕是false 该标签的dom也在页面上存在

key值：加上key值就是唯一的元素 key值不一样就不会被复用

列表渲染：
可以循环数组和对象
v-for="(item,key,index) of list" 、
可以循环对象或数组 循环数组不用key
可以在循环上带上key值提高性能

只有以下几个方法 ，或者，改变引用对象 才能又改变数组，又改变页面显示：
pop push shift unshift splice sort reverse
如果只使用下标进行修改，则页面不会改变

对象如果也想做这种改动，就需要改动引用
template：可以包裹一些循环元素 但不会被真正的渲染到页面上

set:
Vue.set(vm.userInfo,1,5)
vm.$set(vm.userInfo,2,10)
也可以使用 set方法 改变对象内容 同时改变页面
set是对象的方法 也是实例的方法

事件绑定：
获取点击事件的详情 可以通过 handleClick 或者 handleClick（$event)
一些事件修饰符：
prevent stop self （只有在e.target=e.currentTarget) once capture(事件捕获 从外向内）
还有按键修饰符
.enter .tap .esc …………只有按下这些键后才执行
系统修饰符 类似按键修饰符
.ctrl  .meta .shift .alt
鼠标修饰符
@click.right  .left  .middle

表单绑定：
v-model 可以实现双向绑定
<input v-model="value/>
{{value}}
可以绑定文本框 文本域 复选框 单选框 下拉选择菜单（select option)
v-model.lazy 偷懒 过一会 失去焦点以后再双向绑定
v-model.number：输入内容可以被转换为数字 就转换为数字 不然默认的是字符串。
v-model.trim：和ES6中的一样 去掉首位的空格

小结：
实例 new vue
模板语法 
计算属性 避免冗余
样式绑定：class style 通过对象或数组
条件渲染：v-if v-else-if v-else 
列表渲染：v-for
事件处理
表单绑定：v-model

组件部分：
is 属性 <tr is = "row")
在子组件中 定义data时  必须是一个函数 不能直接用data:{  }  需要用 data:function( ) { }
在vue中可以通过 ref 获取dom 节点 this.$refs.refname

父子组件传值：
有单向数据流 子组件只能使用父组件传过来的参数 不能修改 但是可以拷贝一个副本 修改副本
父组件向子组件传值  通过属性传递
子组件向父组件传值 （子组件不能随意修改父组件的值）通过触发事件 向父组件传值

组件参数校验：

给组件绑定原生事件：
@click.native

非父子组件传值：
总线机制/BUS/观察者模式：

vue中使用插槽：<slot> 可以更方便的向子组件传内容 可以给插槽起名字
<slot name="name">
作用域插槽 必须是<template slot-scope="props">

动态组件：<component :is="type">
v-once：只渲染一次

Vue 动画效果：<transition>
本章小结：


xxx.vue的文件就是一个单文件组件
路由就是根据网址不同，返回不同的内容给用户
 <router-view/>显示的是当前路由地址所对应的内容
 <router-view/>
header: 
<style lang="stylus" scoped>
通过 设置 scoped 保证该部分的样式只对这个文件起作用