vue - 初识

Vue.js

本章内容:

Vue是什么?

​ Vue是一套用于构建用户界面的渐进式框架。Vue的核心只关注视图层,不仅容易上手,还便于与第三方库或既有项目整合。


Vue两大核心思想

  • 数据驱动

    数据(data)驱动视图(html):data选项中的数据发生变化, 用到该数据的所有视图 (标签) 会自动更新, 这个特点称为响应式。

  • 组件化
    扩展HTML元素, 封装可重用的组件 ( 代码 )。


起步

​ 创建一个.html文件,通过如下方式引用:

开发版本
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产版本
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
第一个Vue案例
<!DOCTYPE html>
<html>
<head>
	<title>Vue - 起步 - 第一个Vue案例</title>
</head>
<body>
	<div id="app">
		{{message}}
	</div>
	<script src="../vue.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				message: "mischievousness"
			},
            methods: {} // 存放一些事件方法
		})
	</script>
</body>
</html>
注意事项

​ el:表示的是Vue接管的范围

​ 全称element,可传入标签名,类名,id。这里建议使用id,因为id具有唯一性。

Vue接管的范围不能是body或html。

​ data:存储数据,可以存储任何类型数据。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章