uniapp 引入第三方UI框架 项目下新建 project.config.json 文件 添加 { "miniprogramRoot": "unpackage/dist/dev/mp-weixin/" }

Vue历史变迁 1.jquery 优点： 高效开发 兼容性好(IE-现代浏览器) 缺陷： 缺乏组织性 类库缺乏业务分层 性能不好(大量操作dom) 2.MVVM 设计模式 model模型 指的是后端传过来的数据。 view视图 指的是所有看到的页面，可以理解为将数据以某种方式呈现给用户。 ViewModel 指的是视图模型，他是连接view和model的桥梁。 Vue 1.x 设计理念 没有虚拟dom(2.x才有虚拟dom) 一个节点元素对应一个Watcher 优点：少量数据性能快 缺点：大量数据性能慢，每个节点都对应一个watcher Vue 2.x 设计理念 第一次渲染 Component Render 直接从模板渲染成虚拟Virtual Dom Tree 后续数据更新 getter setter 发布 Watcher 触发绑定的组件，再转换成虚拟dom，再渲染成真实dom

jQuery中的Dom操作 1.查找节点 通过jQuery选择器来完成 2.创建节点 创建元素节点：var newTd = $("<td></td>") 创建文本节点：var newTd = $("<td>文本内容</td>") 3.插入节点 1) $A.append(B) 将B追加到A的末尾处，作为它的最后一个子元素 2) $A.appendTo(B) 将A追加到B的末尾，作为它的最后一个子元素 3) prepend() $A.prependTo(B) 将A追加到B的前面，作为它的第一个子元素 $A.after(B) 在A之后追加B，作为它的兄弟元素 $A.insertAfter(B) 在B之后追加A，作为它的兄弟元素 $A.before(B) 在A之前追加B，作为它的兄弟元素 $A.insertBefore(B) 在B之前追加A，作为它的兄弟元素 4.删除节点 remove([selector]) 从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。 该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。 detach([selector]) 与remove()类似，但是detach()保存所有jQuery数据和被移走的元素的相关联事件。 empty() 无参数。从DOM中清空集合中匹配元素的所有的子节点。 5.复制节点 $("#id").clone(false); 该方法返回的是一个节点的引用，参数默认为false，为浅复制； 参数是true,为深复制，含义是：复制元素的同时复制元素中所绑定的事件。 6.替换节点 replaceWith(newContent); 用新内容替换集合中所有匹配的元素，并且返回被删除的元素的集合。 该方法会删除与节点相关联的所有数据和事件处理程序。 replaceAll(target); 用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。 7.包裹节点 wrap([wrappingElement]) 在每个匹配的元素外层包上一个html元素 warpAll([wrappingElement]) 将所有匹配的元素用一个元素来包裹，在所有匹配元素外面包裹一层HTML结构 warpInner([wrappingElement]) 每个匹配元素里面内容(子元素)都会被这种结构包裹 8.节点遍历 children([selector]) 用于取得匹配元素的子元素集合(只考虑子元素而不考虑任何后代元素) $('.content.inner')=>$('.content').children('.inner'); find(selector) 在当前对象元素中的子元素查找，和参数所匹配的所有的后代元素 next([selector]) 取得匹配的元素集合中每一个元素紧邻的后面兄弟元素 nextAll([selector]) 查找当前元素之后所有的同辈元素 prev([selector]) 取得匹配元素前面紧邻的兄弟元素 prevAll([selector]) 取得当前元素之前所有的同辈元素 silibinng([selector]) 取得匹配元素的前后所有的兄弟元素 closest(selector) 取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素 filter(selector) 把当前所选择的所有元素再进行筛选过滤 parent([selector]) 取得匹配元素的集合中，每个元素的父元素 parents([selector]) 获得集合中每个匹配元素的祖先元素

事件修饰符大全 .stop 阻止事件继续传播 冒泡 .prevent 阻止标签默认行为 .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件将只会触发一次 .passive 告诉浏览器你不想阻止事件的默认行为 <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div> 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 以上为事件修饰符，面试常问的，还有以下其它类型修饰符为扩展加分项，不必须回答！！！！！！！！！！ 二、 v-model的修饰符 .lazy默认情况下，v-model同步输入框的值和数据。 可以通过这个修饰符，转变为在change事件再同步。 <input v-model.lazy="msg"> .number自动将用户的输入值转化为数值类型 <input v-model.number="msg"> .trim自动过滤用户输入的首尾空格 <input v-model.trim="msg"> 三、键盘事件的修饰符 在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符： <input v-on:keyup.13="submit"> <input @keyup.enter="submit"> <!-- 缩写形式 --> 全部的按键别名： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 修饰键： .ctrl .alt .shift .meta

jQuery中常用的API 1.jQuery中的html(),text(),val()方法 html() 无参：获取html的值 有参数html：设置html的值 text() 无参：获取文本值 有参数text：设置文本值 val() 无参：获取value的值 有参数value：设置value的值 3.jQuery中属性设置函数 //获取属性值 attr(key) prop(key) //删除属性 removeAttr(attributeName) removeProp(propertyName) //批量设置属性 css(key) //添加类 addClass(className) //判断有没有指定的类，有，返回true，否则返回false hasClass(className) //删除类 removeClass(className) 3.jQuery中的工具方法 1) get(); //以数组的形式返回DOM节点。 console.log($('div').get()); 2) toArray(); //返回一个包含jQuery对象结合中的所有DOM元素数组。 console.log($('div').toArray()); 3) eq(index); //返回index位置上的jQuery对象。 console.log($('div').eq(1).get(0)); 4) filter(function(index,item){}); //过滤器函数，返回jQuery对象。 var $result = $('div').filter(function(index,item){ return index == 2; }); 5) map(function(index,item){}); //用于获取或设置元素集合中的值。 var $result = $('div').map(function(index,item){ return $(item).html() }); 6) each(function(index,item){}); //遍历一个jQuery对象。 $('div').each(function(index,item){ console.log(index,'--',item); }); 7) slice(0,3); //截取 var $result = $('div').slice(0,3); console.log($result.get()); }); 8) not() 9) first() 10) last() 11) is() 12) has()