1.1Vue.js是什么?
简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
渐进式(Progressive)：你可以一步一步、有阶段性地来使用Vue.js,不必一开始就使用所有的东西。
1.1.1 MVVM（Model-View-View-Model）模式
- 当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然。View和ViewModel之间通过双向绑定建立练习。
1.2起步练习
-
新建项目vue-basic,选择普通项目,再选择模板框内选择基本HTML项目
image.png
-
新建html文件,取名为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>v-model数据双向绑定</title>
<!--通过CDN引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vueapp的根容器-->
<div id="app">
<input type="text" v-model="name" placeholder="请输入"/>
<h2>{{name}}</h2>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
name:'uhh'
}
})
</script>
</body>
</html>
运行结果如下图
image.png
输入框中的内容和下面文本的内容是同步的
网友评论