一、jQuery加载 1.元素加载     将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。 <script type="text/javascript">     $(document).ready(function(){         ......     }); </script>     可以简写为： <script type="text/javascript">     $(function(){         ......     }); </script> 二、jQuery选择器 1.jQuery选择器     jQuery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。 $(document)           // 选择整个文档对象 $('li')               // 选择所有的li元素 $('#myId')            // 选择id为myId的网页元素 $('.myClass')         // 选择class为myClass的元素 $('input[name=first]') // 选择name属性等于first的input元素 $('#ul1 li span')   // 选择id为为ul1元素下的所有li下的span元素 2.对选择集进行修饰过滤(类似CSS伪类) $('#ul1 li:first') // 选择id为ul1元素下的第一个li $('#ul1 li:odd')   // 选择id为ul1元素下的li的奇数行 $('#ul1 li:eq(2)') // 选择id为ul1元素下的第3个li $('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li $('#myForm :input') // 选择表单中的input元素 $('div:visible')    //选择可见的div元素 3.对选择集进行函数过滤 $('div').has('p');          // 选择包含p元素的div元素 $('div').not('.myClass');   //选择class不等于myClass的div元素 $('div').filter('.myClass'); //选择class等于myClass的div元素 $('div').first();           //选择第1个div元素 $('div').eq(5);             //选择第6个div元素 4.选择集转移 $('div').prev('p');       //选择div元素前面的第一个p元素 $('div').next('p');       //选择div元素后面的第一个p元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').parent();        //选择div的父元素 $('div').children();      //选择div的所有子元素 $('div').siblings();      //选择div的同级元素 $('div').find('.myClass'); //选择div内的class等于myClass的元素 三、jQuery样式操作 1.操作行间样式 // 获取div的样式 $("div").css("width"); $("div").css("color"); // 设置div的样式 $("div").css("width","30px"); $("div").css("height","30px"); $("div").css({fontSize:"30px",color:"red"});     特别注意：选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。 2.操作样式类名 $("#div1").addClass("divClass2")             // 为id为div1的对象追加样式divClass2 $("#div1").removeClass("divClass")          // 移除id为div1的对象的class名为divClass的样式 $("#div1").removeClass("divClass divClass2") // 移除多个样式 $("#div1").toggleClass("anotherClass")       // 重复切换anotherClass样式 四、jQuery属性操作 1.html函数 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').html('<span>添加文字</span>'); 2.text函数 // 取出文本内容 var $htm = $('#div1').text(); // 设置文本内容 $('#div1').text('<span>添加文字</span>'); 3.attr函数 // 取出图片的地址 var $src = $('#img1').attr('src'); // 设置图片的地址和alt属性 $('#img1').attr({ src: "test.jpg", alt: "Test Image" }); 4.绑定click事件     给元素绑定click事件，可以用如下方法： $('#btn1').click(function(){     // 内部的this指的是原生对象     // 使用jquery对象用 $(this) }) 五、jQuery特殊效果 $btn.click(function(){     $('#div1').fadeIn(1000,'swing',function(){         alert('done!');     }); }); fadeIn()      // 淡入 fadeOut()     // 淡出 fadeToggle()  // 切换淡入淡出 hide()        // 隐藏元素 show()        // 显示元素 toggle()      // 依次展示或隐藏某个元素 slideDown()   // 向下展开 slideUp()     // 向上卷起 slideToggle() // 依次展开或卷起某个元素 六、jQuery链式调用     jQuery对象的方法会在执行完后返回这个jQuery对象，所有jQuery对象的方法可以连起来写： $('#div1')        // id为div1的元素 .children('ul')   // 该元素下面的ul子元素 .slideDown('fast') // 高度从零变到实际高度来显示ul元素 .parent()        // 跳到ul的父元素，也就是id为div1的元素 .siblings()      // 跳到div1元素平级的所有兄弟元素 .children('ul')   // 这些兄弟元素中的ul子元素 .slideUp('fast'); // 高度实际高度变换到零来隐藏ul元素 七、jQuery动画     通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。 $('#div1').animate({     width:300,     height:300 },1000,swing,function(){     alert('done!'); );     参数可以写成数字表达式： $('#div1').animate({     width:'+=100',     height:300 },1000,swing,function(){     alert('done!'); }); 八、尺寸相关、滚动事件 1.获取和设置元素的尺寸 width()、height()                  // 获取元素width和height   innerWidth()、innerHeight()        // 包括padding的width和height   outerWidth()、outerHeight()        // 包括padding和border的width和height   outerWidth(true)、outerHeight(true) // 包括padding和border以及margin的width和height 2.获取元素相对页面的绝对位置 offset() 3.获取可视区高度 $(window).height(); 4.获取页面高度 $(document).height(); 5.获取页面滚动距离 $(document).scrollTop();   $(document).scrollLeft(); 6.页面滚动事件 $(window).scroll(function(){       ......   }) 九、jQuery事件 1.事件函数列表 blur()     // 元素失去焦点 focus()    // 元素获得焦点 change()   // 表单元素的值发生变化 click()    // 鼠标单击 dblclick() // 鼠标双击 mouseover() // 鼠标进入(进入子元素也触发) mouseout() // 鼠标离开(离开子元素也触发) mouseenter()// 鼠标进入(进入子元素不触发) mouseleave() // 鼠标离开(离开子元素不触发) hover() // 同时为mouseenter和mouseleave事件指定处理函数 mouseup() // 松开鼠标 mousedown() // 按下鼠标 mousemove() // 鼠标在元素内部移动 keydown() // 按下键盘 keypress() // 按下键盘 keyup() // 松开键盘 load() // 元素加载完毕 ready() // DOM加载完成 resize() // 浏览器窗口的大小发生改变 scroll() // 滚动条的位置发生变化 select() // 用户选中文本框中的内容 submit() // 用户递交表单 toggle() // 根据鼠标点击的次数，依次运行多个函数 unload() // 用户离开页面 2.绑定事件的其他方式 $(function(){     $('#div1').bind('mouseover click', function(event) {         alert($(this).html());     }); });     取消绑定事件 $(function(){     $('#div1').bind('mouseover click', function(event) {     alert($(this).html());     // $(this).unbind();     $(this).unbind('mouseover');     }); }); 十、主动触发与自定义事件 1.主动触发     可使用jQuery对象上的trigger方法来触发对象上绑定的事件。 2.自定义事件     除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件。 //给element绑定hello事件 element.bind("hello",function(){     alert("hello world!"); });      //触发hello事件     element.trigger("hello"); 十一、事件冒泡 1.什么是事件冒泡     在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 2.事件冒泡的作用     事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。 3.阻止事件冒泡     事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止。 $(function(){     var $box1 = $('.father');     var $box2 = $('.son');     var $box3 = $('.grandson');     $box1.click(function() {         alert('father');     });     $box2.click(function() {         alert('son');     });     $box3.click(function(event) {         alert('grandson');         event.stopPropagation();     });     $(document).click(function(event) {         alert('grandfather');     }); }) ...... <div class="father">     <div class="son">         <div class="grandson"></div>     </div> </div> 4.阻止默认行为     阻止右键菜单。 $(document).contextmenu(function(event) {     event.preventDefault(); }); 5.合并阻止操作     实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用。 // event.stopPropagation(); // event.preventDefault(); // 合并写法： return false; 十二、事件委托 1.事件委托     事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。 2.一般绑定事件的写法 $(function(){     $ali = $('#list li');     $ali.click(function(event) {         $(this).css({background:'red'});     }); }) ... <ul id="list">     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li>     <li>5</li> </ul> 3.事件委托的写法 $(function(){     $list = $('#list');     $list.delegate('li', 'click', function(event) {         $(this).css({background:'red'});     }); }) ... <ul id="list">     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li>     <li>5</li> </ul> 4.取消事件委托 // ev.delegateTarge 委托对象 $(ev.delegateTarge).undelegate(); // 上面的例子可使用 $list.undelegate(); 十三、jQuery元素节点操作 1.创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 2.插入节点     ①append()和appendTo()：在现存元素的内部，从后面插入元素 var $span = $('<span>这是一个span元素</span>'); $('#div1').append($span); ...... <div id="div1"></div>     ②prepend()和prependTo()：在现存元素的内部，从前面插入元素     ③after()和insertAfter()：在现存元素的外部，从后面插入元素     ④before()和insertBefore()：在现存元素的外部，从前面插入元素 3.删除节点 $('#div1').remove(); 十四、滚轮事件与函数节流 1.jquery.mousewheel插件使用     jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jQuery的滚轮事件插件jquery.mousewheel.js。 2.函数节流     javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。 十五、ajax与jsonp     ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。 1.同步和异步     现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。 2.局部刷新和无刷新     ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。 3.同源策略     ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示： XMLHttpRequest cannot load https://www.baidu.com/. No   'Access-Control-Allow-Origin' header is present on the requested resource.   Origin 'null' is therefore not allowed access. 4.$.ajax使用方法     常用参数：     ①url 请求地址     ②type 请求方式，默认是'GET'，常用的还有'POST'     ③dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'     ④data 设置发送给服务器的数据     ⑤success 设置请求成功后的回调函数     ⑥error 设置请求失败后的回调函数     ⑦async 设置是否异步，默认值是'true'，表示异步     以前的写法： $.ajax({     url: 'js/user.json',     type: 'GET',     dataType: 'json',     data:{'aa':1}     success:function(data){          ...... },     error:function(){         alert('服务器超时，请重试！');     } });     新的写法(推荐)： $.ajax({     url: 'js/user.json',     type: 'GET',     dataType: 'json',     data:{'aa':1} }) .done(function(data) {      ...... }) .fail(function() {     alert('服务器超时，请重试！'); }); 5.jsonp     ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了script标签可以跨域链接资源的特性。     jsonp的原理如下： <script type="text/javascript">     function aa(dat){         alert(dat.name);     } </script> <script type="text/javascript" src="....../js/data.js"></script>     页面上定义一个函数，引用一个外部js文件，外部js文件的地址可以是不同域的地址，外部js文件的内容如下： aa({"name":"tom","age":18});     外部js文件调用页面上定义的函数，通过参数把数据传进去。 十六、正则表达式 1.什么是正则表达式     能让计算机读懂的字符串匹配规则。 2.正则表达式的写法 var re=new RegExp('规则', '可选参数'); var re=/规则/参数; 3.规则中的字符     1) 普通字符匹配         /a/ 匹配字符 "a"，/a,b/ 匹配字符 "a,b"。     2) 转义字符匹配         ①\d 匹配一个数字，即0-9。         ②\D 匹配一个非数字，即除了0-9。         ③\w 匹配一个单词字符（字母、数字、下划线）。         ④\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]。         ⑤\s 匹配一个空白符。         ⑥\S 匹配一个非空白符。         ⑦\b 匹配单词边界。         ⑧\B 匹配非单词边界。         ⑨. 匹配一个任意字符，除了换行符"\n"和回车符"\r"。 4.量词     对左边的匹配字符定义个数。     ①? 出现零次或一次（最多出现一次）。     ②+ 出现一次或多次（至少出现一次）。     ③* 出现零次或多次（任意次）。     ④{n} 出现n次。     ⑤{n,m} 出现n到m次。     ⑥{n,} 至少出现n次。 5.任意一个或者范围     ①[abc123] : 匹配&lsquo;abc123&rsquo;中的任意一个字符。     ②[a-z0-9] : 匹配a到z或者0到9中的任意一个字符。 6.限制开头结尾     ①^ 以紧挨的元素开头。     ②$ 以紧挨的元素结尾。 7.修饰参数     ①g： global，全文搜索，默认搜索到第一个结果接停止。     ②i： ingore case，忽略大小写，默认大小写敏感。     ③m： multiple lines，多行搜索（更改^ 和$的含义，使它们分别在任意一行对待行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配）。 8.常用函数     1) test         用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假。     2) search         用法：字符串.search(正则) 匹配成功，返回位置，否则返回-1。     3) match         用法： 字符串.match(正则)；匹配成功，就返回匹配成功的数组，否则就返回null。     4) replace         用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符。 9.正则默认规则     匹配成功就结束，不会继续匹配，区分大小写 十七、本地存储 1.本地存储     本地存储分为cookie，以及新增的localStorage和sessionStorage 2.cookie     ①cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。     ②jQuery 设置cookie $.cookie('mycookie','123',{expires:7,path:'/'});     ③jquery 获取cookie $.cookie('mycookie'); 3.localStorage      localStorage存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。 // 设置 localStorage.setItem("dat", "456"); localStorage.dat = '456'; // 获取 localStorage.getItem("dat"); localStorage.dat // 删除 localStorage.removeItem("dat"); 4.sessionStorage      ①sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。     ②localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。     ③iPhone的无痕浏览不支持Web Storage，只能用cookie。

