Vue.js入门（基础 第一章）

前言

算是自己学习vue.js的过程的一个记录，不是标准的教学文章，只是分享出来

一、Vue.js介绍

        vuejs是一套构建用户界面的渐进式框架，采用自底向上的增量开发

            渐进式：主张最少，自底向上 

                     自底向上：先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能

---

二、单页面应用

        单页Web应用（single page web application，SPA），只有一张web页面的应用
 对于单页面应用来说模块化的开发和设计相当重要。

优点:
        1、分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起;|
        2、减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍;
        3、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端;

    缺点:
        1、SEO问题，现在可以通过Prerender等技术解决一部分;
        2、前进、后退、地址栏等，需要程序进行管理;

 三、解决SPA造成的问题

        MVVM架构（视图层）
                M：js存储的数据
                VM：实现vue的双向数据绑定的核心技术（vuejs提供，v-model） 
                V：html展示    

四、vue的安装和使用         

        1、安装

                去官网安装

        https://cn.vuejs.org/v2/guide/installation.html

        2、使用

                2.1在html文件中引用vue.js文件

<script src="vue.js文件保存路径"></script>  

                 2.2挂载html元素

                        写在该页面的js文件中

//id为app的元素，用vue进行管理
//自动挂载
	let vm=new Vue({
		el:"#app" ,
		data:{
			message:""
		}
	})
	
	//手动挂载
	let vm=new Vue({
		data:{
			message:""
		}
	}).$mount("#app");

                2.3在html中使用 

<div id="app >

    <span>
        {{message}} //页面会显示js文件中设置的message的内容
    </span>

</div>

        3、vue属性和方法

                全局属性

                  Vue.config

                 全局方法

                   Vue.filter()
                   Vue.mixin()

                实例属性

                  vm.$data 返回的是一个对象，vm.键名 相当于vm.$data.键名
                  vm.$el 挂载的节点，返回的是一个dom对象
                        注：vue2.0起就不能挂载到html和body上

                实例方法

                vm.mount() //挂载
                vm.$set();//修改数据，特点，修改数据后，dom会重新渲染
                vm.$nextTick()//dom更新完成执行
                vm.$watch();//监视某个值的变化               

四、总结

vue入门从官方api开始

https://cn.vuejs.org/v2/api/