博客详情

vue入门，基础代码结构 (原创)

作者：朝如青丝暮成雪
发布时间：2019-03-23 14:37:10 文章分类：vue 阅读(999) 评论(0)

一、vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue是一个关注于UI层的MVVM框架。

二、vue的基本代码结构

			<!DOCTYPE html>
		
			<html lang="en">
		
			<head>
		
			<meta charset="UTF-8">
		
			<title>01.vue的基本代码</title>
		
			<!--引入vue库 -->
		
			<script src="../lib/vue-2.2.2.js"></script>
		
			</head>
		
			<body>
		
			<!--mvc和mvvm 的概念 -->
		
			<!--是new出来的vm实例会操控这个元素(区域)中所有内容  -->
		
			<!--这个div 就是mvvm中的v -->
		
			<div id="app">
		
			<p>{{msg}}</p>
		
			</div>
		
			</body>
		
			<script>
		
			//new出来的vue实例对象(vm)就是mvvm中的vm
		
			var vm=new Vue({
		
			el:"#app",//el 即element指定vm所操控的元素
		
			//m 模型数据，这个data中所有属性就是mvvm中的m
		
			data:{
		
			msg:"你好，欢迎使用vue"
		
			} ,
		
			method:{
		
			}
		
			});
		
			</script>
		
			</html>