定义一个变量接收Vue构造函数构造出的实例，并且传入的参数是一个对象 const app = new Vue({}); 这个对象参数中的一些属性也有特定的作用。...{{message}} 浏览器运行 我们可以在控制台动态修改h1中的内容（F12打开控制台，选择Console） 在这可以明显的感受到，通过...// 5.将修改后的数据再次替换到div元素 案例2 展示列表 展示ul列表 通过上一个案例，可以在每个li中，将需要的数据传入特定的li中，但是这种写法过于冗余...，items in movies的意思是，用for循环遍历movies数组，将获取的数据都赋给变量items，最后在li中展示items，这样就可以自动的生成li结构，并往li中添加items数据。...， v-on:click，就是添加click事件， 在指令中让counter++和counter--， vue实例会动态监测到counter的变化，在点击后将改变的counter值添加到h1中
身上的，但是 触发的对象是 ul 里面的小li // (3) on可以给未来动态创建的元素绑定事件 // $("ol li").click(function() { // alert(11);...案例：发布微博案例 点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。 点击的删除按钮，可以删除当前的微博留言。 ul中的li是JS动态创建的，在页面加载时Docoment中并没有此元素，选择器并不能选取。...*/ }) $("ul").on("click", "li>a", function() { // on 可以为动态创建的元素绑定事件。...，然后存储给本地存储 重新渲染加载数据列表 因为a是动态创建的，我们使用on方法绑定事件 1.7.6 案例：toDoList 正在进行和已完成选项操作 当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表
引言 在写前端的时候经常用到js或jquery语法，有时候傻傻分不清，现在将学习过程中遇到的总结一下。 ...'); }) 结果如下： 后面动态创建的5和6，没法进行点击事件触发。 ...备注： 这里需要注意的问题是如果元素是动态创建的话，这里就不能这样使用： // 动态的元素不能使用这种。...和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。...在事件的处理中，可以阻止冒泡但是允许默认事件的发生。 总结 在写web前端的时候，一些基础知识还是要去打扎实，不然写的时候会发现各种困难。
事件委托也称事件代理，在jQuery里面就称为事件委派。 事件委托就是把事件监听放在祖先元素（如父元素、爷爷元素）上。...事件委托的原理 不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利事件用冒泡的原理影响设置每个子节点 事件委托作用 绑定事件越多，浏览器内存占用越大，严重影响性能 只操作一次DOM...比如上例中，e.target 就是 li ，e.currentTarget 就是 ul 以上代码中，并没有给每一个元素绑定事件，只是给父节点ul绑定事件，但是点击每一个li时，可以变换其样式。...image.png 事件委托的优点： 1.减少事件注册，节省内存。 在table上代理所有td的click事件。 在ul上代理所有li的click事件。 2.可以监听动态生成的元素。...不用在新添加的li上绑定click事件。 当删除某个li时，不用移解绑上面的click事件。
（委派） // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li // $("ul li").click();...on可以给未来动态创建的元素绑定事件 $("ol").on("click", "li", function() { alert(11);...案例：发布微博案例 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。 2.点击的删除按钮，可以删除当前的微博留言。 代码实现略。...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。...(i, 1)方法 // 5.存储修改后的数据，然后存储给本地存储 // 6.重新渲染加载数据列表 // 7.因为a是动态创建的，我们使用on方法绑定事件 1.7.6 案例：toDoList 正在进行和已完成选项操作
在Mvc模式大行其道的今天，后端通过各种Mvc框架实现视图与数据模型的隔离，而前端这方面也发展迅速。...第二部分：揭开vuex面纱 本示例实现为一个输入框动态向下拉列表增加选择项的功能源码下载地址，先看效果图： ?...为了展示vuex的作用，此示例你可以看到如下内容： 两个局部组件：输入和下拉列表组件 一个全局组件：App，也是整个Vue实例的顶级组件 一个jquery.js和bootstrap.js，用于实例下拉组件...重点关注inputComp组件中button子元素的on中的click方法，内部用dispatch触发了store中对应Id的actions。...vuex中创建的store实例传递进去。
on() 方法优势3： 动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件 $(“div").on("click",”p”, function(){...案例：发布微博案例 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。2.点击的删除按钮，可以删除当前的微博留言。 ...代码实现 $(function () { // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中 $...// 原来的方法 此时的click不能给动态创建的a标签添加事件 因为上面添加的a还没有触发 这个查询不到 // $("ul a").click(function (...) { // $("li").remove(); // }); // on可以给动态创建的元素绑定事件 $("ul").on("click
1.3.2 然后修改名字–>Next–>完成;完成后里面是空的 1.3.3 在项目下创建js文件夹,将vuejs.js文件放入js文件夹,这个是工具 1.3.4 创建mode.html(下面就是,其也是快速入门案例...-- 即事件不是从内部元素触发的 --> click.self="doThat">......="fun1">弹出Vue中的username click="fun2">弹出Vue中的address ...vue在生命周期中有这些状态： beforeCreate:创建VUE对象之前执行，此时data中的数据还未初始化，el还未关联到对应的id created:创建VUE对象之后执行,此时data中的数据已经初始化...beforeDestory:vue对象销毁前执行 destroyed:vue对象销毁后执行 Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。
事件处理 因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()，重点讲解如下：...()方法在匹配元素上绑定一个或多 个事件的事件处理函数 语法: element.on (events, [selector], fn) events:一个或多个用空格分隔的事件类型,如"click或"...（委派） // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li // $("ul li").click(); ...) on可以给未来动态创建的元素绑定事件 $("ol").on("click", "li", function() { alert(11); ...案例：发布微博案例 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。 2.点击的删除按钮，可以删除当前的微博留言。
> // 使用事件代理绑定列表项点击事件 $('#myList').on('click', 'li', function() {...; }); // 动态添加一个列表项 $('#myList').append('li>Item 4li>'); 在这个例子中，我们使用了事件代理，将点击事件绑定到了 ul 元素上，但指定了只有 li 元素被点击时才触发回调函数。...这样，即使在页面加载完成后动态添加了新的列表项，它们仍然会受到事件的监听。 标准方式：多个事件类型 on 方法不仅可以绑定单一的事件类型，还可以同时绑定多个事件类型。...; }); 在这个例子中，我们使用了事件委托，将点击事件绑定到了 ul 元素上，但指定了只有 li 元素被点击时才触发回调函数
/ triggerHandler(): 事件触发 2.1 事件处理 on() 绑定事件 因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate...on()方法优势3:动态创建的元素, click0 没有办法绑定事件，on0 可以给动态生成的元素绑定事件 ("div") .on("click","p", function(){alert ("俺可以给动态生成的元素绑定事件...（委派） // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li // $("ul li").click();...) on可以给未来动态创建的元素绑定事件 $("ol").on("click", "li", function() { alert(11);...事件处理 off() 解绑事件 当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。
//DOM加载完成的入口 }) jQuery的顶级对象：$ `是jQuery 别称，在代码中`和jQuery和等价，为了方便都是$。...}) 例如： $(“div”).click(function(){ //事件处理程序 }) ---- jQuery 事件处理 1.事件处理 on() 绑定事件在匹配元素上绑定一个或多个事件的事件处理函数...//$(“div”).on(“mouseover mouseout”, function() { // ...... //}); 事件委派： //li的处理事件委派给父ul，里面每个li都有了click...; }); 注意：事件委派现在大多采用⬆️这种写法： 优势在于当动态创建元素时，可以动态自动为其绑定事件 例如：ol里添加li并动态绑定事件 $("ol").on("click", "li", function...; }) var li = $("li>后来创建的lili>"); $("ol").append(li); 2.事件处理 off() 解绑事件可以移除通过 on() 方法添加的事件处理程序。
"> //给第一个按钮添加点击事件 $("input:eq(1)").click(function(){ //创建li var li = $("li>li>");...str); //把创建的li添加到ul里面 $("ul").prepend(li); }) $("input:eq(2)").click(function(){ var..."> //先把所有二层ul隐藏 $("li>ul").hide(); //给第一层的所有li添加点击事件 $("body>ul>li").click(function(){...//在事件方法中this代表触发该事件的元素对象 //this是js对象如果需要使用jq中的方法需要将 //js对象转成jq对象$(this) //得到点击li里面的子元素ul..."> //给按钮添加点击事件 $("input:last").click(function(){ //在点击事件里面创建一个tr和五个td //5个td分别是nametd agetd
绑定简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值，但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。...在绑定事件之前，一定要确保页面中的DOM元素已经就绪。如果没有就绪或者后面动态添加的DOM元素则不会动态更新事件处理程序。 参数： type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）在选择元素上绑定一个或多个事件的事件处理函数。...// live ： 对 动态创建的dom元素绑定事件。 // delegate : 事件委托绑定事件。...IE678：window.event 标准浏览器直接从事件处理程序的参数中获得事件对象e e = e || window.event; 在jQuery的事件处理程序中，可以直接获取事件对象，所有浏览器都兼容
如下所示： var traffic_lights = $("#traffic_light input"); 2，在class前使用tag(标签名) 在jQuery中第二快的选择器是tag(标签)选择器...例如，你想动态的创建一组列表元素，千万不要这样做,如下所示： var top_100_list = [], // 假设这里是100个独一无二的字符串 $mylist = $("#mylist"..._100_list[i] + "li>"); } 我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示： var top_100_list = [],$mylist = $(...jQuery( expression, context ); 通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。...，这个方法的功能就是为 新增的DOM元素 动态绑定事件。
Vue列表展示 下面来看一个稍微复杂一点的例子---列表展示 先来看看效果 ? 下面思考, 如果我们使用jquery会如何实现呢?...ul> li v-for = "item in languages">{{item}}li> ul> 注意红色粗体部分....li> ul> 以前我们要这么写一大堆, 如果是动态从服务端取数据, 那么还要拼li代码, 很容易出错, 还很费劲....这是vue的写法. v-on是vue的指令, 这里先有个印象, 后面会详细讲解. v-on表示要执行一个事件, :click就是具体的事件, 这里是点击事件, 点击后执行什么逻辑呢?...MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。
">ul> jquery/3.2.1/jquery.min.js"> click="add">submit ul> li v-for...数据和视图的分离，解耦（开放封闭原则，对扩展开放，对修改封闭） 在jQuery中在jQuery代码中操作视图和数据，混在一块了 以数据驱动视图，只关心数据变化，DOM操作被封装 只改数据，视图自动更新...MVVM的理解 MVC （Model View Controller） 1.png 2.png MVVM （Model View ViewModel) 3.png View 通过 事件绑定...> ul> li v-for="item in list">{{item}}li> ul> 本质
DOM操作 示例 查找结点 获取元素结点：var $li = $('ul li:eq(1)'); 获取属性结点：var p_txt = $li.attr('name'); 创建结点 jQuery工厂方法...在jQuery中，通常事件绑定是通过bind(type[,data],fn)方法实现的，其第一个参数为事件类型，非常丰富，包括blur,focus,load,resize,unload,click,dblclick...对于jQuery中的事件来说，其均使用事件冒泡机制，而不支持时间捕获机制(可以用原生js)。...事件冒泡就是当页面上有个元素时，其中一个嵌套在另一个中，如果均绑定了click事件，那么触发内层元素的click事件时，会同时触发外部的click事件。...这样的机制在有时是需要的，但有时却不是期望的，那么就绪要通过event.stopPropagation()方法来禁止事件的冒泡了， 此外，在jQuery中，可以通过event.preventDefault
jQuery中定义变量的时候，一般命名用$开头。同事一看就知道是使用了jQuery，然后使用jQuery的语法。 其实$是jQuery中的一个函数。...当在入口函数里面的事件的时候，如果有大段的代码，一般工作中都是在外面封装一个函数，然后在事件中进行调用。...// }) // 3、*****$('li').on(字符串形式的事件属性, 匿名函数) // 表示只是在（没有作用1提高代码执行效率优点）给未来的li绑定事件而已...调用属性和函数： 对象名.属性名 对象名.方法调用 对象内部写对象名可以写this JavaScript中没有$，只有jQuery中才有$ 在ajax做数据交互的时候，json是用的最多的数据格式 用的最多的是列表、字典、字典列表相互嵌套等等，也有可能是文件 json特点之一：json中有字符串必须是双引号 json可以是文件，后缀名就是json
ul id="myList"> li>Item 1li> li>Item 2li> li>Item 3li> ul...> // 使用事件代理绑定列表项点击事件 $('#myList').on('click', 'li', function() {...; }); // 动态添加一个列表项 $('#myList').append('li>Item 4li>'); 在这个例子中，我们使用了事件代理，将点击事件绑定到了 ul 元素上，但指定了只有 li 元素被点击时才触发回调函数。...这样，即使在页面加载完成后动态添加了新的列表项，它们仍然会受到事件的监听。 解绑事件 on 方法不仅能绑定事件，还能解绑事件，以避免不必要的执行。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
