Vue 的使用心得，也许你也能顿悟
0 / 19 / 创建于 7年前 /
维C 的个人博客
打通任督二脉
秘籍是：
不要用操作dom的思维去用Vue，用操作数据的思维去用。
当我明白这一点后，我真的就像打通了任督二脉一样，从此所向睥睨，成为一代东方不败，呸，东方求败。
以前我们要改变页面的样式必须是通过获取dom元素改变元素的样式和内容。
而Vue只需要我们改变数据即可。
换句话说就是：
一切需要操作dom的全都用数据的变化去表示。
当然，这背后发生了啥，我们暂且不去深究。
我们阶段目的是用起来。
简单的例子
jQuery的操作
<html>
<div id="app">
message
</div>
<input type="text" id="input">
<script>
$('#input').on('change',function(){
var _value = $(this).val();
$('#app').text(_value);
})
</script>
</html>Vue的操作
<html>
<div id="app">
{{message}}
</div>
<input type="text" v-model="message">
<script>
new Vue({
el:'#app',
data:{
message:''
}
})
</script>
</html>这个例子是Vue官网上的。
每个了解过Vue的人都看到过，但有没有明白什么呢？
可以看到，jquery要根据输入的值改变界面需要进行dom的操作。
不过如果是用Vue的话，我们改变Vue实例中的message，界面也就相应的改变。
项目里经常会碰到增加，删除某些东西的功能，以前用jQuery的时候都是直接一梭子dom操作解决的。
现在我们直接对数据进行操作，增加或者删除掉数据，界面就变化了。
最后
一定要记住，不要用操作dom的思维去用Vue，用操作数据的思维去用吧。
本作品采用《CC 协议》，转载必须注明作者和本文链接
本帖由系统于 6年前 自动加精
关于 LearnKu
粤公网安备 44030502004330号
一把梭子6666
@刘天承 :joy: 日常操作
数据驱动 :monkey_face:
@__yu 对的，以前一直不明白什么是数据驱动就还一直想着dom操作。
....我还以为有啥神奇的顿悟呢
@ruke 哈哈，对我来说这个很重要的 :joy:
你才知道吗
@调调 是呀，才明白。对老手来说肯定没什么了。
@simpleT 我刚学就知道了 :joy:
@调调 好吧，人比人气死人
我当初也是这样，学vue的时候用DOM的思维去操作，后来也顿悟了，不过我好久没用过vue了。
@fatrbaby 哈哈 握爪握爪。
mvc---->vv
一开始用vue，就完全把jquery扔了，，，而且现在也不想写jq了，，
@largezhou 你不是孤单的 :smile:
让数据从上往下流下去，而不是定义在各个组件中。
只需要更新顶部的数据流，数据就会流动到各个组件，从而更新ui
还以为有什么黑科技呢
一梭子dom比喻的好
vue 做的就是dom更新由他来完成