Vue学习记录

一、Vue基础知识点

1.1 MVVM模型

 了解什么是MVVM之前，我们先讲一下什么是MVC？MVC是Model-View-Controller的缩写，也就是“模型-视图-控制器”，那自然MVVM是Model-View-ViewModel的缩写，也就是“模型-视图-视图-模型”。不了解MVC的同学可以先百度一下，这里分享一下廖雪峰老师的MVVM讲解MVVM-廖雪峰官方网站

1.2 Vue基本语法模板

 按照官网创建的Vue实例来解释一下Vue的基本语法和模板，代码如下：
HTML页面代码：

<div id="app">
  <p>{{ foo }}</p>
  <button v-on:click="fooChange">Change it</button>
</div>

引入Vue.js之后的JavaScript代码：

var vm  = new Vue({
	el:'#app',
	data:{
		foo:'123'
	},
	methods:{
		fooChange:function(){
			foo = '321'
		}
	}
});

 Vue中最基本的就是数据绑定，数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，所以html页面中foo部分就是Vue的数据绑定部分
 Vue中指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM，即fooChange就是一个操作Button按钮的Vue指令
 在Vue实例中el后面的就是和jquery一样的使用#取到元素的id，这里可以理解为Vue的作用域，即Vue只能在id=app的DOM元素以及其子元素范围内起作用
 在Vue实例中data里面的就是页面中需要进行数据绑定的具体数据，使用Key-Value形式展现，Key需要与页面中进行绑定的名称一致
 在Vue实例中methods里面的就是页面中需要进行操作DOM的方法，这里就是页面中v-bind绑定的fooChange方法，方法作用就是点击Button改变绑定数据foo的值

1.3 条件渲染与列表渲染

 在Vue实例中条件渲染和列表渲染也就是Vue的指令，v-if，v-show，v-else-if，v-for通过英文名称就明白前三个指令是条件指令，后一个是循环指令也就是列表渲染的指令，具体详情可以参考官网条件渲染与列表渲染

1.4 Class与Style绑定

1.5 事件处理

1.6 计算属性与监听器

1.7 Vue生命周期

1.8 组件基础

1.8.1 待定

待定

待定