Vue.js学习笔记

前言https://seminelee.github.io/2016/08/18/vue-1/

　　vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库。
　　MV*可能大家都经常听说，我们先来理解一下MV*的概念。

出现的背景

　　MVC开始是存在于桌面程序中的，但由于后端的mvc框架的v层越来越重，后端的MVC思想就搬移到了前端。随着前端代码越来越重，能力越来越大，重前端的系统越来越多地涌现出来。前端为主的MV*时代中，前端在MVC的结构指导下分为model(模型), view(视图)， controller(控制器)三部分。而controller慢慢演化为presenter和viewmodel。MVC, MVP, MVVM框架不断涌现。

MVC, MVP, MVVM

MVC(model-view-controller)，如backbone, angular(较高版本是mvvm, 也许说它是MVW更准确)。
　　View: 与页面上元素直接相关的部分，包括html，CSS和一部分直接控制页面元素的JS。它可以从Model中得到数据，并将其显示到页面上。
　　Model: 与后端的沟通、AJAX请求以及对数据的处理。Model本身不知道谁是View，谁是Controller。它只提供一些方法供View和Controller调用，并且将变更通知给它的观察者。
　　Controller: Model和View的粘合剂。Controller将View方面的请求转发给合适的Model，作为Model的观察者，获取Model的变更,在必要时更新View。
MVP(model-view-presenter)使用此模型的框架不多，现在几乎倒向MVVM。MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
　　Presenter，与Controller一样，接收View的命令，对Model进行操作；与Controller不同的是Presenter会反作用于View，Model的变更通知首先被Presenter获得，然后Presenter再去更新View。
MVVM(model-view-viewmodel)如Vue.js。将Controller改为ViewModel。它与MVP的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在ViewModel。
　　下图来自对MVC、MVP、MVVM的理解，清晰地说明它们之间的区别

Vue.js起步

简单介绍一下

尤雨溪老师写的一个用于创建 web交互界面的库，是一个精简的MVVM，和其他库相比是一个小而美的库
官方文档很清晰，比 Angular 简单易学
采用双向绑定，用解耦的组件组合你的应用程序

　　下图是vue.js官网上的双向绑定的小例子。首先是VM -> V，VM中的data里的message变化，会自动反映在V中的p标签里大括号内的message；V -> VM，V中input里输入的值，会自动反映到VM中的message值。所以，你在输入框中输入的文字会被实时显示成上方的文字。

安装

　　安装步骤vue.js官网上介绍得十分清楚。这里我推荐先安装淘宝镜像，再进行安装Vue.js官方命令行工具，这样会更快。

      
        
        
        
        
       
         
         
         
         # 全局安装 cnpm淘宝镜像
      
        
        
        
        
      
        
        
        
        
         
         
         
         
       $ npm install -g cnpm --registry=https://registry.npm.taobao.org
      
        
        
        
        
      
        
        
        
        
       
         
         
         
         # 全局安装 vue-cli
      
        
        
        
        
      
        
        
        
        
         
         
         
         
       $ cnpm install -g vue-cli
      
        
        
        
        
      
        
        
        
        
       
         
         
         
         # 创建一个基于 "webpack" 模板的新项目
      
        
        
        
        
      
        
        
        
        
         
         
         
         
       $ vue init webpack my-project
      
        
        
        
        
      
        
        
        
        
       
         
         
         
         # 安装依赖，走你
      
        
        
        
        
      
        
        
        
        
         
         
         
         
       $ 
       
         
         
         
         cd my-project
      
        
        
        
        
      
        
        
        
        
         
         
         
         
       $ cnpm install
      
        
        
        
        
      
        
        
        
        
         
         
         
         
       $ npm run dev

一些常用的指令

v-model

