Vue由浅入深学习系列笔记之01

申明

    首先的说在前面，此博客是个人从0起步学习vue,vue专家大神级别，请绕道，不用在这里浪费时间，如果你能够继续看下去呢，希望你和我一样本着初学的热情和从头开始的耐心来上手一个优秀的前端框架vue.线上关于vue的学习资料和视频很多很多，那我为什么记录这系列的学习笔记了，主要有以下两个原因：1、提供一份由浅入深，循序渐进的完整笔记、认真负责的笔记，2、相对于视频来讲，从笔记上学习会快很多，我想用个人的视频学习时间为大家省下再看视频的时间。如果你赞同且有兴趣，很开心能和你分享。下面我们正式进入学习笔记...

下载安装

    初学、为了入门，我们先使用直接引入vue.js库的方式进行学习，首先，我们进到vue官网:https://cn.vuejs.org/v2/guide/installation.html 点击

下载vue.js库。在自己磁盘上创建给目录如：vue-learn，并把下载好的js拷贝进去，然后创建一个标准的html5结构的index.html文件，并使用<script>标签引入vue.js到改页面。

基础示例

    vue给我们提供了模型视图数据双向绑定，也就是只要你把数据模型定义好，初始化vue实例时将其注册与相应视图绑定后，数据模型改变或是视图数据改变，数据会进行双向同步。下面给出一个1、定义视图 2、定义数据模型 3、实例化vue并注册视图和数据模型 4、改变数据模型自动反映到视图的实例：

    通过实例中的changeName方法调用改变数据模型，vue会自动同步更新视图，大家可以试试，那么vue是否提供我们获取数据改变前后的监听事件呢，有的如下：

本篇核心知识点：

• 实例化vue并注册数据模型与视图绑定：var vm = new vue(注册对象) ，其中注册对象有两个数据el（设置为页面模型选择器）、data设置为数据模型对象

• 文本插值符及使用方式：{{数据模型对象的属性名称}}

• 模型对象的取值方式：vm.$data.属性名

• vue内置数据改变监听方法注册：vm.$watch("数据模型对象属性名称",function(newVal,oldVal){...})