快速了解 Jquery 和 Vue 的不同
Posted 尚学堂java培训
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快速了解 Jquery 和 Vue 的不同相关的知识，希望对你有一定的参考价值。
前端开发需求，从javascript已经在编程语言排行榜上排到了第七位和前端聘岗位数就可以看出，前端开发正在向前「冲」。
今天尚小萌搜集一些前端的入门知识，用一个简单的例子来说明编写Jquery和Vue上的不同。
demo1 简单修改文字
点击按钮后：把hello，美女!欢迎学习Angular.
改为 hello，帅哥!欢迎学习Vue.
jquery代码
(用以下代码直接替换掉html文件中的body,看不懂没关系后面会详细说道Vue的方方面面)
<div>
<p>Hello, <span id="name">美女</span>!</p>
<p>欢迎学习 <span id="libName">Angular</span>.</p>
<button id = "modifyBtn">修改</button>
</div>
<script ></script>
<script type="text/javascript">
$("#modifyBtn").click(function(){
$("#name").text("帅哥");
$("#libName").text("Vue");
});
</script>
Vue代码
<div id="mycontent">
<p>Hello, <span >{{name}}</span>!</p>
<p>欢迎学习 <span >{{libName}}</span>.</p>
<button v-on:click="modifyInfo" >修改</button>
</div>
<script ></script>
<script type="text/javascript">
var vm = new Vue({
el: "#mycontent",
data:{
name:"美女",
libName:"Angular"
},
methods:{
modifyInfo:function(){
this.name = "帅哥";
this.libName = "Vue";
}
}
})
</script>
小结：
1. Jquery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作;
2. Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
3. 可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作。
4. 这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的值的变化而变化就叫做双向数据绑定，顾名思义单向和双向 以上是关于快速了解 Jquery 和 Vue 的不同的主要内容，如果未能解决你的问题，请参考以下文章