用法：在表单控件(、</code>)上创建双向绑定。<br> 　　例子：输入框中初始化文字是”hello vue.js”，而你在输入框中输入的文字会被实时显示成上方的文字。<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">div</span> <span class="attr">id</span>=<span class="string" style="color:rgb(153,204,153)">"app"</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">p</span>></span>{ {newItem}} <span class="tag" style="color:rgb(242,119,122)"></<span class="name">p</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">input</span> <span class="attr">v-model</span>=<span class="string" style="color:rgb(153,204,153)">"newItem"</span>/></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">div</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">new</span> Vue({ </div> <div class="line" style="height:20px"> el: <span class="string" style="color:rgb(153,204,153)">'#app'</span>, </div> <div class="line" style="height:20px"> data: { </div> <div class="line" style="height:20px"> newItem: <span class="string" style="color:rgb(153,204,153)">'hello vue.js.'</span> </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }); </div></pre> </td> </tr> </tbody> </table> <h3 id="v-for" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:20px"> v-for</h3> <p style="margin-top:0px; margin-bottom:25px">　　用法：基于源数据将元素或模板块重复数次，简单来说就是列表渲染。如果之前学过Angular会觉得很相似。<br> 　　例子：会显示列表，列表中有”No.1”、”No.2”。<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">ul</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string" style="color:rgb(153,204,153)">"item in items"</span>></span> </div> <div class="line" style="height:20px"> { {item.label}} </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">li</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">ul</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div> <div class="line" style="height:20px"> 9 </div> <div class="line" style="height:20px"> 10 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">new</span> Vue({ </div> <div class="line" style="height:20px"> el: <span class="string" style="color:rgb(153,204,153)">'#app'</span>, </div> <div class="line" style="height:20px"> data: { </div> <div class="line" style="height:20px"> newItem: <span class="string" style="color:rgb(153,204,153)">'hello vue.js.'</span>, </div> <div class="line" style="height:20px"> items: [ </div> <div class="line" style="height:20px"> {label: <span class="string" style="color:rgb(153,204,153)">"No.1"</span>,isFinished: <span class="literal" style="color:rgb(249,145,87)">false</span>}, </div> <div class="line" style="height:20px"> {label: <span class="string" style="color:rgb(153,204,153)">"No.2"</span>,isFinished: <span class="literal" style="color:rgb(249,145,87)">true</span>} </div> <div class="line" style="height:20px"> ] </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }); </div></pre> </td> </tr> </tbody> </table> <h3 id="v-on" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:20px"> v-on</h3> <p style="margin-top:0px; margin-bottom:25px">　　用法：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符（如.stop、.prevent等）也可以省略。<br> 　　例子：<code style="font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; padding:2px 4px; word-break:break-all; background:rgb(238,238,238)"><li></code>标签上绑定了点击事件，每次点击会改变item的isFinished属性。v-on:click可以缩写成@click。<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">ul</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string" style="color:rgb(153,204,153)">"item in items"</span> <span class="attr">v-on:click</span>=<span class="string" style="color:rgb(153,204,153)">"toggleFinish(item)"</span>></span> </div> <div class="line" style="height:20px"> { {item.label}} </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">li</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">ul</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">new</span> Vue({ </div> <div class="line" style="height:20px"> methods: { </div> <div class="line" style="height:20px"> toggleFinish: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)">item</span>) </span>{ </div> <div class="line" style="height:20px"> item.isFinished = !item.isFinished </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }); </div></pre> </td> </tr> </tbody> </table> <h3 id="v-bind" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:20px"> v-bind</h3> <p style="margin-top:0px; margin-bottom:25px">　　用法：动态地绑定一个或多个 attribute，或一个组件prop到表达式。在绑定 class 或 style 时，支持其它类型的值，如数组或对象；在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。<br> 　　例子：如果<code style="font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; padding:2px 4px; word-break:break-all; background:rgb(238,238,238)"><li></code>的数据item.isFinished是true，<code style="font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; padding:2px 4px; word-break:break-all; background:rgb(238,238,238)"><li></code>的class就是finished，文字颜色就会变成#ccc。v-bind:class可以缩写成:class。<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">ul</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string" style="color:rgb(153,204,153)">"item in items"</span> <span class="attr">v-bind:class</span>=<span class="string" style="color:rgb(153,204,153)">"{finished: item.isFinished}"</span> <span class="attr">v-on:click</span>=<span class="string" style="color:rgb(153,204,153)">"toggleFinish(item)"</span>></span> </div> <div class="line" style="height:20px"> { {item.label}} </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">li</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">ul</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="selector-class">.finished</span> { </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">color</span>: <span class="number" style="color:rgb(153,204,153)">#ccc</span>; </div> <div class="line" style="height:20px"> } </div></pre> </td> </tr> </tbody> </table> <h3 id="父向子组件传参" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:20px"> 父向子组件传参</h3> <p style="margin-top:0px; margin-bottom:25px">　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为html对大小写不敏感，componenta与componentA对于它来说是一样的，不好区分，所以使用小写-小写这种写法）。而子组件componetA中，声明props参数’msgfromfa’之后，就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<code style="font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; padding:2px 4px; word-break:break-all; background:rgb(238,238,238)"><p></code>标签中。<br> App.vue中<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">component-a</span> <span class="attr">msgfromfa</span>=<span class="string" style="color:rgb(153,204,153)">"(Just Say U Love Me)"</span>></span> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">component-a</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">import</span> componentA <span class="keyword" style="color:rgb(204,153,204)">from</span> <span class="string" style="color:rgb(153,204,153)">'./components/componentA'</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">new</span> Vue({ </div> <div class="line" style="height:20px"> components: { </div> <div class="line" style="height:20px"> componentA </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }) </div> <div class="line" style="height:20px"> } </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px">componentA.vue中<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">p</span>></span>{ { msgfromfa }} <span class="tag" style="color:rgb(242,119,122)"></<span class="name">p</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> props: [ <span class="string" style="color:rgb(153,204,153)">'msgfromfa'</span>] </div> <div class="line" style="height:20px"> } </div></pre> </td> </tr> </tbody> </table> <h3 id="父向子组件传参（-broadcast）" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:20px"> 父向子组件传参（.$broadcast）</h3> <p style="margin-top:0px; margin-bottom:25px">　　用法：vm.$broadcast( event, […args] )广播事件，通知给当前实例的全部后代。因为后代有多个枝杈，事件将沿着各“路径”通知。<br> 　　例子：父组件App.vue中<code style="font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; padding:2px 4px; word-break:break-all; background:rgb(238,238,238)"><input></code>绑定了键盘事件，回车触发addNew方法，广播事件”onAddnew”，并传参this.items。子组件componentA中，注册”onAddnew”事件，打印收到的参数items。<br> App.vue中<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">div</span> <span class="attr">id</span>=<span class="string" style="color:rgb(153,204,153)">"app"</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">input</span> <span class="attr">v-model</span>=<span class="string" style="color:rgb(153,204,153)">"newItem"</span> @<span class="attr">keyup.enter</span>=<span class="string" style="color:rgb(153,204,153)">"addNew"</span>/></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">div</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div> <div class="line" style="height:20px"> 9 </div> <div class="line" style="height:20px"> 10 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">import</span> componentA <span class="keyword" style="color:rgb(204,153,204)">from</span> <span class="string" style="color:rgb(153,204,153)">'./components/componentA'</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">new</span> Vue({ </div> <div class="line" style="height:20px"> methods: { </div> <div class="line" style="height:20px"> addNew: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)"></span>) </span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.$broadcast( <span class="string" style="color:rgb(153,204,153)">'onAddnew'</span>, <span class="keyword" style="color:rgb(204,153,204)">this</span>.items) </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }) </div> <div class="line" style="height:20px"> } </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px">componentA.vue中<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">import</span> componentA <span class="keyword" style="color:rgb(204,153,204)">from</span> <span class="string" style="color:rgb(153,204,153)">'./components/componentA'</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> events: { </div> <div class="line" style="height:20px"> <span class="string" style="color:rgb(153,204,153)">'onAddnew'</span>: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)">items</span>)</span>{ </div> <div class="line" style="height:20px"> <span class="built_in" style="color:rgb(249,145,87)">console</span>.log(items) </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <h3 id="子组件向父传参（-emit）" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:20px"> 子组件向父传参（.$emit）</h3> <p style="margin-top:0px; margin-bottom:25px">　　用法：vm.$emit( event, […args] )，触发当前实例上的事件。附加参数都会传给监听器回调。<br> 　　例子：App.vue中component-a绑定了自定义事件”child-say”。子组件componentA中，单击按钮后触发”child-say”事件，并传参msg给父组件。父组件中listenToMyBoy方法把msg赋值给childWords，显示在<code style="font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; padding:2px 4px; word-break:break-all; background:rgb(238,238,238)"><p></code>标签中。<br> App.vue中<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">p</span>></span>Do you like me? { {childWords}} <span class="tag" style="color:rgb(242,119,122)"></<span class="name">p</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">component-a</span> <span class="attr">msgfromfa</span>=<span class="string" style="color:rgb(153,204,153)">"(Just Say U Love Me)"</span> <span class="attr">v-on:child-say</span>=<span class="string" style="color:rgb(153,204,153)">"listenToMyBoy"</span>></span> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">component-a</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div> <div class="line" style="height:20px"> 9 </div> <div class="line" style="height:20px"> 10 </div> <div class="line" style="height:20px"> 11 </div> <div class="line" style="height:20px"> 12 </div> <div class="line" style="height:20px"> 13 </div> <div class="line" style="height:20px"> 14 </div> <div class="line" style="height:20px"> 15 </div> <div class="line" style="height:20px"> 16 </div> <div class="line" style="height:20px"> 17 </div> <div class="line" style="height:20px"> 18 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">import</span> componentA <span class="keyword" style="color:rgb(204,153,204)">from</span> <span class="string" style="color:rgb(153,204,153)">'./components/componentA'</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">new</span> Vue({ </div> <div class="line" style="height:20px"> data: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span> (<span class="params" style="color:rgb(249,145,87)"></span>) </span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">return</span> { </div> <div class="line" style="height:20px"> childWords: <span class="string" style="color:rgb(153,204,153)">""</span> </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> components: { </div> <div class="line" style="height:20px"> componentA </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> methods: { </div> <div class="line" style="height:20px"> listenToMyBoy: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span> (<span class="params" style="color:rgb(249,145,87)">msg</span>)</span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.childWords = msg </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }) </div> <div class="line" style="height:20px"> } </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px">componentA.vue中<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string" style="color:rgb(153,204,153)">"onClickMe"</span>></span>like! <span class="tag" style="color:rgb(242,119,122)"></<span class="name">button</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div> <div class="line" style="height:20px"> 9 </div> <div class="line" style="height:20px"> 10 </div> <div class="line" style="height:20px"> 11 </div> <div class="line" style="height:20px"> 12 </div> <div class="line" style="height:20px"> 13 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">import</span> componentA <span class="keyword" style="color:rgb(204,153,204)">from</span> <span class="string" style="color:rgb(153,204,153)">'./components/componentA'</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> data: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span> (<span class="params" style="color:rgb(249,145,87)"></span>) </span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">return</span> { </div> <div class="line" style="height:20px"> msg: <span class="string" style="color:rgb(153,204,153)">'I like you!'</span> </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> methods: { </div> <div class="line" style="height:20px"> onClickMe: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)"></span>)</span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.$emit( <span class="string" style="color:rgb(153,204,153)">'child-say'</span>, <span class="keyword" style="color:rgb(204,153,204)">this</span>.msg); </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div></pre> </td> </tr> </tbody> </table> <h3 id="子组件向父传参（-dispatch）" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:20px"> 子组件向父传参（.$dispatch）</h3> <p style="margin-top:0px; margin-bottom:25px">　　用法：vm.$dispatch( event, […args] )，派发事件，首先在实例上触发它，然后沿着父链向上冒泡在触发一个监听器后停止。<br> 　　例子：App.vue中events中注册”child-say”事件。子组件componentA中，单击按钮后触发”child-say”事件，并传参msg给父组件。父组件中”child-say”方法把msg赋值给childWords，显示在<code style="font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; padding:2px 4px; word-break:break-all; background:rgb(238,238,238)"><p></code>标签中。<br> App.vue中<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">p</span>></span>Do you like me? { {childWords}} <span class="tag" style="color:rgb(242,119,122)"></<span class="name">p</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">component-a</span> <span class="attr">msgfromfa</span>=<span class="string" style="color:rgb(153,204,153)">"(Just Say U Love Me)"</span>></span> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">component-a</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div> <div class="line" style="height:20px"> 9 </div> <div class="line" style="height:20px"> 10 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">import</span> componentA <span class="keyword" style="color:rgb(204,153,204)">from</span> <span class="string" style="color:rgb(153,204,153)">'./components/componentA'</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">new</span> Vue({ </div> <div class="line" style="height:20px"> events: { </div> <div class="line" style="height:20px"> <span class="string" style="color:rgb(153,204,153)">'child-say'</span> : <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)">msg</span>)</span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.childWords = msg </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }) </div> <div class="line" style="height:20px"> } </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px">componentA.vue中<br> </p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string" style="color:rgb(153,204,153)">"onClickMe"</span>></span>like! <span class="tag" style="color:rgb(242,119,122)"></<span class="name">button</span>></span> </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px"></p> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div> <div class="line" style="height:20px"> 9 </div> <div class="line" style="height:20px"> 10 </div> <div class="line" style="height:20px"> 11 </div> <div class="line" style="height:20px"> 12 </div> <div class="line" style="height:20px"> 13 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">import</span> componentA <span class="keyword" style="color:rgb(204,153,204)">from</span> <span class="string" style="color:rgb(153,204,153)">'./components/componentA'</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> data: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span> (<span class="params" style="color:rgb(249,145,87)"></span>) </span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">return</span> { </div> <div class="line" style="height:20px"> msg: <span class="string" style="color:rgb(153,204,153)">'I like you!'</span> </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> methods: { </div> <div class="line" style="height:20px"> onClickMe: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)"></span>)</span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.$dispatch( <span class="string" style="color:rgb(153,204,153)">'child-say'</span>, <span class="keyword" style="color:rgb(204,153,204)">this</span>.msg); </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px">　　这里只提及了一些指令，更多功能建议在官网上刷一遍API文档。</p> <h2 id="做一个todolist" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:22px"> 做一个todolist</h2> <p style="margin-top:0px; margin-bottom:25px">　　用以上的指令写一个简单的demo。实现添加事情，删除事情，点击事情表示事情已完成，点赞等功能。代码思路源自慕课网教程，我作了一些修改。<br> 　　详细代码如下：</p> <h3 id="src-App-vue" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:20px"> src/App.vue</h3> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div> <div class="line" style="height:20px"> 9 </div> <div class="line" style="height:20px"> 10 </div> <div class="line" style="height:20px"> 11 </div> <div class="line" style="height:20px"> 12 </div> <div class="line" style="height:20px"> 13 </div> <div class="line" style="height:20px"> 14 </div> <div class="line" style="height:20px"> 15 </div> <div class="line" style="height:20px"> 16 </div> <div class="line" style="height:20px"> 17 </div> <div class="line" style="height:20px"> 18 </div> <div class="line" style="height:20px"> 19 </div> <div class="line" style="height:20px"> 20 </div> <div class="line" style="height:20px"> 21 </div> <div class="line" style="height:20px"> 22 </div> <div class="line" style="height:20px"> 23 </div> <div class="line" style="height:20px"> 24 </div> <div class="line" style="height:20px"> 25 </div> <div class="line" style="height:20px"> 26 </div> <div class="line" style="height:20px"> 27 </div> <div class="line" style="height:20px"> 28 </div> <div class="line" style="height:20px"> 29 </div> <div class="line" style="height:20px"> 30 </div> <div class="line" style="height:20px"> 31 </div> <div class="line" style="height:20px"> 32 </div> <div class="line" style="height:20px"> 33 </div> <div class="line" style="height:20px"> 34 </div> <div class="line" style="height:20px"> 35 </div> <div class="line" style="height:20px"> 36 </div> <div class="line" style="height:20px"> 37 </div> <div class="line" style="height:20px"> 38 </div> <div class="line" style="height:20px"> 39 </div> <div class="line" style="height:20px"> 40 </div> <div class="line" style="height:20px"> 41 </div> <div class="line" style="height:20px"> 42 </div> <div class="line" style="height:20px"> 43 </div> <div class="line" style="height:20px"> 44 </div> <div class="line" style="height:20px"> 45 </div> <div class="line" style="height:20px"> 46 </div> <div class="line" style="height:20px"> 47 </div> <div class="line" style="height:20px"> 48 </div> <div class="line" style="height:20px"> 49 </div> <div class="line" style="height:20px"> 50 </div> <div class="line" style="height:20px"> 51 </div> <div class="line" style="height:20px"> 52 </div> <div class="line" style="height:20px"> 53 </div> <div class="line" style="height:20px"> 54 </div> <div class="line" style="height:20px"> 55 </div> <div class="line" style="height:20px"> 56 </div> <div class="line" style="height:20px"> 57 </div> <div class="line" style="height:20px"> 58 </div> <div class="line" style="height:20px"> 59 </div> <div class="line" style="height:20px"> 60 </div> <div class="line" style="height:20px"> 61 </div> <div class="line" style="height:20px"> 62 </div> <div class="line" style="height:20px"> 63 </div> <div class="line" style="height:20px"> 64 </div> <div class="line" style="height:20px"> 65 </div> <div class="line" style="height:20px"> 66 </div> <div class="line" style="height:20px"> 67 </div> <div class="line" style="height:20px"> 68 </div> <div class="line" style="height:20px"> 69 </div> <div class="line" style="height:20px"> 70 </div> <div class="line" style="height:20px"> 71 </div> <div class="line" style="height:20px"> 72 </div> <div class="line" style="height:20px"> 73 </div> <div class="line" style="height:20px"> 74 </div> <div class="line" style="height:20px"> 75 </div> <div class="line" style="height:20px"> 76 </div> <div class="line" style="height:20px"> 77 </div> <div class="line" style="height:20px"> 78 </div> <div class="line" style="height:20px"> 79 </div> <div class="line" style="height:20px"> 80 </div> <div class="line" style="height:20px"> 81 </div> <div class="line" style="height:20px"> 82 </div> <div class="line" style="height:20px"> 83 </div> <div class="line" style="height:20px"> 84 </div> <div class="line" style="height:20px"> 85 </div> <div class="line" style="height:20px"> 86 </div> <div class="line" style="height:20px"> 87 </div> <div class="line" style="height:20px"> 88 </div> <div class="line" style="height:20px"> 89 </div> <div class="line" style="height:20px"> 90 </div> <div class="line" style="height:20px"> 91 </div> <div class="line" style="height:20px"> 92 </div> <div class="line" style="height:20px"> 93 </div> <div class="line" style="height:20px"> 94 </div> <div class="line" style="height:20px"> 95 </div> <div class="line" style="height:20px"> 96 </div> <div class="line" style="height:20px"> 97 </div> <div class="line" style="height:20px"> 98 </div> <div class="line" style="height:20px"> 99 </div> <div class="line" style="height:20px"> 100 </div> <div class="line" style="height:20px"> 101 </div> <div class="line" style="height:20px"> 102 </div> <div class="line" style="height:20px"> 103 </div> <div class="line" style="height:20px"> 104 </div> <div class="line" style="height:20px"> 105 </div> <div class="line" style="height:20px"> 106 </div> <div class="line" style="height:20px"> 107 </div> <div class="line" style="height:20px"> 108 </div> <div class="line" style="height:20px"> 109 </div> <div class="line" style="height:20px"> 110 </div> <div class="line" style="height:20px"> 111 </div> <div class="line" style="height:20px"> 112 </div> <div class="line" style="height:20px"> 113 </div> <div class="line" style="height:20px"> 114 </div> <div class="line" style="height:20px"> 115 </div> <div class="line" style="height:20px"> 116 </div> <div class="line" style="height:20px"> 117 </div> <div class="line" style="height:20px"> 118 </div> <div class="line" style="height:20px"> 119 </div> <div class="line" style="height:20px"> 120 </div> <div class="line" style="height:20px"> 121 </div> <div class="line" style="height:20px"> 122 </div> <div class="line" style="height:20px"> 123 </div> <div class="line" style="height:20px"> 124 </div> <div class="line" style="height:20px"> 125 </div> <div class="line" style="height:20px"> 126 </div> <div class="line" style="height:20px"> 127 </div> <div class="line" style="height:20px"> 128 </div> <div class="line" style="height:20px"> 129 </div> <div class="line" style="height:20px"> 130 </div> <div class="line" style="height:20px"> 131 </div> <div class="line" style="height:20px"> 132 </div> <div class="line" style="height:20px"> 133 </div> <div class="line" style="height:20px"> 134 </div> <div class="line" style="height:20px"> 135 </div> <div class="line" style="height:20px"> 136 </div> <div class="line" style="height:20px"> 137 </div> <div class="line" style="height:20px"> 138 </div> <div class="line" style="height:20px"> 139 </div> <div class="line" style="height:20px"> 140 </div> <div class="line" style="height:20px"> 141 </div> <div class="line" style="height:20px"> 142 </div> <div class="line" style="height:20px"> 143 </div> <div class="line" style="height:20px"> 144 </div> <div class="line" style="height:20px"> 145 </div> <div class="line" style="height:20px"> 146 </div> <div class="line" style="height:20px"> 147 </div> <div class="line" style="height:20px"> 148 </div> <div class="line" style="height:20px"> 149 </div> <div class="line" style="height:20px"> 150 </div> <div class="line" style="height:20px"> 151 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">template</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">div</span> <span class="attr">id</span>=<span class="string" style="color:rgb(153,204,153)">"app"</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">h1</span> <span class="attr">v-text</span>=<span class="string" style="color:rgb(153,204,153)">"title"</span>></span> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">h1</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">input</span> <span class="attr">v-model</span>=<span class="string" style="color:rgb(153,204,153)">"newItem"</span> @<span class="attr">keyup.enter</span>=<span class="string" style="color:rgb(153,204,153)">"addNew"</span>/></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">ul</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">li</span> <span class="attr">v-for</span>=<span class="string" style="color:rgb(153,204,153)">"item in items"</span> <span class="attr">v-bind:class</span>=<span class="string" style="color:rgb(153,204,153)">"{finished: item.isFinished}"</span> <span class="attr">v-on:click</span>=<span class="string" style="color:rgb(153,204,153)">"toggleFinish(item)"</span>></span> </div> <div class="line" style="height:20px"> ❤ { {item.label}} </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">span</span> <span class="attr">v-on:click</span>=<span class="string" style="color:rgb(153,204,153)">"deleteThis(item)"</span>></span>delete <span class="tag" style="color:rgb(242,119,122)"></<span class="name">span</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">hr</span>/></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">li</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">ul</span>></span> </div> <div class="line" style="height:20px"> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">p</span>></span>Do you like me? { {childWords}} <span class="tag" style="color:rgb(242,119,122)"></<span class="name">p</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">component-a</span> <span class="attr">msgfromfa</span>=<span class="string" style="color:rgb(153,204,153)">"(Just Say U Love Me)"</span>></span> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">component-a</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">div</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">template</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">script</span>></span> <span class="javascript"></span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">import</span> Store <span class="keyword" style="color:rgb(204,153,204)">from</span> <span class="string" style="color:rgb(153,204,153)">'./store'</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">import</span> componentA <span class="keyword" style="color:rgb(204,153,204)">from</span> <span class="string" style="color:rgb(153,204,153)">'./components/componentA'</span> </div> <div class="line" style="height:20px"> <span class="comment" style="color:rgb(153,153,153)">//相当于module.export</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> <span class="comment" style="color:rgb(153,153,153)">/*function data(){ </span> </div> <div class="line" style="height:20px"> return... </div> <div class="line" style="height:20px"> }*/ </div> <div class="line" style="height:20px"> <span class="comment" style="color:rgb(153,153,153)">/*相当于var vue = new vue({data: function(){}})*/</span> </div> <div class="line" style="height:20px"> data () { </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">return</span> { </div> <div class="line" style="height:20px"> title: <span class="string" style="color:rgb(153,204,153)">'TODO LIST'</span>, </div> <div class="line" style="height:20px"> items: Store.fetch() || [], </div> <div class="line" style="height:20px"> newItem: <span class="string" style="color:rgb(153,204,153)">''</span>, </div> <div class="line" style="height:20px"> childWords: <span class="string" style="color:rgb(153,204,153)">''</span> </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> components: { </div> <div class="line" style="height:20px"> componentA </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> watch: { </div> <div class="line" style="height:20px"> items: { </div> <div class="line" style="height:20px"> handler: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)">items</span>)</span>{ </div> <div class="line" style="height:20px"> Store.save(items) </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> deep: <span class="literal" style="color:rgb(249,145,87)">true</span> </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> events: { </div> <div class="line" style="height:20px"> <span class="string" style="color:rgb(153,204,153)">'child-say'</span> : <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)">msg</span>)</span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.childWords = msg </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> methods: { </div> <div class="line" style="height:20px"> toggleFinish: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)">item</span>) </span>{ </div> <div class="line" style="height:20px"> item.isFinished = !item.isFinished </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> addNew: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)"></span>) </span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.items.push({ </div> <div class="line" style="height:20px"> label: <span class="keyword" style="color:rgb(204,153,204)">this</span>.newItem, </div> <div class="line" style="height:20px"> isFinished: <span class="literal" style="color:rgb(249,145,87)">false</span> </div> <div class="line" style="height:20px"> }) </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.newItem = <span class="string" style="color:rgb(153,204,153)">''</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.$broadcast( <span class="string" style="color:rgb(153,204,153)">'onAddnew'</span>, <span class="keyword" style="color:rgb(204,153,204)">this</span>.items) </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> listenToMyBoy: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span> (<span class="params" style="color:rgb(249,145,87)">msg</span>)</span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.childWords = msg </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> deleteThis: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)">item</span>) </span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.items.splice( <span class="keyword" style="color:rgb(204,153,204)">this</span>.items.indexOf(item), <span class="number" style="color:rgb(153,204,153)">1</span>) </div> <div class="line" style="height:20px"> Store.save( <span class="keyword" style="color:rgb(204,153,204)">this</span>.items) </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">script</span>></span> </div> <div class="line" style="height:20px"></div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">style</span>></span> <span class="undefined"></span> </div> <div class="line" style="height:20px"> *{ </div> <div class="line" style="height:20px"> margin: 0; </div> <div class="line" style="height:20px"> padding: 0; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> html { </div> <div class="line" style="height:20px"> height: 100%; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"></div> <div class="line" style="height:20px"> body { </div> <div class="line" style="height:20px"> display: flex; </div> <div class="line" style="height:20px"> align-items: center; </div> <div class="line" style="height:20px"> justify-content: center; </div> <div class="line" style="height:20px"> height: 100%; </div> <div class="line" style="height:20px"> width: 100%; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"></div> <div class="line" style="height:20px"> #app { </div> <div class="line" style="height:20px"> color: #2c3e50; </div> <div class="line" style="height:20px"> font-family: Source Sans Pro, Helvetica, sans-serif; </div> <div class="line" style="height:20px"> text-align: center; </div> <div class="line" style="height:20px"> width: 60%; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"></div> <div class="line" style="height:20px"> #app a { </div> <div class="line" style="height:20px"> color: #42b983; </div> <div class="line" style="height:20px"> text-decoration: none; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> #app h1:nth-child(1) { </div> <div class="line" style="height:20px"> line-height: 3; </div> <div class="line" style="height:20px"> position: absolute; </div> <div class="line" style="height:20px"> top: 10%; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> #app input { </div> <div class="line" style="height:20px"> width: 60%; </div> <div class="line" style="height:20px"> line-height: 24px; </div> <div class="line" style="height:20px"> font-size: 24px; </div> <div class="line" style="height:20px"> position: absolute; </div> <div class="line" style="height:20px"> top: 25%; left: 20%; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"></div> <div class="line" style="height:20px"> ul { </div> <div class="line" style="height:20px"> position: absolute; </div> <div class="line" style="height:20px"> top: 35%; </div> <div class="line" style="height:20px"> text-align: left; </div> <div class="line" style="height:20px"> width: 60%; </div> <div class="line" style="height:20px"> height: 45%; </div> <div class="line" style="height:20px"> overflow: auto; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"></div> <div class="line" style="height:20px"> ul li { </div> <div class="line" style="height:20px"> list-style: none; </div> <div class="line" style="height:20px"> line-height: 2; </div> <div class="line" style="height:20px"> font-size: 24px; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> span { </div> <div class="line" style="height:20px"> font-size: 16px; </div> <div class="line" style="height:20px"> color: #fff; </div> <div class="line" style="height:20px"> padding: 2px 5px; </div> <div class="line" style="height:20px"> text-align: right; </div> <div class="line" style="height:20px"> background-color: red; </div> <div class="line" style="height:20px"> border-radius: 5px; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> .logo { </div> <div class="line" style="height:20px"> width: 100px; </div> <div class="line" style="height:20px"> height: 100px </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> .finished { </div> <div class="line" style="height:20px"> color: #ccc; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> hr { </div> <div class="line" style="height:20px"> ;border-top:1px dashed #ccc; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> p { </div> <div class="line" style="height:20px"> text-align: left; </div> <div class="line" style="height:20px"> position: absolute; </div> <div class="line" style="height:20px"> bottom: 10%; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">style</span>></span> </div></pre> </td> </tr> </tbody> </table> <h3 id="src-components-componentA-vue" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:20px"> src/components/componentA.vue</h3> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div> <div class="line" style="height:20px"> 9 </div> <div class="line" style="height:20px"> 10 </div> <div class="line" style="height:20px"> 11 </div> <div class="line" style="height:20px"> 12 </div> <div class="line" style="height:20px"> 13 </div> <div class="line" style="height:20px"> 14 </div> <div class="line" style="height:20px"> 15 </div> <div class="line" style="height:20px"> 16 </div> <div class="line" style="height:20px"> 17 </div> <div class="line" style="height:20px"> 18 </div> <div class="line" style="height:20px"> 19 </div> <div class="line" style="height:20px"> 20 </div> <div class="line" style="height:20px"> 21 </div> <div class="line" style="height:20px"> 22 </div> <div class="line" style="height:20px"> 23 </div> <div class="line" style="height:20px"> 24 </div> <div class="line" style="height:20px"> 25 </div> <div class="line" style="height:20px"> 26 </div> <div class="line" style="height:20px"> 27 </div> <div class="line" style="height:20px"> 28 </div> <div class="line" style="height:20px"> 29 </div> <div class="line" style="height:20px"> 30 </div> <div class="line" style="height:20px"> 31 </div> <div class="line" style="height:20px"> 32 </div> <div class="line" style="height:20px"> 33 </div> <div class="line" style="height:20px"> 34 </div> <div class="line" style="height:20px"> 35 </div> <div class="line" style="height:20px"> 36 </div> <div class="line" style="height:20px"> 37 </div> <div class="line" style="height:20px"> 38 </div> <div class="line" style="height:20px"> 39 </div> <div class="line" style="height:20px"> 40 </div> <div class="line" style="height:20px"> 41 </div> <div class="line" style="height:20px"> 42 </div> <div class="line" style="height:20px"> 43 </div> <div class="line" style="height:20px"> 44 </div> <div class="line" style="height:20px"> 45 </div> <div class="line" style="height:20px"> 46 </div> <div class="line" style="height:20px"> 47 </div> <div class="line" style="height:20px"> 48 </div> <div class="line" style="height:20px"> 49 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">template</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">div</span> <span class="attr">class</span>=<span class="string" style="color:rgb(153,204,153)">"hello"</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">p</span>></span>{ { msgfromfa }} <span class="tag" style="color:rgb(242,119,122)"></<span class="name">p</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string" style="color:rgb(153,204,153)">"onClickMe"</span>></span>like! <span class="tag" style="color:rgb(242,119,122)"></<span class="name">button</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">div</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">template</span>></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">script</span>></span> <span class="javascript"></span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> data: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span> (<span class="params" style="color:rgb(249,145,87)"></span>) </span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">return</span> { </div> <div class="line" style="height:20px"> msg: <span class="string" style="color:rgb(153,204,153)">'I like you!'</span> </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> props: [ <span class="string" style="color:rgb(153,204,153)">'msgfromfa'</span>], </div> <div class="line" style="height:20px"> events: { </div> <div class="line" style="height:20px"> <span class="string" style="color:rgb(153,204,153)">'onAddnew'</span>: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)">items</span>)</span>{ </div> <div class="line" style="height:20px"> <span class="built_in" style="color:rgb(249,145,87)">console</span>.log(items) </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> methods: { </div> <div class="line" style="height:20px"> onClickMe: <span class="function" style="color:rgb(102,153,204)"><span class="keyword" style="color:rgb(204,153,204)">function</span>(<span class="params" style="color:rgb(249,145,87)"></span>)</span>{ </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">this</span>.$dispatch( <span class="string" style="color:rgb(153,204,153)">'child-say'</span>, <span class="keyword" style="color:rgb(204,153,204)">this</span>.msg); </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">script</span>></span> </div> <div class="line" style="height:20px"></div> <div class="line" style="height:20px"> <span class="comment" style="color:rgb(153,153,153)"></span> </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"><<span class="name">style</span> <span class="attr">scoped</span>></span> <span class="css"></span> </div> <div class="line" style="height:20px"> <span class="selector-tag">h1</span> { </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">color</span>: <span class="number" style="color:rgb(153,204,153)">#42b983</span>; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> <span class="selector-tag">button</span> { </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">position</span>: absolute; </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">bottom</span>: <span class="number" style="color:rgb(153,204,153)">10%</span>; </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">right</span>: <span class="number" style="color:rgb(153,204,153)">20%</span>; </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">width</span>: <span class="number" style="color:rgb(153,204,153)">100px</span>; </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">background-color</span>: green; </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">font-size</span>: <span class="number" style="color:rgb(153,204,153)">16px</span>; </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">color</span>: <span class="number" style="color:rgb(153,204,153)">#fff</span>; </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">padding</span>: <span class="number" style="color:rgb(153,204,153)">2px</span> <span class="number" style="color:rgb(153,204,153)">5px</span>; </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">border</span>: none; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> <span class="selector-class">.hello</span> <span class="selector-tag">p</span> { </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">bottom</span>: <span class="number" style="color:rgb(153,204,153)">5%</span>; </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">font-size</span>: <span class="number" style="color:rgb(153,204,153)">12px</span>; </div> <div class="line" style="height:20px"> <span class="attribute" style="color:rgb(242,119,122)">color</span>: green; </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> <span class="tag" style="color:rgb(242,119,122)"></<span class="name">style</span>></span> </div></pre> </td> </tr> </tbody> </table> <h3 id="src-store-js" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:20px"> src/store.js</h3> <table style="border-collapse:collapse; border-spacing:0px; margin:0px; width:auto; border:none; font-size:14px; table-layout:fixed"> <tbody> <tr style="background-color:rgb(249,249,249)"> <td class="gutter" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px 20px 1px 1px; color:rgb(102,102,102); line-height:1.6; border:none; text-align:right; background:rgb(45,45,45)"> <div class="line" style="height:20px"> 1 </div> <div class="line" style="height:20px"> 2 </div> <div class="line" style="height:20px"> 3 </div> <div class="line" style="height:20px"> 4 </div> <div class="line" style="height:20px"> 5 </div> <div class="line" style="height:20px"> 6 </div> <div class="line" style="height:20px"> 7 </div> <div class="line" style="height:20px"> 8 </div> <div class="line" style="height:20px"> 9 </div></pre> </td> <td class="code" style="padding:0px; vertical-align:middle; border:none"> <pre style="overflow:auto; font-family:consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace; font-size:13px; margin-top:0px; margin-bottom:0px; padding:1px; color:rgb(204,204,204); line-height:1.6; border:none; background:rgb(45,45,45)"> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">const</span> STORAGE_KEY = <span class="string" style="color:rgb(153,204,153)">'todos-vuejs'</span> <span class="comment" style="color:rgb(153,153,153)">//es6语法 const定义一个常量</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">export</span> <span class="keyword" style="color:rgb(204,153,204)">default</span> { </div> <div class="line" style="height:20px"> fetch () { <span class="comment" style="color:rgb(153,153,153)">//es6语法相当于 fetch:function(){}</span> </div> <div class="line" style="height:20px"> <span class="keyword" style="color:rgb(204,153,204)">return</span> <span class="built_in" style="color:rgb(249,145,87)">JSON</span>.parse( <span class="built_in" style="color:rgb(249,145,87)">window</span>.localStorage.getItem(STORAGE_KEY) || <span class="string" style="color:rgb(153,204,153)">'[]'</span>) </div> <div class="line" style="height:20px"> }, </div> <div class="line" style="height:20px"> save (items) { </div> <div class="line" style="height:20px"> <span class="built_in" style="color:rgb(249,145,87)">window</span>.localStorage.setItem(STORAGE_KEY, <span class="built_in" style="color:rgb(249,145,87)">JSON</span>.stringify(items)) </div> <div class="line" style="height:20px"> } </div> <div class="line" style="height:20px"> } </div></pre> </td> </tr> </tbody> </table> <p style="margin-top:0px; margin-bottom:25px">　　完成后如下图：<br> <a href="http://img.e-com-net.com/image/info8/ea53016150034b2e8d96fbd6aed12c88.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ea53016150034b2e8d96fbd6aed12c88.jpg" alt="Vue.js学习笔记_第4张图片" style="border:1px solid rgb(221,221,221); display:block!important; margin:0px; max-width:100%; height:auto; padding:3px;border:1px solid black;" width="650" height="294"></a></p> <h2 id="参考" style="margin:20px 0px 10px; padding:10px 0px 0px; line-height:1.5; font-size:22px"> 参考</h2> <ul style="list-style:none"> <li style="list-style:circle">vuejs入门基础（慕课网视频）</li> <li style="list-style:circle">Vue.js 快速入门</li> <li style="list-style:circle">谈谈MVC模式</li> <li style="list-style:circle">大前端技术分享</li> <li style="list-style:circle">对MVC、MVP、MVVM的理解</li> </ul> </div> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1384479395267301376"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(【Vue点滴知识,】)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835511542284644352.htm" title="学点心理知识，呵护孩子健康" target="_blank">学点心理知识，呵护孩子健康</a> <span class="text-muted">静候花开_7090</span> <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div> </li> <li><a href="/article/1835511163450912768.htm" title="2021年12月19日，春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日，春蕾教育集团团建活动感受——黄晓丹</a> <span class="text-muted">黄错错加油</span> <div>感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们</div> </li> <li><a href="/article/1835498219489030144.htm" title="高端密码学院笔记285" target="_blank">高端密码学院笔记285</a> <span class="text-muted">柚子_b4b4</span> <div>高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要</div> </li> <li><a href="/article/1835497710975807488.htm" title="从0到500+，我是如何利用自媒体赚钱？" target="_blank">从0到500+，我是如何利用自媒体赚钱？</a> <span class="text-muted">一列脚印</span> <div>运营公众号半个多月，从零基础的小白到现在慢慢懂了一些运营的知识。做好公众号是很不容易的，要做很多事情；排版、码字、引流…通通需要自己解决，业余时间全都花费在这上面涨这么多粉丝是真的不容易，对比知乎大佬来说，我们这种没资源，没人脉，还没钱的小透明来说，想要一个月涨粉上万，怕是今天没睡醒（不过你有的方法，算我piapia打脸）至少我是清醒的，自己慢慢努力，实现我的万粉目标！大家快来围观、支持我吧！孩子</div> </li> <li><a href="/article/1835497283932745728.htm" title="利用LangChain的StackExchange组件实现智能问答系统" target="_blank">利用LangChain的StackExchange组件实现智能问答系统</a> <span class="text-muted">nseejrukjhad</span> <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495644123459584.htm" title="Day1笔记-Python简介&标识符和关键字&输入输出" target="_blank">Day1笔记-Python简介&标识符和关键字&输入输出</a> <span class="text-muted">~在杰难逃~</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程</div> </li> <li><a href="/article/1835493269233037312.htm" title="走向以教育叙事为载体的教育叙事研究" target="_blank">走向以教育叙事为载体的教育叙事研究</a> <span class="text-muted">666小飞鱼</span> <div>今天我读了吴松超老师的《给教师的68条建写作建议》中的第23条《如何通过教育叙事走向研究》，吴老师在文中与我们分享了一个德育案例，这是一个反面的案例，意在告知我们在处理问题时，不能就考虑的点太窄，思考要全面。走向教育叙事研究，教师要有敏锐的“感知力”，这个感知力来自于背后专业知识的支撑，思维能力以及广阔的视野和见识等。所以对于同一件事处理方法不同，这个就是教师背后“敏锐力”的不同造成的，也就是说是</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835491101276991488.htm" title="数据仓库——维度表一致性" target="_blank">数据仓库——维度表一致性</a> <span class="text-muted">墨染丶eye</span> <a class="tag" taget="_blank" href="/search/%E8%83%8C%E8%AF%B5/1.htm">背诵</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a> <div>数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计</div> </li> <li><a href="/article/1835490839837634560.htm" title="自我意识" target="_blank">自我意识</a> <span class="text-muted">徐立华</span> <div>----读帕克.帕尔默《教学勇气》（P18----19）5.铸造我们的学科帕克.帕尔默说学科知识对我们的自身认同和外部世界有启发意义。学科会铸造我们。“在我们与学科的命题概念和学科的生活框架相遇之前，自我意识知识处于潜伏状态，通过回想学科是怎样唤醒自我意识，我们就可以找回教学心灵。”《教学勇气》（P18）我们的自我意识像冰山表面下无限延伸的冰层，常常处于潜伏状态。但是在我们对所教授的学科进行深入思</div> </li> <li><a href="/article/1835489587498151936.htm" title="ARM驱动学习之基础小知识" target="_blank">ARM驱动学习之基础小知识</a> <span class="text-muted">JT灬新一</span> <a class="tag" taget="_blank" href="/search/ARM/1.htm">ARM</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板</div> </li> <li><a href="/article/1835489588169240576.htm" title="ARM驱动学习之5 LEDS驱动" target="_blank">ARM驱动学习之5 LEDS驱动</a> <span class="text-muted">JT灬新一</span> <a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a><a class="tag" taget="_blank" href="/search/C/1.htm">C</a><a class="tag" taget="_blank" href="/search/%E5%BA%95%E5%B1%82/1.htm">底层</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a> <div>ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三</div> </li> <li><a href="/article/1835489208152715264.htm" title="Rust基础知识" target="_blank">Rust基础知识</a> <span class="text-muted">GRKF15</span> <a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>1.Rust语言简介1.1基础语法变量声明：let关键字用于声明变量，可以指定或不指定类型，如leta=10;和letmutc=30i32;。函数定义：使用fn关键字定义函数，并指定参数类型及返回类型，如fnadd(i:i32,j:i32)->i32{i+j}。控制流：包括if、else等，控制语句后需要使用;来结束语句。1.2数据类型整数类型：i8、i16、i32、i64、i128，以及无符号的</div> </li> <li><a href="/article/1835488955101966336.htm" title="C++菜鸟教程 - 从入门到精通第二节" target="_blank">C++菜鸟教程 - 从入门到精通第二节</a> <span class="text-muted">DreamByte</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>一.上节课的补充(数据类型)1.前言继上节课,我们主要讲解了输入,输出和运算符,我们现在来补充一下数据类型的知识上节课遗漏了这个知识点,非常的抱歉顺便说一下,博主要上高中了,更新会慢,2-4周更新一次对了,正好赶上中秋节,小编跟大家说一句:中秋节快乐!2.int类型上节课,我们其实只用了int类型int类型,是整数类型,它们存贮的是整数,不能存小数(浮点数)定义变量的方式很简单inta;//定义一</div> </li> <li><a href="/article/1835485681187647488.htm" title="【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面" target="_blank">【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面</a> <span class="text-muted">一个射手座的程序媛</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获</div> </li> <li><a href="/article/1835483474883080192.htm" title="学习“论语”-第59天" target="_blank">学习“论语”-第59天</a> <span class="text-muted">春峰轩</span> <div>12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯</div> </li> <li><a href="/article/1835483159630802944.htm" title="nosql数据库技术与应用知识点" target="_blank">nosql数据库技术与应用知识点</a> <span class="text-muted">皆过客，揽星河</span> <a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a><a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%9D%9E%E5%85%B3%E7%B3%BB%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">非关系型数据库</a> <div>Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)</div> </li> <li><a href="/article/1835482712144703488.htm" title="广州会刊小程序开发公司哪家好｜开发多少钱费用｜专业外包服务" target="_blank">广州会刊小程序开发公司哪家好｜开发多少钱费用｜专业外包服务</a> <span class="text-muted">红匣子实力推荐</span> <div>在选择广州会刊小程序开发公司时，有几个关键因素需要考虑。首先，您应该确定自己的需求和目标，以便找到最合适的开发公司。其次，您需要考虑公司的经验和专业知识。最后，您还应该考虑公司的信誉和口碑。开发-联系电话：13642679953（微信同号）首先，您应该明确自己的需求和目标。会刊小程序是一种用于展示会议信息和日程安排的应用程序。在选择开发公司之前，您应该明确自己的需求，包括功能要求、设计风格和用户体</div> </li> <li><a href="/article/1835482583782223872.htm" title="读《人间鲁迅》有感" target="_blank">读《人间鲁迅》有感</a> <span class="text-muted">琳语读书</span> <div>上周读完《闻一多传》后，我对中国近代知识分子产生了兴趣，这周继续读了《人间鲁迅》。厚厚的两本书，记录了一个人的一生，苦痛，彷徨和挣扎，虽然只读了一小部分，却也心潮澎湃。闻一多和鲁迅是完全不同的。鲁迅是沉郁的，现实的，寂寞的，抗争的。除了天生性格的不同外，环境的塑造也是非常之大。鲁迅少年经历了家庭的变故，看尽了人间冷暖，世态炎凉。这种经历促使他很早就观察思考人生，立志用文学来改变中国国民的劣根。闻一</div> </li> <li><a href="/article/1835479758515826688.htm" title="OPENAIGC开发者大赛企业组AI黑马奖 | AIGC数智传媒解决方案" target="_blank">OPENAIGC开发者大赛企业组AI黑马奖 | AIGC数智传媒解决方案</a> <span class="text-muted">RPA中国</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/AIGC/1.htm">AIGC</a><a class="tag" taget="_blank" href="/search/%E4%BC%A0%E5%AA%92/1.htm">传媒</a> <div>在第二届拯救者杯OPENAIGC开发者大赛中，涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到，我们特意开设了优秀作品报道专栏，旨在展示其独特之处和开发者的精彩故事。无论您是技术专家还是爱好者，希望能带给您不一样的知识和启发。让我们一起探索AIGC的无限可能，见证科技与创意的完美融合！创未来AI应用赛-企业组AI黑马奖作品名称：AIGC数智传媒解决方案参赛团队：深圳市三象智能技术</div> </li> <li><a href="/article/1835476224198144000.htm" title="2022-08-28" target="_blank">2022-08-28</a> <span class="text-muted">蔚蓝一片晴</span> <div>初三暑假培训收获点滴从8月25至8月27日三天两晚的培训结束了，回到家中，该静下心来整理一下触动心灵的收获，成为成长的积淀。1.在优秀团队中快速成长与提升，做一名反思成长型教师一名专业型教师的教学指导包括了教学原理知识、案例知识、策略知识。面对教学中的遇到的有趣的情形、问题会去研究其理，寻找更好的教法学法对策。从新手到成熟型教师，再走向专业型教师，需要的是觉醒与反思，多进行案例研究，从案例中观察、</div> </li> <li><a href="/article/1835474315991150592.htm" title="2021-07-31" target="_blank">2021-07-31</a> <span class="text-muted">比峰</span> <div>七月的最后一天，过了今天，就是八月，心脏在颤抖……昨天两点半才睡，一直在以两倍的语速的听之前的课程，虽然隔得时间不长，但是很多知识点已经忘了差不多了，为了让自己能够掌握的稍微全面一点，还是磨刀不误砍柴工的比较好。正因为晚上睡得晚，今天一上午的状态都不好，也可能因为上午都是待在家里，所以多数时间自己是在补觉。既然太累，那就睡觉吧，总比浪费时间的好。下午到咖啡馆做题，一道差错更正一下子让自己的实力暴露</div> </li> <li><a href="/article/1835471059135066112.htm" title="你可能遗漏的一些C#/.NET/.NET Core知识点" target="_blank">你可能遗漏的一些C#/.NET/.NET Core知识点</a> <span class="text-muted">追逐时光者</span> <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/.NET/1.htm">.NET</a><a class="tag" taget="_blank" href="/search/DotNetGuide%E7%BC%96%E7%A8%8B%E6%8C%87%E5%8D%97/1.htm">DotNetGuide编程指南</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/.netcore/1.htm">.netcore</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D</div> </li> <li><a href="/article/1835465006758588416.htm" title="2023-08-08" target="_blank">2023-08-08</a> <span class="text-muted">2023梦启支教团张牧泽</span> <div>学汉字历史，行传统书法——中国矿业大学梦启支教团梦启三班开展书法文化课7月20日上午8时，中国矿业大学梦启支教团在贵州省金沙县西洛街道彩虹小学开展了“书法文化”课程。该课程意在向孩子们传授汉字演变的相关知识，围绕书法发展历史讲解不同时期的字形字体特点。此课程由梦启支教团成员王耀民讲授，梦启三班全体成员参加。中国文字的发展有数千年的历史，从早期雏形的象形文字到殷商时期的甲骨文、金文，再到西周、秦朝的</div> </li> <li><a href="/article/1835453535777550336.htm" title="vue3中el-table中点击图片放大时，被表格覆盖" target="_blank">vue3中el-table中点击图片放大时，被表格覆盖</a> <span class="text-muted">叫我小鹏呀</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported</div> </li> <li><a href="/article/1835452528599330816.htm" title="vue项目element-ui的table表格单元格合并" target="_blank">vue项目element-ui的table表格单元格合并</a> <span class="text-muted">酋长哈哈</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'</div> </li> <li><a href="/article/1835451016456269824.htm" title="MongoDB知识概括" target="_blank">MongoDB知识概括</a> <span class="text-muted">GeorgeLin98</span> <a class="tag" taget="_blank" href="/search/%E6%8C%81%E4%B9%85%E5%B1%82/1.htm">持久层</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数</div> </li> <li><a href="/article/45.htm" title="安装数据库首次应用" target="_blank">安装数据库首次应用</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>可是为什么再一次失败之后就变成直接跳过那个要求 enter full pathname of java.exe的界面这个java.exe是你的Oracle 11g安装目录中例如：【F:\app\chen\product\11.2.0\dbhome_1\jdk\jre\bin】下的java.exe 。不是你的电脑安装的java jdk下的java.exe！注意第一次，使用SQL D</div> </li> <li><a href="/article/172.htm" title="Weblogic Server Console密码修改和遗忘解决方法" target="_blank">Weblogic Server Console密码修改和遗忘解决方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/Welogic/1.htm">Welogic</a> <div> 在工作中一同事将Weblogic的console的密码忘记了，通过网上查询资料解决，实践整理了一下。一.修改Console密码打开weblogic控制台，安全领域 --> myrealm -->&n</div> </li> <li><a href="/article/299.htm" title="IllegalStateException: Cannot forward a response that is already committed" target="_blank">IllegalStateException: Cannot forward a response that is already committed</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Servlets/1.htm">Servlets</a> <div>对于初学者来说，一个常见的误解是：当调用 forward() 或者 sendRedirect() 时控制流将会自动跳出原函数。标题所示错误通常是基于此误解而引起的。示例代码： protected void doPost() { if (someCondition) { sendRedirect(); } forward(); // Thi</div> </li> <li><a href="/article/426.htm" title="基于流的装饰设计模式" target="_blank">基于流的装饰设计模式</a> <span class="text-muted">木zi_鸣</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>当想要对已有类的对象进行功能增强时，可以定义一个类，将已有对象传入，基于已有的功能，并提供加强功能。自定义的类成为装饰类模仿BufferedReader，对Reader进行包装，体现装饰设计模式装饰类通常会通过构造方法接受被装饰的对象，并基于被装饰的对象功能，提供更强的功能。装饰模式比继承灵活，避免继承臃肿，降低了类与类之间的关系装饰类因为增强已有对象，具备的功能该</div> </li> <li><a href="/article/553.htm" title="Linux中的uniq命令" target="_blank">Linux中的uniq命令</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux命令uniq的作用是过滤重复部分显示文件内容，这个命令读取输入文件，并比较相邻的行。在正常情况下，第二个及以后更多个重复行将被删去，行比较是根据所用字符集的排序序列进行的。该命令加工后的结果写到输出文件中。输入文件和输出文件必须不同。如果输入文件用“- ”表示，则从标准输入读取。 AD： uniq [选项] 文件说明：这个命令读取输入文件，并比较相邻的行。在正常情况下，第二个</div> </li> <li><a href="/article/680.htm" title="正则表达式Pattern" target="_blank">正则表达式Pattern</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/Pattern/1.htm">Pattern</a> <div>正则表达式是符合一定规则的表达式，用来专门操作字符串，对字符创进行匹配，切割，替换，获取。例如，我们需要对QQ号码格式进行检验规则是长度6~12位不能0开头只能是数字，我们可以一位一位进行比较，利用parseLong进行判断，或者是用正则表达式来匹配[1-9][0-9]{4,14} 或者 [1-9]\d{4,14} &nbs</div> </li> <li><a href="/article/807.htm" title="Oracle高级查询之OVER (PARTITION BY ..)" target="_blank">Oracle高级查询之OVER (PARTITION BY ..)</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>一、rank()/dense_rank() over(partition by ...order by ...) 现在客户有这样一个需求，查询每个部门工资最高的雇员的信息，相信有一定oracle应用知识的同学都能写出下面的SQL语句： select e.ename, e.job, e.sal, e.deptno from scott.emp e, (se</div> </li> <li><a href="/article/934.htm" title="Python调试" target="_blank">Python调试</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pdb/1.htm">pdb</a> <div>原文地址： http://blog.csdn.net/xuyuefei1988/article/details/19399137 1、下面网上收罗的资料初学者应该够用了，但对比IBM的Python 代码调试技巧： IBM：包括 pdb 模块、利用 PyDev 和 Eclipse 集成进行调试、PyCharm 以及 Debug 日志进行调试： http://www.ibm.com/d</div> </li> <li><a href="/article/1061.htm" title="webservice传递自定义对象时函数为空，以及boolean不对应的问题" target="_blank">webservice传递自定义对象时函数为空，以及boolean不对应的问题</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div>今天在客户端调用方法 NodeStatus status=iservice.getNodeStatus(). 结果NodeStatus的属性都是null。进行debug之后，发现服务器端返回的确实是有值的对象。后来发现原来是因为在客户端，NodeStatus的setter全部被我删除了。本来是因为逻辑上不需要在客户端使用setter，结果改了之后竟然不能获取带属性值的</div> </li> <li><a href="/article/1188.htm" title="java如何干掉指针，又如何巧妙的通过引用来操作指针————>说的就是java指针" target="_blank">java如何干掉指针，又如何巧妙的通过引用来操作指针————>说的就是java指针</a> <span class="text-muted">百合不是茶</span> <div>C语言的强大在于可以直接操作指针的地址，通过改变指针的地址指向来达到更改地址的目的,又是由于c语言的指针过于强大，初学者很难掌握， java的出现解决了c，c++中指针的问题 java将指针封装在底层，开发人员是不能够去操作指针的地址，但是可以通过引用来间接的操作：定义一个指针p来指向a的地址（&是地址符号）： </div> </li> <li><a href="/article/1315.htm" title="Eclipse打不开，提示“An error has occurred.See the log file ***/.log”" target="_blank">Eclipse打不开，提示“An error has occurred.See the log file ***/.log”</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>打开eclipse工作目录的\.metadata\.log文件，发现如下错误： !ENTRY org.eclipse.osgi 4 0 2012-09-10 09:28:57.139 !MESSAGE Application error !STACK 1 java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContai</div> </li> <li><a href="/article/1442.htm" title="spring aop实例annotation方法实现" target="_blank">spring aop实例annotation方法实现</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a><a class="tag" taget="_blank" href="/search/annotation/1.htm">annotation</a> <div> 在spring aop实例中我们通过配置xml文件来实现AOP，这里学习使用annotation来实现，使用annotation其实就是指明具体的aspect,pointcut和advice。1.申明一个切面(用一个类来实现)在这个切面里,包括了advice和pointcut AdviceMethods.jav</div> </li> <li><a href="/article/1569.htm" title="[Velocity一]Velocity语法基础入门" target="_blank">[Velocity一]Velocity语法基础入门</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/velocity/1.htm">velocity</a> <div>用户和开发人员参考文档 http://velocity.apache.org/engine/releases/velocity-1.7/developer-guide.html 注释 1.行级注释## 2.多行注释#* *# 变量定义使用$开头的字符串是变量定义，例如$var1, $var2, 赋值使用#set为变量赋值，例</div> </li> <li><a href="/article/1696.htm" title="【Kafka十一】关于Kafka的副本管理" target="_blank">【Kafka十一】关于Kafka的副本管理</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>1. 关于request.required.acks request.required.acks控制者Producer写请求的什么时候可以确认写成功，默认是0， 0表示即不进行确认即返回。 1表示Leader写成功即返回，此时还没有进行写数据同步到其它Follower Partition中 -1表示根据指定的最少Partition确认后才返回，这个在 Th</div> </li> <li><a href="/article/1823.htm" title="lua统计nginx内部变量数据" target="_blank">lua统计nginx内部变量数据</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/lua+nginx%E3%80%80+%E7%BB%9F%E8%AE%A1/1.htm">lua nginx　统计</a> <div>server { listen 80; server_name photo.domain.com; location /{set $str $uri; content_by_lua ' local url = ngx.var.uri local res = ngx.location.capture(</div> </li> <li><a href="/article/1950.htm" title="java-11.二叉树中节点的最大距离" target="_blank">java-11.二叉树中节点的最大距离</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.ArrayList; import java.util.List; public class MaxLenInBinTree { /* a. 1 / \ 2 3 / \ / \ 4 5 6 7 max=4 pass "root" </div> </li> <li><a href="/article/2077.htm" title="Netty源码学习-ReadTimeoutHandler" target="_blank">Netty源码学习-ReadTimeoutHandler</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div> ReadTimeoutHandler的实现思路：开启一个定时任务，如果在指定时间内没有接收到消息，则抛出ReadTimeoutException 这个异常的捕获，在开发中，交给跟在ReadTimeoutHandler后面的ChannelHandler，例如 private final ChannelHandler timeoutHandler = new ReadTim</div> </li> <li><a href="/article/2204.htm" title="jquery验证上传文件样式及大小(好用)" target="_blank">jquery验证上传文件样式及大小(好用)</a> <span class="text-muted">cngolon</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a><a class="tag" taget="_blank" href="/search/jquery%E9%AA%8C%E8%AF%81/1.htm">jquery验证</a> <div><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.</div> </li> <li><a href="/article/2331.htm" title="浏览器兼容【转】" target="_blank">浏览器兼容【转】</a> <span class="text-muted">cuishikuan</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/IE/1.htm">IE</a> <div>浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100% 解决方案：CSS里 *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设</div> </li> <li><a href="/article/2458.htm" title="Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数" target="_blank">Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%24%23/1.htm">$#</a><a class="tag" taget="_blank" href="/search/%24%3F/1.htm">$?</a><a class="tag" taget="_blank" href="/search/%E7%89%B9%E6%AE%8A%E5%8F%98%E9%87%8F/1.htm">特殊变量</a> <div>前面已经讲到，变量名只能包含数字、字母和下划线，因为某些包含其他字符的变量有特殊含义，这样的变量被称为特殊变量。例如，$ 表示当前Shell进程的ID，即pid，看下面的代码： $echo $$ 运行结果 29949 特殊变量列表变量含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数。n 是一个数字，表示第几个参数。例如，第一个</div> </li> <li><a href="/article/2585.htm" title="程序设计KISS 原则-------KEEP IT SIMPLE, STUPID!" target="_blank">程序设计KISS 原则-------KEEP IT SIMPLE, STUPID!</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a> <div>翻到一本书，讲到编程一般原则是kiss：Keep It Simple, Stupid.对这个原则深有体会，其实不仅编程如此，而且系统架构也是如此。 KEEP IT SIMPLE, STUPID! 编写只做一件事情，并且要做好的程序；编写可以在一起工作的程序，编写处理文本流的程序，因为这是通用的接口。这就是UNIX哲学.所有的哲学真正的浓缩为一个铁一样的定律，高明的工程师的神圣的“KISS 原</div> </li> <li><a href="/article/2712.htm" title="android Activity间List传值" target="_blank">android Activity间List传值</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Activity/1.htm">Activity</a> <div>第一个Activity： import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import a</div> </li> <li><a href="/article/2839.htm" title="tomcat 设置java虚拟机内存" target="_blank">tomcat 设置java虚拟机内存</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/tomcat+%E5%86%85%E5%AD%98%E8%AE%BE%E7%BD%AE/1.htm">tomcat 内存设置</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2117772 http://eksliang.iteye.com/ 常见的内存溢出有以下两种: java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError: Java heap space ------------</div> </li> <li><a href="/article/2966.htm" title="Android 数据库事务处理" target="_blank">Android 数据库事务处理</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>使用SQLiteDatabase的beginTransaction()方法可以开启一个事务，程序执行到endTransaction() 方法时会检查事务的标志是否为成功，如果程序执行到endTransaction()之前调用了setTransactionSuccessful() 方法设置事务的标志为成功则提交事务，如果没有调用setTransactionSuccessful() 方法则回滚事务。事</div> </li> <li><a href="/article/3093.htm" title="Java 打开浏览器" target="_blank">Java 打开浏览器</a> <span class="text-muted">hw1287789687</span> <a class="tag" taget="_blank" href="/search/%E6%89%93%E5%BC%80%E7%BD%91%E5%9D%80/1.htm">打开网址</a><a class="tag" taget="_blank" href="/search/open%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">open浏览器</a><a class="tag" taget="_blank" href="/search/open+browser/1.htm">open browser</a><a class="tag" taget="_blank" href="/search/%E6%89%93%E5%BC%80url/1.htm">打开url</a><a class="tag" taget="_blank" href="/search/%E6%89%93%E5%BC%80%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">打开浏览器</a> <div>使用java 语言如何打开浏览器呢? 我们先研究下在cmd窗口中,如何打开网址使用IE 打开 D:\software\bin>cmd /c start iexplore http://hw1287789687.iteye.com/blog/2153709 使用火狐打开 D:\software\bin>cmd /c start firefox http://hw1287789</div> </li> <li><a href="/article/3220.htm" title="ReplaceGoogleCDN：将 Google CDN 替换为国内的 Chrome 插件" target="_blank">ReplaceGoogleCDN：将 Google CDN 替换为国内的 Chrome 插件</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/google+api/1.htm">google api</a><a class="tag" taget="_blank" href="/search/chrome%E6%8F%92%E4%BB%B6/1.htm">chrome插件</a> <div>Chrome Web Store 安装地址： https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice 由于众所周知的原因，只需替换一个域名就可以继续使用Google提供的前端公共库了。同样，通过script标记引用这些资源，让网站访问速度瞬间提速吧</div> </li> <li><a href="/article/3347.htm" title="进程VS.线程" target="_blank">进程VS.线程</a> <span class="text-muted">m635674608</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a> <div>资料来源： http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001397567993007df355a3394da48f0bf14960f0c78753f000 1、Apache最早就是采用多进程模式 2、IIS服务器默认采用多线程模式 3、多进程优缺点优点：多进程模式最大</div> </li> <li><a href="/article/3474.htm" title="Linux下安装MemCached" target="_blank">Linux下安装MemCached</a> <span class="text-muted">字符串</span> <a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a> <div>前提准备：1. MemCached目前最新版本为：1.4.22，可以从官网下载到。2. MemCached依赖libevent，因此在安装MemCached之前需要先安装libevent。2.1 运行下面命令，查看系统是否已安装libevent。[root@SecurityCheck ~]# rpm -qa|grep libevent libevent-headers-1.4.13-4.el6.n</div> </li> <li><a href="/article/3601.htm" title="java设计模式之--jdk动态代理（实现aop编程）" target="_blank">java设计模式之--jdk动态代理（实现aop编程）</a> <span class="text-muted">Supanccy2013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div> 与静态代理类对照的是动态代理类，动态代理类的字节码在程序运行时由Java反射机制动态生成，无需程序员手工编写它的源代码。动态代理类不仅简化了编程工作，而且提高了软件系统的可扩展性，因为Java 反射机制可以生成任意类型的动态代理类。java.lang.reflect 包中的Proxy类和InvocationHandler 接口提供了生成动态代理类的能力。 &</div> </li> <li><a href="/article/3728.htm" title="Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持" target="_blank">Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring+4/1.htm">spring 4</a> <div>2.1 默认方法(default method) java8引入了一个default medthod; 用来扩展已有的接口,在对已有接口的使用不产生任何影响的情况下,添加扩展使用default关键字 Spring 4.2支持加载在默认方法里声明的bean 2.2 将要被声明成bean的类 public class DemoService { </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>