Vue 的使用心得，也许你也能顿悟
0 / 19 / 创建于 6年前 /
维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 协议》，转载必须注明作者和本文链接
本帖由系统于 5年前 自动加精
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：