初识Vue.js（一）

丨许晨丨

于 2018-05-07 11:53:44 发布

阅读量1k

点赞数 2

文章标签： Vue.js

本文为许晨原创文章，转载请附上原文出处链接和本声明。。

本文链接：https://blog.csdn.net/mrxuchen/article/details/80223722

版权

Vue.js的官方文档是这样介绍它的。
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
简单小巧是指Vue.js压缩后仅有17kb，渐进式就是可以一步一步，有阶段地来使用Vue.js，不必一开始就使用所有的东西。
使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端的开发模式。它提供了现代 Web开发中常见的高级功能，比如：

解耦视图与数据
可复用的组件
前端路由
状态管理
虚拟DOM

1.1 Vue.js是什么？

1.1.1 MVVM模式
与知名前端框架Angular。Ember等一样，Vue.js在设计上也使用了MVVM（Model-view-ViewModel）模式。
MVVM模式是由经典的软件架构MVC衍生而来。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然，View和ViewModel之间同过双向绑定（data-building）建立联系。

1.1.2 Vue.js有什么不同
对于使用过jQuery的人来说，一定对操作DOM、绑定事件等这些原生JavaScript能留非常熟悉，比如我们在指定的DOM中插入一个元素，并绑定一个事件：

if(showBtn){
var btn=$('<button>Click me</button>');
btn.on(‘click’,function(){
console.log('Clicked!');
});
$('#app').append(btn);

}

这段代码不难理解，操作的内容也并不复杂，不过这样让我们的视图代码和业务逻辑紧紧耦合在一起，随着功能的不断增加，直接操作DOM会使得代码变得越来越难以维护。
而Vue.js通过MVVM的模式拆分为视图与数据两部分，并将其分离。因此，只用关心数据即可，DOM的事情Vue会帮我自动搞定，比如上面的示例用Vue.js可以改写：

<body>
<div id="app">
<button v-if="showBtn" v-on:click="handleClick">Click me</button>
</div>
</body>
<script>
new vue({
e1:'#app'
data:{
show button:true
},
methods:{
handleClick:function(){
console.log('Clicked!');
}
}

})
</script>

1.2 如何使用Vue.js

每一个框架的产生都是为了解决某个具体的技术问题，我们先对传统前端开发模式和Vue.js的开发模式做一个对比，以此了解Vue.js产生的背景和核心思想。
1.2.1 传统前端开发模式
前端技术近几年发展迅速，如今前端开发已不再是10年前写个HTNL和Css那样简单了，新的概念层出不穷，比如ECMAScript6、Node.js、NPM、前端工程化等。这些新东西不断优化我们的开发模式，改变我们的编程思想。
随着这些技术的普及，一套可以称为“万金油”的技术栈被许多商业项目用于生产环境：

jQuery+RequireJS+artTemplate+Gulp

这套技术以jQuery为核心，能兼容绝大部分浏览器，这是很多企业比较关心的。使用RequireJS进行模块化开发可以解决代码依赖混乱的问题，同时便于维护和团队协作。使用轻量级的前端模板如doT，可以将数据与HTML模板分离。最后，使用自动化构建工具Gulp可以合并压缩代码。
这一套看似完美无暇的前端解决方案就构成了我们所说的传统前端开发模式，由于它的简单、高效、使用、至今仍有不少开发者在使用。不过随着项目的扩大和时间的推移，出现了更复杂的业务场景，比如SPA(单页面富应用)、组件解耦等。为了提升开发效率、降低维护成本，传统的前端开发模式已不能完全满足我们的要求，这时就出现了诸如Angular、React、Vue.js。
1.2.2 Vue.js的开发模式、
Vue.js是一个渐进式的JavaScript框架，根据项目需求，可以从不同的维度来使用它。如果只是想体验Vue.js带来的快感，或者开发几个简单的HTML5页面或者小应用，可以直接通过Script加载CDN文件。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

引入Vue.js框架后，在body底部使用new Vue()的方式创建一个实例，这就是Vue.js最基本的开发模式。
图书列表的小demo

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Vue实例</title>
		
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="book in books" >{{book.name}}</li>
			</ul>
			
		</div>
<script src="img/js/vue.js"></script>	
<script>
	new Vue({
		el: '#app',
		data: {
		books: [
		{name:'《Vue.js实战》'},
		{name:'《Java实战》'},
		{name:'《C#实战》'},
		]
		}
	})
</script>
	</body>
</html>

对于一些业务逻辑复杂，对前端工程有要求的项目，可以使用Vue单文件的形式配合webpack使用，必要时还会用到vuex来管理状态，vue-router来管理路由。

1.3 极速入手

引包
- 确认已经下载了node,然后执行命令 npm install vue (如需下载自己要的版本在vue后面加上@版本号)
- 页面引入刚下载的包
留坑即留一个vue模板插入的地方或者是vue代码对其生效的地方
实例化 即启动Vue
启动： new Vue({el:目的地,template:模板内容});实例化传入的是一个对象options
- options
  - 目的地 el 对应上面留坑的坑位，可通过id名，类名，标签名来查找。方式和jq一样
  - 内容 template
  - 数据 data 值为函数形式也可是对象，但是都是用函数，因为用的函数最后也是return一个对象
    -插值表达式{{ }}
- 插值表达式内填入data里面的变量即可在页面取到变量值{{ data里的变量 }}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- 留坑 -->
	<div id="app"></div>


	<!-- 引包 -->
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		// 实例化启动vue
		new Vue({
			el:'#app',//目的的，可以识别类名、id名和标签名，如果做到极致优化可以直接用document.getElementById获取
			template:`     
			<div>
				<div>我这里是模板内容{{ msg }}</div>
				<div>111</div>
			</div>
			`,//模板内容,根节点只能有一个
			data:function(){
				return {
					msg:'Hello Vue!'
				}
			}
		})
	</script>
</body>
</html>