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/1883480000338915328.htm" title="Eigen知识点1：数组、向量初始化" target="_blank">Eigen知识点1：数组、向量初始化</a> <span class="text-muted">星辰和大海都需要门票</span> <a class="tag" taget="_blank" href="/search/Eigen/1.htm">Eigen</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5/1.htm">矩阵</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1知识点总结：（1）数组初始化Eigen::MatrixXdm(2,2);m(0,0)=1;m#includeusingnamespaceEigen;usingnamespacestd;intmain(intargc,char*argv[]){ros::init(argc,argv,"eigen01");ros::NodeHandlenh;//Eigen提供的初始化方法——逗号初始化法//知识点1</div> </li> <li><a href="/article/1883450501127794688.htm" title="SpringBoot使用 easy-captcha 实现验证码登录功能" target="_blank">SpringBoot使用 easy-captcha 实现验证码登录功能</a> <span class="text-muted">八月五</span> <a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE/1.htm">实战项目</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>文章目录一、环境准备1.解决思路2.接口文档3.redis下载二、后端实现1.引入依赖2.添加配置3.后端代码实现4.前端代码实现在前后端分离的项目中，登录功能是必不可少的。为了提高安全性，通常会加入验证码验证。easy-captcha是一个简单易用的验证码生成库，支持多种类型的验证码（如字符、中文、算术等）。本文将介绍如何在SpringBoot后端和Vue.js前端中集成easy-captcha</div> </li> <li><a href="/article/1883444946514538496.htm" title="电子电气架构 --- 设计车载充电机的关键考虑因素" target="_blank">电子电气架构 --- 设计车载充电机的关键考虑因素</a> <span class="text-muted">车载诊断技术</span> <a class="tag" taget="_blank" href="/search/EV%EF%BC%88%E7%94%B5%E5%8A%A8%E6%B1%BD%E8%BD%A6%EF%BC%89%E5%B8%B8%E8%A7%84%E7%9F%A5%E8%AF%86%E5%BF%85%E5%A4%87/1.htm">EV（电动汽车）常规知识必备</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E7%94%B5%E5%99%A8%E6%A1%86%E6%9E%B6/1.htm">电子电器框架</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E8%BD%A6%E8%BD%BD%E5%85%85%E7%94%B5%E5%99%A8%EF%BC%88OBC%EF%BC%89/1.htm">车载充电器（OBC）</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活，除了生存温饱问题之外，没有什么过多的欲望，表面看起来很高冷，内心热情，如果你身边有这样灵性的人，一定要好好珍惜他们眼中有神有光，干净，给人感觉很舒服，有超强的感知能力有形的无形的感知力很强，能感知人的内心变化喜欢独处，好静，</div> </li> <li><a href="/article/1883444947437285376.htm" title="智能电动汽车 --- 人工智能（AI）入门" target="_blank">智能电动汽车 --- 人工智能（AI）入门</a> <span class="text-muted">车载诊断技术</span> <a class="tag" taget="_blank" href="/search/%E6%80%9D%E8%80%83/1.htm">思考</a><a class="tag" taget="_blank" href="/search/%E6%B1%BD%E8%BD%A6%E8%A1%8C%E4%B8%9A/1.htm">汽车行业</a><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/%E6%99%BA%E8%83%BD%E7%94%B5%E5%8A%A8%E6%B1%BD%E8%BD%A6%E7%9A%84%E4%B8%89%E6%99%BA%E5%92%8C%E4%B8%89%E7%94%B5/1.htm">智能电动汽车的三智和三电</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/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E7%94%B5%E5%8A%A8%E6%B1%BD%E8%BD%A6/1.htm">智能电动汽车</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%EF%BC%88AI%EF%BC%89%E5%85%A5%E9%97%A8/1.htm">人工智能（AI）入门</a> <div>我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活，除了生存温饱问题之外，没有什么过多的欲望，表面看起来很高冷，内心热情，如果你身边有这样灵性的人，一定要好好珍惜他们眼中有神有光，干净，给人感觉很舒服，有超强的感知能力有形的无形的感知力很强，能感知人的内心变化喜欢独处，好静，</div> </li> <li><a href="/article/1883435242291785728.htm" title="C语言——指针进阶" target="_blank">C语言——指针进阶</a> <span class="text-muted">xb1132</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言：在对C语言指针进行初步入门之后，我们对指针——也就是地址有了基本的了解，如果还有对指针这部分知识不理解的同学可以看一下我写的关于指针入门的文章C语言——指针入门。1.数组指针1.1数组指针的概念这里为大家引入两个名词，数组指针和指针数组，这两个名词有什么区别呢？在指针入门阶段我们已经了解到，指针数组就是一个数组，一个存放指针类型元素的数组，而数组指针，顾名思义，它就是一个指针，一个指向数组的</div> </li> <li><a href="/article/1883434086782005248.htm" title="多线程在打包工具中的运用" target="_blank">多线程在打包工具中的运用</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：UED团队现代操作系统都是「多任务」的，也就是操作系统可以「并发」处理多个任务，比如可以在浏览页面的时候同时播放音乐。但是，一般来说我们的PC只有一个物理CPU，那么它是如何做到在只有一个CPU的情况下，并发处理多个任务的呢？我们简单探究一下。前置知识我们先简单熟</div> </li> <li><a href="/article/1883430953691443200.htm" title="神经网络入门推荐知识,神经网络入门书籍推荐" target="_blank">神经网络入门推荐知识,神经网络入门书籍推荐</a> <span class="text-muted">快乐的小肥熊</span> <a class="tag" taget="_blank" href="/search/ai%E6%99%BA%E8%83%BD%E5%86%99%E4%BD%9C/1.htm">ai智能写作</a><a class="tag" taget="_blank" href="/search/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/1.htm">神经网络</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><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/python/1.htm">python</a> <div>适合初学者的神经网络和遗传算法资料遗传算法（GeneticAlgorithm）是模拟达尔文生物进化论的自然选择和遗传学机理的生物进化过程的计算模型，是一种通过模拟自然进化过程搜索最优解的方法。遗传算法是从代表问题可能潜在的解集的一个种群（population）开始的，而一个种群则由经过基因（gene）编码的一定数目的个体(individual)组成。每个个体实际上是染色体(chromosome)带</div> </li> <li><a href="/article/1883415570947305472.htm" title="[LeetCode] 哈希表 I — 242#有效的字母异位词 | 349#两个数组的交集 | 202#快乐数 | 1#两数之和" target="_blank">[LeetCode] 哈希表 I — 242#有效的字母异位词 | 349#两个数组的交集 | 202#快乐数 | 1#两数之和</a> <span class="text-muted">miilue</span> <a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/%E6%95%A3%E5%88%97%E8%A1%A8/1.htm">散列表</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C%E7%AE%97%E6%B3%95/1.htm">哈希算法</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</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/%E7%AE%97%E6%B3%95/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> <div>哈希表基础知识常见的哈希结构数组242#有效的字母异位词Set基础语句349#两个数组的交集202#快乐数Map基础语句1#两数之和基础知识哈希表常用于快速判断一个元素是否在集合中，空间换时间哈希表是根据key（如数组的索引下标）直接进行访问的数据结构哈希函数：将key映射到哈希表上的索引index=hashFunction(key)=(hashCode(key)%tableSize)modtab</div> </li> <li><a href="/article/1883415572448866304.htm" title="[LeetCode] 哈希表完整版 — 哈希数组 | Set | Map" target="_blank">[LeetCode] 哈希表完整版 — 哈希数组 | Set | Map</a> <span class="text-muted">miilue</span> <a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C%E7%AE%97%E6%B3%95/1.htm">哈希算法</a><a class="tag" taget="_blank" href="/search/%E6%95%A3%E5%88%97%E8%A1%A8/1.htm">散列表</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</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/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>哈希表基础知识常见的哈希结构数组242#有效的字母异位词383#赎金信Set基础语句349#两个数组的交集202#快乐数15#三数之和18#四数之和Map基础语句1#两数之和454#四数相加II基础知识哈希表常用于快速判断一个元素是否在集合中，空间换时间哈希表是根据key（如数组的索引下标）直接进行访问的数据结构哈希函数：将key映射到哈希表上的索引index=hashFunction(key)=</div> </li> <li><a href="/article/1883415444732309504.htm" title="数字图像处理——matlab实现图像灰度等级化（2个等级，4个等级，8个等级，16个等级，32个等级，64个等级，128个等级的灰度图）" target="_blank">数字图像处理——matlab实现图像灰度等级化（2个等级，4个等级，8个等级，16个等级，32个等级，64个等级，128个等级的灰度图）</a> <span class="text-muted">miilue</span> <a class="tag" taget="_blank" href="/search/%E5%AE%9E%E9%AA%8C%E6%8A%A5%E5%91%8A/1.htm">实验报告</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86/1.htm">图像处理</a><a class="tag" taget="_blank" href="/search/MATLAB/1.htm">MATLAB</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86/1.htm">图像处理</a><a class="tag" taget="_blank" href="/search/%E7%81%B0%E5%BA%A6%E7%AD%89%E7%BA%A7%E5%8C%96/1.htm">灰度等级化</a><a class="tag" taget="_blank" href="/search/RGB%E8%BD%AC%E7%81%B0%E5%BA%A6/1.htm">RGB转灰度</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/1.htm">代码实现</a> <div>图像灰度等级化相关知识读者可以自行百度，本篇文章只放matlab的实现代码。在做这个实验时，在网上没有找到好用的代码，自己后来试了一些他人的方法，最后修改完善得到了该篇文章的代码，希望有所帮助。My=imread('E:\informt\lesson\数字图像处理与安全\图像集\Fruit.bmp');%读取图像MyGrayPic=rgb2gray(My);%灰度图像等级化holdon;figur</div> </li> <li><a href="/article/1883414560711438336.htm" title="影像调阅相关知识点记录" target="_blank">影像调阅相关知识点记录</a> <span class="text-muted">只为梦惜晨</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7%E7%B1%BB/1.htm">工具类</a><a class="tag" taget="_blank" href="/search/http%E8%AF%B7%E6%B1%82%E5%A4%B4%E5%90%AB%E4%B9%89/1.htm">http请求头含义</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>场景：最近调用发票识别的影像业务，涉及到几个以前未接触到的知识点，特此记录知识点一：方法入参中，我们可以用一个List而不写具体实体类进行一个公共方法的调用知识点二：map与实体类的互相转换知识点三：便利Map,将每个字段的key和value解析出来拼接到soapenv中知识点四：影像服务请求调用知识点五：正则表达式截取两个字符串之间的数据/***调用国信影像系统数据初始化**@paramapiN</div> </li> <li><a href="/article/1883414562208804864.htm" title="Vue 2 + Element UI 实现密码显示、隐藏切换功能" target="_blank">Vue 2 + Element UI 实现密码显示、隐藏切换功能</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/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a> <div>一、使用ElementUI的show-password属性1、ElementUI的组件提供了一个方便的show-password属性。启用后，它会自动添加一个切换密码显示、隐藏的按钮。2、代码3、优点：实现简单，无需额外代码。缺点：不支持自定义图标。二、自定义后缀图标实现密码显示/隐藏1、如果你想要使用自己的图标或实现更多自定义功能，可以通过插槽（slot）的方式来自定义后缀图标，并通过绑定事件来</div> </li> <li><a href="/article/1883405357087256576.htm" title="JavaEE-Java基础-计算机基础知识" target="_blank">JavaEE-Java基础-计算机基础知识</a> <span class="text-muted">最好的Aw_</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/java-ee/1.htm">java-ee</a> <div>计算机基础知识1,计算机简介①计算机发展史:第一台通用计算机:ENIAC2,数据的存储和运算①数据的存储和运算结论:计算机中对于数据的存储和运算,都是通过二进制数据来完成②计算机中存储数据的单位是什么?------字节(byte)③每个字节是由多少个位组成的?------每个字节由8位组成,称为8个bit位3,人机交互方式①人机交互方式:(1)图形化界面(缺点:消耗内存,运行速度慢)(2)命令行②</div> </li> <li><a href="/article/1883403717848395776.htm" title="立创逻辑派FPGA-G1开发板，搭载国产高云GW2A-LV18，融合GD32F303的M4内核。提供入门资料和近百款模块移植案例、步骤清晰的教程帮助初学者更快地掌握FPGA基础知识。" target="_blank">立创逻辑派FPGA-G1开发板，搭载国产高云GW2A-LV18，融合GD32F303的M4内核。提供入门资料和近百款模块移植案例、步骤清晰的教程帮助初学者更快地掌握FPGA基础知识。</a> <span class="text-muted">嵌入式程序员小刘</span> <a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/iot/1.htm">iot</a> <div>简介：立创逻辑派FPGA-G1开发板，搭载国产高云GW2A-LV18，融合GD32F303的M4内核。提供入门资料和近百款模块移植案例、步骤清晰的教程帮助初学者更快地掌握FPGA基础知识。我将针对立创逻辑派FPGA-G1开发板，结合其国产高云GW2A-LV18FPGA和GD32F303M4内核的特性，详细阐述一个可靠、高效、可扩展的嵌入式系统开发流程，并给出相应的代码架构和C语言实现。系统概述立创</div> </li> <li><a href="/article/1883399805426790400.htm" title="vue el-upload 上传图片列表校验不通过后多删除了一张图片" target="_blank">vue el-upload 上传图片列表校验不通过后多删除了一张图片</a> <span class="text-muted">＊且听风吟</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/2.x/1.htm">2.x</a><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>问题最近在使用element-ui的el-upload组件上传图片列表时，发现当上传的图片校验不通过时，会将上一张已经上传成功的图片删除了。场景已经上传了一张图片1，再上传另一张图片2，如果当前这张图片2校验不通过，会提示失败并且删除当前图片2，同时，也会将上一张已经上传成功的图片1也删除。组件主要代码：上传支持上传图片，单文件上传大小限制10MB，最多上传10张附件---------------</div> </li> <li><a href="/article/1883398166032740352.htm" title="ACM培训2" target="_blank">ACM培训2</a> <span class="text-muted">ZIZIZIZIZ()</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>学习总结--二分基础知识二分查找前提是有序(即单调),若无序一般先sort向左找while(l=x)r=mid;elsel=mid+1;}向右找while(lusingnamespacestd;intn;longlongx;longlonga[100001];boolcheck(intmid){longlongsum=0,minn=1e10;for(inti=1;i=2*x)return1;els</div> </li> <li><a href="/article/1883392244669542400.htm" title="【Python报错已解决】NameError: name ‘python‘ is not defined" target="_blank">【Python报错已解决】NameError: name ‘python‘ is not defined</a> <span class="text-muted">HoRain云小助手</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> <div>很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。✨✨欢迎订阅本专栏✨✨目录引言：一、问题描述：1.1报错示例：1.2报错分析：1.3解决思路：二、解决方法：2.1方法一：定义变量2.2方法二：检查变量名拼写2.3方法三：确认变量作用域2.4方法四：检查模</div> </li> <li><a href="/article/1883383799937560576.htm" title="现代卓越认证指南：PMP项目管理专业学习秘籍" target="_blank">现代卓越认证指南：PMP项目管理专业学习秘籍</a> <span class="text-muted">大苏牙</span> <div>本文还有配套的精品资源，点击获取简介：PMP认证作为项目管理领域的全球认可资质，对专业人士的职场竞争力有显著提升作用。文章介绍了南京卓尔越提供的PMP学习策略和资源，强调了PMP框架理解、敏捷方法、风险管理、沟通技巧等关键知识领域的重要性。南京卓尔越的微信图片等资源可帮助考生高效复习和练习，通过定制化学习支持和模拟考试来提高备考效率。1.PMP认证的重要性1.1PMP认证的行业认可度项目管理专业认</div> </li> <li><a href="/article/1883376612829884416.htm" title="第21篇：python编程进阶：python数据库基础详解" target="_blank">第21篇：python编程进阶：python数据库基础详解</a> <span class="text-muted">猿享天开</span> <a class="tag" taget="_blank" href="/search/python%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/1.htm">python从入门到精通</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>第21篇：数据库基础内容简介在现代应用开发中，数据库是存储和管理数据的核心组件。本篇文章将介绍关系型数据库与非关系型数据库的基本概念和区别，深入探讨SQL的基础知识，并展示如何使用Python连接和操作常见的数据库系统，如MySQL和PostgreSQL。通过理论与实践相结合的方式，您将全面掌握数据库的基本原理和实际应用技能，为构建高效、可靠的数据驱动型应用打下坚实的基础。目录数据库概述什么是数据</div> </li> <li><a href="/article/1883371698003177472.htm" title="使用GitLab CI/CD部署应用到Kubernetes集群的方案" target="_blank">使用GitLab CI/CD部署应用到Kubernetes集群的方案</a> <span class="text-muted">拿我格子衫来</span> <a class="tag" taget="_blank" href="/search/GitLab/1.htm">GitLab</a><a class="tag" taget="_blank" href="/search/CI%2FCD/1.htm">CI/CD</a><a class="tag" taget="_blank" href="/search/%E6%95%99%E7%A8%8B/1.htm">教程</a><a class="tag" taget="_blank" href="/search/ci%2Fcd/1.htm">ci/cd</a><a class="tag" taget="_blank" href="/search/kubernetes/1.htm">kubernetes</a><a class="tag" taget="_blank" href="/search/devops/1.htm">devops</a> <div>最近业余时间调研了一下在GitLabCI/CD中部署应用到Kubernetes的方案。这是一个老生常谈的话题，很多粉丝和读者问我如何部署应用到K8s中。其实思路是很清晰的，只是其中又很多点大家可能无法串起来。那么本篇文章就带领大家实践一下如何做CD的方案。本方案的好处就是，读者不需要了解太多关K8s相关知识也可以实现该方案。Kubernets的命令行工具是kubectl。就像我们使用docker命</div> </li> <li><a href="/article/1883371570798325760.htm" title="**让表单设计从未如此优雅——Vue Formly深度解析**" target="_blank">**让表单设计从未如此优雅——Vue Formly深度解析**</a> <span class="text-muted">孙爽知Kody</span> <div>让表单设计从未如此优雅——VueFormly深度解析vue-formlyJavaScriptpoweredformsforVue.js项目地址:https://gitcode.com/gh_mirrors/vu/vue-formly在Web开发中，处理复杂的表单逻辑往往让人头疼。无论是数据验证还是界面的统一风格，都需要开发者花费大量精力来维护代码的一致性和效率。今天，我们要向大家推荐一个强大的表单</div> </li> <li><a href="/article/1883371066965946368.htm" title="输入法无法正常使用，显示“输入法（仅桌面）”" target="_blank">输入法无法正常使用，显示“输入法（仅桌面）”</a> <span class="text-muted">famous_pengfei</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91/1.htm">笔记本电脑</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E8%84%91/1.htm">电脑</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>在日常使用电脑的过程中，输入法是我们与计算机交互的重要工具之一。然而，有时候输入法可能会出现一些小问题，比如无法正常使用，或者显示“输入法（仅桌面）”的提示。这不仅影响了我们的工作效率，还可能让人感到困惑。如果你也遇到了类似的问题，不妨来看看这篇文章，它可能会给你带来一些有用的解决方案。这篇文章来自联想知识库，专门针对输入法无法正常使用的问题进行了详细的分析和解答。文章中不仅提供了清晰的步骤说明，</div> </li> <li><a href="/article/1883356437854351360.htm" title="Langchain本地知识库部署" target="_blank">Langchain本地知识库部署</a> <span class="text-muted">MaxCode-1</span> <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a> <div>本地部署（Docker+LangChain+FAISS）1.概述本地部署LangChain-Chatchat可以为企业提供高效、安全、可控的AI知识库方案。本方案基于Docker、LangChain和FAISS进行本地化部署，适用于企业内部知识库问答、私有化AI应用等场景。2.技术选型2.1LangChainLangChain是一个开源的LLM（大语言模型）应用开发框架，支持多种模型和数据源，适用</div> </li> <li><a href="/article/1883345973703405568.htm" title="点云从入门到精通技术详解100篇-基于卷积和注意力机制的3D点云特征提取" target="_blank">点云从入门到精通技术详解100篇-基于卷积和注意力机制的3D点云特征提取</a> <span class="text-muted">格图素书</span> <a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a> <div>目录知识储备点云获取技术分类一、图像衍生点云二、LiDAR三、RGB-D深度图像传感器基于3D激光slam的点云特征提取为什么要进行点云特征提取特征提取理论与代码编写点云特征提取主体类sample_and_groupfarthest_point_samplequery_ball_pointindex_points前言国内外研究现状卷积神经网络三维卷积神经网络稀疏卷积[21]基于3D点云数据的目标分</div> </li> <li><a href="/article/1883345974143807488.htm" title="Python的未来 future模块" target="_blank">Python的未来 future模块</a> <span class="text-muted">gftygff</span> <div>分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！转载：http://omencathay.itpub.net/post/30163/414347简单介绍一下python未来将会支持的一些语言特点,虽然Ibm的网站上也有介绍.但是太凌乱了.而且中翻译过后,代码的</div> </li> <li><a href="/article/1883339162245984256.htm" title="7、知识库内容更新与自动化" target="_blank">7、知识库内容更新与自动化</a> <span class="text-muted">MaxCode-1</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E7%9F%A5%E8%AF%86%E5%BA%93/1.htm">知识库</a> <div>1知识库内容更新与自动化企业级知识库的内容随着业务发展不断增长，涉及政策法规、内部文档、技术规范、FAQ、产品手册等多个领域。如果完全依赖人工维护，成本高、效率低，且容易造成信息滞后。因此，企业需要借助自动化工具、智能算法、订阅机制，构建高效、动态的知识更新体系，确保知识的实时性、准确性和可追溯性。本节将介绍自动化知识更新的最佳实践，并探讨数据版本管理与历史溯源，以确保知识库的高效运营。1.1自动</div> </li> <li><a href="/article/1883326297392869376.htm" title="简单的基于Spring Cloud和Vue的示例项目结构及部分关键代码" target="_blank">简单的基于Spring Cloud和Vue的示例项目结构及部分关键代码</a> <span class="text-muted">软件职业规划</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cloud/1.htm">cloud</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>后端（SpringCloud部分）1.创建SpringCloud项目（以SpringCloudGateway和SpringCloudEureka为例）首先，使用SpringInitializr创建一个基础的SpringBoot项目，并添加相关的SpringCloud依赖，比如：spring-cloud-starter-gateway：用于实现API网关功能。spring-cloud-starter</div> </li> <li><a href="/article/1883326171043655680.htm" title="从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南" target="_blank">从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南</a> <span class="text-muted">软件职业规划</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>一、准备工作1.开发环境搭建安装JDK（JavaDevelopmentKit）：前往Oracle官网（https://www.oracle.com/java/technologies/javase-jdk11-downloads.html，以JDK11为例）下载适合你操作系统的JDK安装包，按照安装向导完成安装。安装完成后，配置系统环境变量，确保在命令行中能通过java-version命令查看到正</div> </li> <li><a href="/article/1883325538844602368.htm" title="elment plus 报错：ElementPlusError: [ElForm] unexpected width 0 at debugWarn (error.ts:13:37)" target="_blank">elment plus 报错：ElementPlusError: [ElForm] unexpected width 0 at debugWarn (error.ts:13:37)</a> <span class="text-muted">m0_75101866</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><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警告问题记录二_elementpluserror:[elform]unexpectedwidth0-CSDN博客测试添加label-width依然warning，el-form-item包裹了el-button，拿出来就好了，为其他el-form-item都添加上label-width</div> </li> <li><a href="/article/1883320499732279296.htm" title="Direct Preference Optimization (DPO): 一种无需强化学习的语言模型偏好优化方法" target="_blank">Direct Preference Optimization (DPO): 一种无需强化学习的语言模型偏好优化方法</a> <span class="text-muted">Yuleave</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BA%E6%96%87%E5%AD%A6%E4%B9%A0/1.htm">论文学习</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><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/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a> <div>论文地址：https://arxiv.org/pdf/2305.182901.背景与挑战近年来，大规模无监督语言模型（LM）在知识获取和推理能力方面取得了显著进展，但如何精确控制其行为仍是一个难题。现有的方法通常通过**强化学习从人类反馈（RLHF）**来引导模型行为，但RLHF存在以下问题：复杂性高：RLHF需要先训练一个奖励模型来反映人类偏好，然后使用强化学习来微调语言模型，使其在最大化奖励的</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>