为什么放弃jQuery 选择 Vue
我们之前如果用jQuery操作DOM的话 类似 $('#xxx').parent().parent().parent()，
一旦需求发生变动，页面面临迭代，DOM的关联与嵌套层次就要发生改变就会变成$('#xxx').parent().parent().parent().parent().parent()了。
所以学习Vue.js时请先抛开手动操作DOM的思维。
因为Vue.js是数据驱动的，你无需手动操作DOM。
它通过一些特殊的HTML语法，将DOM和数据绑定起来。
一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
响应式：vue.js会自动对页面中某些数据的变化做出响应
demo code
<!DOCTYPE html>
<html lang="en">
<!-- 入口层 -->
<head>
<meta charset="UTF-8">
<title>vue.js- 双向绑定</title>
<!-- 引入vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- MVVM中的 View层 -->
<input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message">
<hr>
<p>{{ message }}</p>
</div>
<script type="text/javascript">
// MVVM中的 ViewModel层
var app = new Vue({
el: '#app',
// MVVM中的 Model层
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
网友评论