vue使用的是”mvvm双向绑定框架”, 也可以理解为容器托管
我们将练习使用代码输出 Hello World
数据绑定
编写vue主要有3个步骤,
- 引入vuejs,
- 编写dom元素并使用vue托管
- 编写data并在html中使用
我们将使用经典的 v-model 进行演示
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="test">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
<script>
//创建vue对象
var vm = new Vue({
el:'#test',
data:{
msg:'Hello Vue World!'
}
});
</script>
试着改变input中的内容, p元素也会跟着改变
{{msg}}
你可以理解为, html元素给了vue容器托管, 然后js从容器中取值, 这样就能轻松实现数据的双向绑定