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

前言

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

一、Vue.js介绍

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

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

二、单页面应用

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

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

三、解决SPA造成的问题

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

四、vue的安装和使用

1、安装

去官网安装

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开始