一.起步练习
1.首先通过CDN引入Vue.js

2.写入vue-app根容器

3.实例化Vue对象

4.预览

二.v-model双向绑定练习
1.首先在根容器中输入“input”自动生成

2.修改自动生成代码为

3.此时运行出现如下效果:
image.png
4.我们在输入框内输入:wang 会出现以下效果

5.再在代码中输入 wang 也会出现同上效果
image.png
6.这就是v-model的双向绑定
三.v-bind绑定data中的属性

网友评论