vue对比jquery vue：mvvm 数据驱动影响视图 适用于复杂数据 jquery：mvc 视图塞入数据 适用于复杂视图动效 生命周期 以下都是钩子函数 beforeCreate（创建前） created（创建后） beforeMount (载入前) mounted（载入后） beforeUpdate（更新前） updated（更新后） beforeDestroy（销毁前） destroyed（销毁后） 计算属性 computed：计算属性 区别与methods： 性能相比methods要高 因为有缓存 只有在相关值发生改变时才会触发 在第一次渲染页面也会主动触发 计算属性的数据源未发生变化 则不会触发响应的计算属性 属性区分于方法 <div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 以下的函数将提供给计算属性的 getter 计算属性默认只有getter reversedMessage: function() { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) </script> 计算属性中默认存在getter方法 我们可以手动添加setter方法: <div id="app"> <p>{{ site }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { site: { // getter get: function() { return this.name + ' ' + this.url }, // setter set: function(newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) // 调用 setter， vm.name 和 vm.url 也会被对应更新 vm.site = '菜鸟教程 http://www.runoob.com'; //触发set方法 document.write('name: ' + vm.name); //动态更新dom树 document.write('<br>'); document.write('url: ' + vm.url); </script> 相关指令 v-text 等同大胡子效果 但是会转换为字符串 v-html 绑定html属性 例如： <div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script> v-if三兄弟 只会渲染判断为真的dom v-show 绑定值的布尔值来判断是否显示 会渲染整个dom只是会根据布尔只能判断是否增加display none这个内联样式 v-if和v-show的区别： v-if有更高的切换消耗； v-show有更高的初始渲染消耗； v-if适合运营条件不大可能改变； v-show适合频繁切换 v-for: 循环 v-once 只会渲染一次 即使数据改变 v-bind 用来响应地更新html属性 使用场景：绑定接口请求得到的数据 简写： : ，可以绑定class和内联样式 例如： <style> .class1 { background: #444; color: #eee; } </style> <body> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"> <br><br> <!-- 单引号只是对下面对两个class1作出区分 不使用也可以 前面是class 样式 后面是bool值 --> <div v-bind:class="{'class1': class1}"> directiva v-bind:class </div> </div> <script> new Vue({ el: '#app', data: { class1: false } }); </script> </body> v-on：用来监听dom事件 其修饰符可以指定键盘事件 v-on:click 简写@click：事件监听 v-model:双向绑定 一般结合input textarea (多行) 使用 其有修饰符.lazy .number .trim 过滤器 vue中可以自定义过滤器 被用作常见地文本格式化 <!-- 在两个大括号中 --> {{ message | capitalize }} <div id="app"> <!-- 过滤器的用法 --> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function(value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) //对字符串的第一个字母进行大写 } } }) </script> 监听属性 watch：响应数据变化 <div id="computed_props"> <!-- 分别绑定kilometers和meters --> 千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters"> </div> <p id="info"></p> <script type="text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers: 0, meters: 0 }, methods: {}, computed: {}, watch: { kilometers: function(val) { //dom中的相关绑定会触发对应的观察属性 this.kilometers = val; this.meters = val * 1000; }, meters: function(val) { this.kilometers = val / 1000; this.meters = val; } } }); // $watch 是一个实例方法 $作用与vue自带的属性区别u与自定义的属性 vm.$watch('kilometers', function(newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; }) </script> 样式绑定 单样式绑定： <style> .active { width: 100px; height: 100px; background: green; } </style> <body> <div id="app"> <!-- 主要是v-bind的使用 --> <div v-bind:class="{ active: isActive }"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true } }) </script> 多样式绑定： <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> <body> <div id="app"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> </div> <script> new Vue({ el: '#app', data: { isActive: true, hasError: false } }) </script> 组件 组件是整个vue知识体系中最重要的一个模块 组件的作用是：复用 前端路由相对于传统路由 请求少 节省资源 mode:history //不使用html5 实现前进和后退 默认设置 关于组件的引用 除了直接引用自定义标签 is标签也可以引用组件到指定的位置,动态绑定组件 全局组件 <div id="app"> <runoob></runoob> </div> <script> // 注册 此中注册方式为全局组件 所有的外部组件中都可以引用 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script> 局部组件 区分于全局组件 <div id="app"> <runoob></runoob> </div> <script> var Child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': Child } }) </script> template template 模版 用来承载dom树 常在组件中使用 props 自定义组件属性：通过props申明属性 可以通过v-bind动态绑定自定义属性 <div id="app"> <child message="hello!"></child> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' //可以这样理解：此处message既是属性也是变量 }) // 创建根实例 new Vue({ el: '#app' }) </script> 动态props 通过v-bind实现 <div id="app"> <div> <input v-model="parentMsg"> <br> <!-- 通过v-bind绑定父组件中的parentMsg 实现动态绑定--> <child v-bind:message="parentMsg"></child> </div> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app', data: { parentMsg: '父组件内容' } }) </script> 组件间交互 父组件往子组件传入数据使用props 反过来则用emit 父传子： 子组件props定义属性 子组件标签引用v-bind将父组件参数与子组件属性绑定 <div id="counter-event-example"> <button-todo v-bind:todo="item"></button-todo> </div> <script> Vue.component('button-todo', { props: ['todo'], template: '<button >{{ todo }}</button>' }) new Vue({ el: '#counter-event-example', data: { item: '我是item' } }) </script> 子传父： 父组件定义method：fv_fuc 接受参数arg 子组件 this.$.emit(<fuc>,<arg>) 子组件标签引用 v-on：<fuc>="fv_fuc" 流程： 子组件的emit触发标签引用的fuc继而触发父组件的fv_fuc <div id="app"> <div id="counter-event-example"> <p>{{ counter }}</p> <button-counter v-on:increment="setCounter"></button-counter> </div> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function() { return { counter: 0 } }, methods: { incrementHandler: function() { this.counter += 1 this.$emit('increment', this.counter) } }, }) new Vue({ el: '#counter-event-example', data: { counter: 0 }, methods: { setCounter: function(somedata) { this.counter = somedata //接收子组件的数据 } } }) </script> 自定义指令 directive 定义指令名称 inserted 当绑定元素插入到dom中会触发 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function(el) { // 聚焦元素 el.focus() } }) // 创建根实例 new Vue({ el: '#app' }) </script> vue.directive定义全局指令 directives: {}的方式定义局部指令 这点和component(组件)相似 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 创建根实例 new Vue({ el: '#app', directives: { // 注册一个局部的自定义指令 v-focus 和components的使用相似 focus: { // 指令的定义 inserted: function(el) { // 聚焦元素 el.focus() } } } }) </script> directive可以和钩子函数配合使用 不需要钩子函数也可以简写 第二个参数是function，默认的第一个参数是el Vue.directive('runoob', { // 绑定bind的钩子函数 bind: function(el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#app', data: { message: '菜鸟教程!' } }) </script> 路由 路由： 需要下载 vue_router库 然后vue.use(VRouter) 使用步骤： 1.定义路由组件 2.定义路由:映射组件 3.通过routes配置新建router实例 4.通过router参数注入路由 并且挂载根实例 页面跳转 rooter-link <!-- 导入路由用到的js --> <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> <script> // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义（路由）组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器， // 或者，只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [{ path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 现在，应用已经启动了！ </script> 路由参数 在映射表里设置 如：path：'/apple/:color' ex6 语法 import 配合export default使用以page的形式导出组件 这都是ex6的语法 另外一种写法： 区别与上一种写法 需要 {} 的使用 let com={ //let 在当前作用域下声明一个变量,不会泄漏到外部 区别与var const：常量 } export { com } //注意{}的使用 引用的时候： import { com } from ... 脚手架 vue-cli 官方脚手架工具 优势 成熟的vue项目架构设计 本地测试服务器 热加载服务器 热更新 集成打包上线方案 webpack 系统要求： node>4.0 指令 vue list:查看模版方案 vue init webpack demo 利用脚手架 初始化项目 项目结构 利用vue_lic生成的项目结构： build: 项目构建(webpack)相关代码 config：配置目录 包括端口号等 初学可以使用默认的 node_modules :npm 加载的项目依赖模块 src：源码 包含几个目录及文件： assets :放置一些图片 logo components :放置一个组件文件 可以不使用 App.vue : 项目入口文件 可以直接把组件写在这里 取代 components目录 main.js :项目的核心文件 .****文件 配置文件 包括语法配置 git配置 static：静态文件 资源目录 如图片 字体等 package.json :npm需要的一套配置文件 index.html: 首页文件入口 可以添加一些meta信息或者统计代码 npm run build：此指令用于生成部署用的文件 文件会存在dist中 创建项目 步骤： vue init webpack Vue-Project 根据提示配置项目信息 cd 到项目下 执行npm install：安装相关依赖 此处需要翻墙 npm run dev :运行项目 有时候浏览器打不开页面可能是端口被占用 更换端口： mac下查询端口占用情况 例如查看8081端口： lsof -i tcp:8081 细节杂记 字符串反转： message.split('').reverse().join('') "-" 命名的属性引用时必须使用单引号 vue中可以绑定对象 也可以绑定对象的计算属性 例子： <div id="app"> <div v-bind:class="classObject"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } } }) </script> 内联样式的两种写法： 在html中直接{} 在css中定义class 然后html中引用 关于导出组件的data中采用函数return data的方式 形成自己的实例 防止复用冲突 vue2.0 如果需要js的完全编程能力 必须使用render渲染外部引入的app组件 区别与template更接近与编译器 template 写 html，script写 js，style写样式，一个template只能有一个div 除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来,例如： <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript"> // 我们的数据对象 var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000 } var vm = new Vue({ el: '#vue_det', data: data }) document.write(vm.$data === data) // true 使用的时候需要前缀$ document.write("<br>") // true document.write(vm.$el === document.getElementById('vue_det')) // true </script>

一、CSS文本设置 1.color：设置文字的颜色，如：color:red;。 2.font-size：设置文字的大小，如：font-size:12px;。 3.font-family：设置文字的字体，如：font-family:'微软雅黑';。 4.font-style：设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜。 5.font-weight：设置文字是否加粗，如：font-weight:bold;加粗 font-weight:normal 不加粗。 6.font：同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';。 7.line-height：设置文字的行高，如：line-height:24px;。 8.text-decoration：设置文字的下划线，如：text-decoration:none; 将文字下划线去掉。 9.text-indent：设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px。 10.text-align：设置文字水平对齐方式，如text-align:center 设置文字水平居中。 二、CSS颜色表示法 1.颜色名表示     比如：red 红色，gold 金色。 2.rgb表示     比如：rgb(255,0,0)表示红色。 3.16进制数值表示     比如：#ff0000 表示红色，这种可以简写成 #f00。 三、CSS选择器 1.标签选择器     标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。  *{margin:0;padding:0} div{color:red} 2.id选择器     通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 #box{color:red} 3.类选择器     通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。 .red{color:red} .big{font-size:20px} .mt10{margin-top:10px} 4.层级选择器     主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。  .box span{color:red} .box .red{color:pink} .red{color:red} 5.组选择器     多个选择器，如果有同样的样式设置，可以使用组选择器。 .box1,.box2,.box3{width:100px; height:100px} .box1{background:red} .box2{background:pink} .box2{background:gold} 6.伪类及伪元素选择器     常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。 .box1:hover{color:red} .box2:before{content:'行首文字';} .box3:after{content:'行尾文字';} 四、CSS盒子模型 1.盒子模型解释     ①元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻。     ②把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。 2.边框 border:10px solid red; 3.内间距padding padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左 4.外间距margin margin：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左 5.盒子模型的尺寸     ①盒子宽度 = width + padding左右 + border左右。     ②盒子高度 = height + padding上下 + border上下。 6.margin相关技巧     ①设置元素水平居中： margin:x auto;     ②margin负值让元素位移及边框合并。 7.外边距合并     当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：     ①使用这种特性。     ②设置一边的外边距，一般设置margin-top。     ③将元素浮动或者定位。 8.margin-top塌陷     在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：     ①外部盒子设置一个边框。     ②外部盒子设置 overflow:hidden。     ③使用伪元素类： .clearfix:before{     content: '';     display:table; } 9.css元素溢出     当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。     overflow的设置项：     ①visible 默认值。内容不会被修剪，会呈现在元素框之外。     ②hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。     ③scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。     ④auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。     ⑤inherit 规定应该从父元素继承 overflow 属性的值。 五、块元素、内联元素、内联块元素 1.块元素     ①支持全部的样式。     ②如果没有设置宽度，默认的宽度为父级宽度100%。     ③盒子占据一行、即使设置了宽度。 2.内联元素     ①支持部分样式（不支持宽、高、margin上下、padding上下）。     ②宽高由内容决定。     ③盒子并在一行。     ④代码换行，盒子之间会产生间距。     ⑤子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式。 3.解决内联元素间隙的方法     ①去掉内联元素之间的换行。     ②将内联元素的父级设置font-size为0，内联元素自身再设置font-size。 4.内联块元素     内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：     ①支持全部样式。     ②如果没有设置宽高，宽高由内容决定。     ③盒子并在一行。     ④代码换行，盒子会产生间距。     ⑤子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式。 5.display属性     ①none：元素隐藏且不占位置。     ②block：元素以块元素显示。     ③inline：元素以内联元素显示。     ④inline-block：元素以内联块元素显示。 六、浮动 1.文档流     文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 2.浮动特性     ①浮动元素有左浮动(float:left)和右浮动(float:right)两种。     ②浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来。     ③相邻浮动的块元素可以并在一行，超出父级宽度就换行。     ④浮动让行内元素或块元素自动转化为行内块元素。     ⑤浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果。     ⑥父元素内整体浮动的元素无法撑开父元素，需要清除浮动。     ⑦浮动元素之间没有垂直margin的合并。 3.清除浮动     ①父级上增加属性overflow：hidden。     ②在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）。     ③使用成熟的清浮动样式类，clearfix。 .clearfix:after,.clearfix:before{ content: "";display: table;} .clearfix:after{ clear:both;} .clearfix{zoom:1;} 七、定位 1.关于定位     ①relative：生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移。     ②absolute：生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。     ③fixed：生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。     ④static：默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。     ⑤inherit：从父元素继承 position 属性的值。 2.定位元素特性     绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。 3.定位元素层级     定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级。 4.典型定位布局     ①固定在顶部的菜单。     ②水平垂直居中的弹框。     ③固定的侧边的工具栏。     ④固定在底部的按钮。 八、background属性 1.属性解释     ①background-color：设置背景颜色。     ②background-image：设置背景图片地址。     ③background-repeat：设置背景图片如何重复平铺。     ④background-position：设置背景图片的位置。     ⑤background-attachment：设置背景图片是固定还是随着页面滚动条滚动。     实际应用中，可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如： background: #00FF00 url(bgimage.gif) no-repeat left center fixed;