vue的sayHello

vue使用的是”mvvm双向绑定框架”, 也可以理解为容器托管

我们将练习使用代码输出 Hello World

数据绑定

编写vue主要有3个步骤，

1. 引入vuejs，
2. 编写dom元素并使用vue托管
3. 编写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元素也会跟着改变

你可以理解为, html元素给了vue容器托管, 然后js从容器中取值, 这样就能轻松实现数据的双向绑定