我们来试试看，我们把name中的值改成：“hello word”，再不添加任何代码的情况下，页面视图是否会自动更新。
看下面的gif动图，我们通过chrome浏览器演示一下：
(慢点，等gif图加载完)
如上图所示，一旦name的值被改变了，页面上立马跟着发生了变化，而不需要你再写innerHTML去更新视图了。
这就是Vue.js的数据驱动视图。
3 双向绑定
更方便的是，Vue.js还提供了方便的语法指令，实现视图和数据的双向绑定，也就是说，不但数据变化了可以驱动视图，用户在页面上做了一些操作，也很方便地实现更新model层的数据。
例子：监听用户在页面输入框输入的内容，然后将其实时更新在页面上。
在Vue中我们使用v-model指令就可以轻松实现。（v-model是什么东西，先不用管，后面会有章节详细介绍）。
<div id="app">
<input v-model="number">
<p>数字:{{ number }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
number:"",
}
});
</script>
效果如下面的动图：
(慢点，等gif图加载完)
案例中，我们不需要写代码去监听input控件的内容变化，用户输入的内容，会实时地更新vm实例中的data属性number的值，一旦number更新了，视图也会跟着更新了。因为这一切，都由Vue.js帮你完成了。
4 组件
上面的我们演示了Vu.jse的数据驱动，别忘了，上一节我们提到Vue.js还有一个重要的核心，就是：组件化。
组件化就是把页面中特定的区块独立抽出来，并封装成一个可方便复用的组件。
例子：假设，页面上有多个一样的卡片：
传统的办法，我们可以要写三份同样的HTML布局：
<div id="app">
<!--第1个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>
<!--第2个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>
<!--第3个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端教程</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>
</div>
内容版权声明：除非注明，否则皆为本站原创文章。