01Vue.js快速入门与概念
2018-04-15 本文已影响0人
个人不完美
Vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue引入方式
初学Vue可以直接把它当做一个js库使用，而且它的库文件很小，所以它可以很容易的接入到你的项目或者单个页面中。甚至你可以只使用它的双向绑定功能。所以它很容易上手。
Vue入门示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./js/vue.js"></script><!-- 在这里引入官网上下载的vue.js -->
<title>vue入门</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
//实例化Vue的对象
var app=new Vue({
el:"#app", //绑定元素的ID选择器，这里也可以绑定类（class）选择器
data:{
//data里面存放数据
msg:"hello vue!", //msg是自定义的数据
},
methods: {
//在methods这里面写方法、事件之类的代码
}
})
}
</script>
<div id="app">
<!-- 在这里绑定数据 呈现到页面上 -->
<h3>{{msg}}</h3>
</div>
</body>
</html>
Vue代码解析过程
1、浏览器从上到下依次进行解析
浏览器对于id=app的div内部的{{msg}}不认识 直接作为普通文本渲染到网页上
2、浏览器继续往后解析执行:
发现有一个js外链接脚本，发起请求进行下载
当前页面环境拿到js脚本之后，执行结束，就向全局暴露了一个对象：Vue
3、当解析执行到咱们自己的script的时候 开始解析执行咱们自己的代码
（1）创建Vue实例 =》通过el属性指定Vue程序的接管范围,通过data向Vue实例的应用程序中初始化了一个msg成员。
（2）Vue程序通过el属性 指定的#app的div开始解析执行Vue能识别的语法
{{msg}} 在vue里面称为双花括号插值表达式 在双括号插值表达式中可以使用当前元素所属Vue程序接管范围的data中的数据。
