标签：由浅入深 01 vue 视图 js 学习 Vue 笔记 数据模型

申明

    首先的说在前面，此博客是个人从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){...})
  

标签：由浅入深,01,vue,视图,js,学习,Vue,笔记,数据模型
来源： https://blog.51cto.com/14522065/2436373

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。