zoukankan      html  css  js  c++  java
  • jQuery和Vue的区别

    1.jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作
    2.Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值就行更新。
    3.可以简单的理解为Vue帮我们做了dom操作,我们以后用Vue就需要修改对象的值和做好元素和对
    象的绑定,Vue这个框架就会自动帮我们做好dom的相关操作
    4.这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定,如果JS对象的值也跟随着dom元素的
    值的变化而变化就叫做双向数据绑定


    用一个简单的例子来说明编写Jquery和Vue上的不同
    修改文字


    点击按钮后:




    改为




    (1)jQuery代码


    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>  
    </head>  
    <body>  
    <div>
        <p>大家好,我是<span id="name">张三<span>!</p>
        <p>我是一名<span id="jop">医生</span>.</p>
        <button id = "modifyBtn">修改</button>
    </div>
    <script type="text/javascript">  
        $("#modifyBtn").click(function(){
            $("#name").text("李四");
            $("#jop").text("老师");
        });
    </script>  
    </body>  
    </html>  


    (2)Vue代码


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <p>大家好,我是<span>{{name}}<span>!</p>
        <p>我是一名<span>{{jop}}</span>.</p>
        <button v-on:click="modifyInfo">修改</button>
    </div>
    	
    <script>
    new Vue({
      	el: '#app',
    	data:{
        	name:"张三",
        	jop:"医生"
    	},
    	methods:{
        	modifyInfo:function(){
            	this.name = "李四";
            	this.jop = "老师";
        	}
    	}
    })
    </script>
    </body>
    </html>


  • 相关阅读:
    【Vue】状态管理
    【Vue】路由
    【Vue】组件
    【Vue】基础(数据 & 计算属性 & 方法)
    【Vue】基础(虚拟DOM & 响应式原理)
    【Vue】基础(生命周期 & 常用指令)
    【Vue】搭建开发环境
    【Mongodb】事务
    【Mongodb】视图 && 索引
    【Mongodb】聚合查询 && 固定集合
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924983.html
Copyright © 2011-2022 走看看