Vue.js
本章内容:
Vue是什么?
Vue是一套用于构建用户界面的渐进式框架。Vue的核心只关注视图层,不仅容易上手,还便于与第三方库或既有项目整合。
Vue两大核心思想
-
数据驱动
数据
(data)
驱动视图(html)
:data选项中的数据发生变化, 用到该数据的所有视图 (标签) 会自动更新, 这个特点称为响应式。 -
组件化
扩展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:存储数据,可以存储任何类型数据。