VUE学习记录（新结）
之前总结过一次，但是总结的太随便，这次复习基础知识重新好好理一遍！
一、起步内容总结
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 保证该部分的样式只对这个文件起作用
