Vue.js的官网
定义：渐进式JavaScript框架
前端三个框架：Augular React Vue
MVVM：Model View View Model
当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。
data-binding双向绑定：仅适用于表单元素
- Vue可以通过CDN引入且Vue视图数据分离
起步练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue起步</title>
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h2>{{message}}</h2>
<h3>{{name}},{{age}}岁</h3>
</div>
<script type="text/javascript">
/* 实例化一个Vue对象 */
var app = new Vue({
el: '#app',
data: {
message: 'Vue.js',
name: '尤雨溪',
age: 30
}
})
</script>
</body>
</html>
- el指的是element元素
- data:用于数据的存储，data的值可以使一个对象，可以是任何类型
- 花括号是模板
网友评论