JavaScript框架——Vue的基础语法

80 阅读 0 评论 53 点赞

我是靠谱客的博主坚定过客，最近开发中收集的这篇文章主要介绍JavaScript框架——Vue的基础语法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Vue简介

JavaScript框架
简化DOM操作
响应式数据驱动

引入Vue程序需要以下三个步骤：

导入从官网下载的Vue.js
创建Vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上
代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script type="text/javascript" src="vue.js"></script>
</head>
<body>
   <div id="app">
   	{{message}}
   </div>
   <script type="text/javascript">
   	var app = new Vue({
   		el: "#app",
   		data:{
   			message:"hello world!"
   		}
   	})
   </script>
</body>
</html>

el（挂载点）:

用来设置Vue实例挂载（管理）的元素；

data（数据对象）：

Vue用到的元素需要写到data中，data中也可以写复杂的数据类型；

那么，Vue的作用范围是什么？
答：el命中元素的内部，也就是说在div元素内部嵌套一个别的元素，同时这个元素的内部也有{{message}}也可以，看以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="vue.js"></script>
</head>
<body>
	<div id="app">
		{{message}}
		<span>{{message}}</span>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data:{
				message:"hello world!"
			}
		})
	</script>
</body>
</html>