没头发的米糊

【Vue】关于 v-model，你想要的全部知识点，都在这儿了

一、`v-model` 的使用原理

在 Vue 中，使用 v-bind 可以实现单向数据流，即父组件向子组件传入基本数据类型，但反过来，子组件中不能修改父组件传过来的基本数据类型。

想要实现数据的双向传递，需要使用 Vue 提供的事件机制。即在子组件中通过 $emit() 触发一个事件，在父组件中则需要使用对应的 v-on 属性监听对应的事件，并在事件发生时修改相应的数据。

Vue 将其简化为了一个语法糖，即：

<input type="text" v-model="name">

本质上是：

<input type="text" :value="name" @input="name = $event.target.value">

而根据 Html 5 标准，对于、</code> 、<code><select></code> 等原生的表单标签，它们的属性不一定都是 <code>value</code> ，发出的事件也不一定都是 <code>input</code> 。因此，Vue 为它们做了单独的适配： <ul> <li><code>text</code> 和 <code>textarea</code> 元素使用 <code>value</code> 属性和 <code>input</code> 事件；</li> <li><code>checkbox</code> 和 <code>radio</code> 使用 <code>checked</code> 属性和 <code>change</code> 事件；</li> <li><code>select</code> 字段将 <code>value</code> 作为 <code>prop</code> 并将 <code>change</code> 作为事件。</li> </ul> 但对于除这些标签以外的其他标签，Vue 默认 会 绑定 <code>value</code> 属性 和 监听 <code>input</code>事件。 基于此，只需要记住一个事实，<code>v-model</code> 只是同时完成 数据的绑定 和 事件的监听 而已，它内部实现的机理只是一个简化书写的语法糖。 <h2>二、自定义组件中的 <code>v-model</code></h2> 了解了 <code>v-model</code> 的原理，我们可以想象，想要在自定义组件中实现 <code>v-model</code>，其实对应要做的就是 允许父组件进行数据绑定 和 在数据发生变化时发出对应的事件 即可。 <h3>方法1. 拼凑默认的语法糖</h3> 既然对组件使用 <code>v-model</code> 时，Vue 默认 会 绑定 <code>value</code> 属性 和 监听 <code>input</code> 事件。那么我们就可以依靠拼凑语法糖的方式在自定义组件上实现 <code>v-model</code>。 首先，我们拥有一个父组件 <code>App.vue</code>，其中包含一个子组件 <code>Parent</code>。它要实现的功能是一个带有调节按钮的数值选择器： <a href="http://img.e-com-net.com/image/info8/f789c3bc7f294f76b130cd3e7c796d55.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/f789c3bc7f294f76b130cd3e7c796d55.png" alt="子组件功能" width="102" height="51"></a> <blockquote> 父组件 <code>App</code> 的参考代码： </blockquote> <pre><code class="prism language-html"><template> <div id="app"> <Parent v-model="parentValue"></Parent> </div> </template> <script> import Parent from './components/Parent.vue' export default { name: 'app', data(){ return { parentValue:5 } }, components:{ Parent } } </script> </code></pre> 现在，问题就只剩下如何在子组件<code>Parent</code>中拼凑出<code>v-model</code>的语法糖。 子组件的结构如下： <pre><code class="prism language-html"><template> <div id="Parent"> <button @click="changeValue(-1)"> - </button> { {value}} <button @click="changeValue(+1)"> + </button> </div> </template> </code></pre> <h4>要点一：允许父组件进行数据绑定</h4> 因为 Vue 会 默认绑定 <code>value</code> 属性，因此我们在子组件的 <code>props</code> 中添加 <code>value</code> 字段。 <pre><code class="prism language-js"> props:{ value:{ type: Number, default: 5 } }, </code></pre> <h4>要点二：允许父组件进行数据绑定</h4> 因为 Vue 会 默认监听 <code>input</code> 事件，因此在改变数值时，应当发出 <code>input</code> 事件。同时在事件中包裹新的值，以便父组件接收。 <pre><code class="prism language-js"> methods:{ changeValue(dv) { this.$emit("input",this.value + dv) } } </code></pre> 通过以上简单的两步，我们就轻松地拼凑出了 <code>v-model</code> 的默认语法糖，从而实现了自定义组件中的 <code>v-model</code>。 <blockquote> 子组件<code>Parent</code>的参考代码： </blockquote> <pre><code class="prism language-html"><template> <div id="Parent"> <button @click="changeValue(-1)"> - </button> { {value}} <button @click="changeValue(+1)"> + </button> </div> </template> <script> export default{ name:"Parent", props:{ value:{ type: Number, default: 5 } }, methods:{ changeValue(dv) { this.$emit("input",this.value + dv) } } } </script> </code></pre> <h3>方法2. 使用 <code>model</code> 字段</h3> 拼凑默认的语法糖虽然可行，但显然这并不是一种理想的方式。因为我们想要实现<code>v-model</code>的字段不一定是<code>value</code>，如何为<code>v-model</code>自定义绑定属性和监听事件呢？ 假设我们现在不使用 <code>value</code> 属性和 <code>input</code> 事件，而是使用了名为 <code>num</code> 的属性和名为 <code>numChanged</code> 的事件。 <blockquote> 新的子组件<code>Parent</code>的参考代码 - 1： </blockquote> <pre><code class="prism language-html"><template> <div id="Parent"> <button @click="changeValue(-1)"> - </button> { {num}} <button @click="changeValue(+1)"> + </button> </div> </template> <script> export default{ name:"Parent", props:{ num:{ type: Number, default: 5 } }, methods:{ changeValue(dv) { this.$emit("numChanged",this.num + dv) } } } </script> </code></pre> 至此，默认的<code>v-model</code>就失效了。 这时候就需要请出我们的<code>model</code>字段（仅限于 Vue 2.2.0+）。 <pre><code class="prism language-js"> model:{ prop:"num", event:"numChanged" }, </code></pre> 在子组件中添加如上的代码段，就可以自定义 <code>v-model</code> 的 属性 和 监听事件。 如上，我们就通过使用 <code>model</code> 字段完成了自定义组件的 <code>v-model</code>。 <blockquote> 新的子组件<code>Parent</code>的参考代码 - 2： </blockquote> <pre><code class="prism language-html"><template> <div id="Parent"> <button @click="changeValue(-1)"> - </button> { {num}} <button @click="changeValue(+1)"> + </button> </div> </template> <script> export default{ name:"Parent", model:{ prop:"num", event:"numChanged" }, props:{ num:{ type: Number, default: 5 } }, methods:{ changeValue(dv) { this.$emit("numChanged",this.num + dv) } } } </script> </code></pre> <h2>三、在多层嵌套的组件中使用<code>v-model</code></h2> 现在描述这样一个情形：假设我有超组件<code>App</code>、父组件<code>Parent</code>和子组件<code>Child</code>。我需要通过<code>v-model</code>将App中的一个值 <code>parentValue</code> 一路绑定至 <code>Child</code>，并实现同步。 假设直接使用刚才的方式，分别为<code>Parent</code>组件和<code>Child</code>组件实现自定义的<code>v-model</code>，这样是否可行呢？ 不妨做一个实验： <a href="http://img.e-com-net.com/image/info8/76c4581c70184957a15397f7ff5768d5.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/76c4581c70184957a15397f7ff5768d5.png" alt="【Vue】关于 v-model，你想要的全部知识点，都在这儿了_第2张图片" width="266" height="188" style="border:1px solid black;"></a> 我们分别为三个组件都准备一个值显示器和调节手柄。 在<code>App</code>中，调节手柄的主要工作为直接修改值： <pre><code class="prism language-js"> methods:{ changeValue(dv){ this.parentValue += dv; } } </code></pre> 而在<code>Parent</code> 和 <code>Child</code> 两个子组件中，调节手柄的作用与第二部分的自定义子组件<code>v-model</code>一致： <pre><code class="prism language-js"> methods:{ changeValue(dv) { this.$emit("numChanged",this.num + dv) } }, </code></pre> 在这样的状况下，我们做下面三个操作： <ul> <li>点击<code>App</code>的调节手柄时，值的变化成功同步到了两个子组件中。</li> <li>点击 <code>Parent</code>的调节手柄时，值的变化也成功同步到了它的父组件和它的子组件中。</li> <li>点击 <code>Child</code>的调节手柄时，出现了问题。 <a href="http://img.e-com-net.com/image/info8/7c8055478ac842aabdd7905ab904501d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/7c8055478ac842aabdd7905ab904501d.png" alt="【Vue】关于 v-model，你想要的全部知识点，都在这儿了_第3张图片" width="278" height="198" style="border:1px solid black;"></a> 可以看到，值的变化只同步到了它的第一层父组件<code>Parent</code>，App中的值没有发生变化。 同时，浏览器的控制台报出如下错误： <a href="http://img.e-com-net.com/image/info8/44b0e626f72d44febd605bc16cf07dd1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/44b0e626f72d44febd605bc16cf07dd1.jpg" alt="【Vue】关于 v-model，你想要的全部知识点，都在这儿了_第4张图片" width="650" height="169" style="border:1px solid black;"></a> 原因就出在<code>v-model</code>的实现原理上。 在点击子组件<code>Child</code>的调节手柄时，它会向父组件<code>Parent</code>发出一个事件：</li> </ul> <pre><code class="prism language-js">this.$emit("numChanged",this.num + dv) </code></pre> 此时，父组件因为绑定了<code>v-model</code>，所以会接收这个事件，而<code>v-model</code>是如下语句的语法糖： <pre><code class="prism language-html"><child :num="num" @numChanged="num = $event"></child> </code></pre> 而上述语句<code>num = $event</code> 修改了 <code>prop</code> 中属性的值，这违背了Vue的设计原则。同时<code>parent</code>组件也没有再进一步向父组件<code>App</code>发出事件，导致值的修改没有被同步到<code>App</code>。 <h4>解决方案</h4> 这个问题该如何解决？ <h5>不完美的解决方案：</h5> 很多朋友可能会首先想到，通过为<code>parent</code>组件中的值设定<code>watch</code>监听器，在值变化时，向父组件App发出事件，完成同步。 <pre><code class="prism language-js"> watch:{ num:{ handler(newValue,oldValue) { this.$emit("numChanged",newValue) } } }, </code></pre> 这样确实实现了功能。因为如此推断，当<code>num</code>发生变化时，<code>parent</code>确实能够通过事件将变化传给上一级。 但这么写并不优雅。因为在底层，仍然是首先修改了<code>props</code>的值，然后才通知父组件修改相应的值。这仍然会引发Vue的警告。 <a href="http://img.e-com-net.com/image/info8/f32005c86c764f75963dcd6c7b3715a0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f32005c86c764f75963dcd6c7b3715a0.jpg" alt="【Vue】关于 v-model，你想要的全部知识点，都在这儿了_第5张图片" width="650" height="151" style="border:1px solid black;"></a> <h5>完美的解决方案 1：</h5> 考虑<code>v-model</code>的底层实现机制，直接向下层组件通过<code>v-model</code>传递<code>prop</code>中的值，必然会引发赋值。因此，在<code>v-model</code>中必须传递一个非<code>props</code>值。 <pre><code class="prism language-js"> data(){ return { myNum:5 } }, </code></pre> 我们在<code>parent</code>组件内安排一个新的<code>data</code>属性<code>myNum</code>，并把它绑定给<code>v-model</code>： <pre><code class="prism language-html"><template> <div id="Parent"> Parent 中目前的值： { {num}} <br> Parent 的调节手柄：<button @click="changeValue(-1)"> - </button> <button @click="changeValue(+1)"> + </button> <child v-model="myNum"></child> </div> </template> </code></pre> 现在我们要做的，就是实现<code>myNum</code>和<code>num</code>的同步。 当下层组件给<code>parent</code>传值时，<code>myNum</code>中的值会发生变化，我们通过<code>watch</code>监听变化，并将变化传递给上层组件，由上层组件修改<code>num</code>的值（从而避免直接修改<code>props</code>）： <pre><code class="prism language-js"> myNum:{ handler(newValue,oldValue) { this.$emit("numChanged",newValue) } } </code></pre> 同时，当上层组件的<code>num</code>发生变化时，我们也需要同步<code>myNum</code>的值： <pre><code class="prism language-js"> num:{ handler(newValue,oldValue) { this.myNum = this.num; } }, </code></pre> 基本完成了，但还有一个注意点。在Vue组件完成挂载时，<code>myNum</code>和<code>num</code>的值可能不同步，这并不会被<code>watch</code>监听到，因此我们还需要提供一个钩子： <pre><code class="prism language-js"> mounted(){ this.myNum = this.num }, </code></pre> 通过这一系列操作，我们用一个<code>data</code>属性代替了<code>props</code>属性，从而避免了警告。 <blockquote> 新的子组件<code>Parent</code>的参考代码 - 3： </blockquote> <pre><code class="prism language-html"><template> <div id="Parent"> Parent 中目前的值： { {num}} <br> Parent 的调节手柄：<button @click="changeValue(-1)"> - </button> <button @click="changeValue(+1)"> + </button> <child v-model="myNum"></child> </div> </template> <script> import child from './Child.vue' export default{ name:"Parent", model:{ prop:"num", event:"numChanged" }, props:{ num:{ type: Number, default: 5 } }, data(){ return { myNum:5 } }, methods:{ changeValue(dv) { this.$emit("numChanged",this.num + dv) } }, watch:{ num:{ handler(newValue,oldValue) { this.myNum = this.num; } }, myNum:{ handler(newValue,oldValue) { this.$emit("numChanged",newValue) } } }, mounted(){ this.myNum = this.num }, components:{ child } } </script> </code></pre> <h5>完美的解决方案 2：</h5> 在上一个解决方案中，我们选择使用<code>watch</code>的监听方法，用一个<code>data</code>代替<code>prop</code>。但我们为了实现这个功能，增加了<code>data</code>、<code>watch</code>和<code>mounted</code>三个字段，确实令人困惑。 事实上，可以只使用一个计算属性<code>computed</code>，来完成实现这些功能： <pre><code class="prism language-js"> computed:{ myNum:{ get(){ return this.num; }, set(newValue){ this.$emit("numChanged",newValue) } } }, </code></pre> <blockquote> 新的子组件<code>Parent</code>的参考代码 - 4： </blockquote> <pre><code class="prism language-html"><template> <div id="Parent"> Parent 中目前的值： { {num}} <br> Parent 的调节手柄：<button @click="changeValue(-1)"> - </button> <button @click="changeValue(+1)"> + </button> <child v-model="myNum"></child> </div> </template> <script> import child from './Child.vue' export default{ name:"Parent", model:{ prop:"num", event:"numChanged" }, props:{ num:{ type: Number, default: 5 } }, methods:{ changeValue(dv) { this.$emit("numChanged",this.num + dv) } }, computed:{ myNum:{ get(){ return this.num; }, set(newValue){ this.$emit("numChanged",newValue) } } }, components:{ child } } </script> </code></pre> <h4>总结</h4> 这一部分内容中，我们介绍了如何在在多层嵌套的组件中使用<code>v-model</code> 。在这种情况下，除了最顶层组件和最底层组件，其他的中间组件都需要使用<code>data</code>代替<code>props</code>。我们推荐使用解决方案2，因为它比较优雅且易读。 <h2>四、<code>v-model</code>的一些其他使用细节</h2> <h3>1. 多选与单选</h3> <a href="http://img.e-com-net.com/image/info8/827f2313d3764f44aa2ddee2f0938dcf.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/827f2313d3764f44aa2ddee2f0938dcf.png" alt="在这里插入图片描述" width="297" height="88"></a> 当我们为多选的 <code>select</code> 标签绑定 <code>v-model</code> 时，得到的会是一个数组。 复选的 <code>checkbox</code> 同理。 <blockquote> 多选的<code>select</code>的参考代码： </blockquote> <pre><code class="prism language-html"><template> <div id="app"> { {mySelects}} <select v-model="mySelects" multiple> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橘子</option> </select> </div> </template> </code></pre> 但当我们为多个单选的radio标签绑定v-model时，得到的只是单选的值。 <a href="http://img.e-com-net.com/image/info8/f4ef1143c0ef4f23a34c0847141b0d74.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f4ef1143c0ef4f23a34c0847141b0d74.jpg" alt="【Vue】关于 v-model，你想要的全部知识点，都在这儿了_第6张图片" width="246" height="101" style="border:1px solid black;"></a> <blockquote> 单选的<code>radio</code>的参考代码： </blockquote> <pre><code class="prism language-html"><template> <div id="app"> <div id="app"> <label for="male"> <input type="radio" id="male" value="男" v-model="gender"> 男 </label> <label for="female"> <input type="radio" id="female" value="女" v-model="gender"> 女 </label> <h2>您选择的性别是：{ {gender}}</h2> </div> </div> </template> </code></pre> <h3>2. 修饰符</h3> 在使用 <code>v-model</code> 时，在后面加上 “<code>.[修饰符]</code>” ，即可实现一些特殊的功能。 <ul> <li><code>lazy</code>修饰符: 默认情况下，<code>v-model</code>默认是在<code>input</code>事件中同步输入框的数据的。 也就是说，一旦有数据发生改变对应的<code>data</code>中的数据就会自动发生改变。 <code>lazy</code>修饰符可以让数据在失去焦点或者回车时才会更新:</li> <li><code>number</code>修饰符: 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。 <code>number</code>修饰符可以让在输入框中输入的内容自动转成数字类型。</li> <li><code>trim</code>修饰符: 如果输入的内容首尾有很多空格，通常我们希望将其去除，<code>trim</code>修饰符可以过滤内容左右两边的空格。</li> </ul> <blockquote> 修饰符<code>lazy</code>的参考代码： </blockquote> <pre><code class="prism language-html"> <div id="app"> <input type="text" v-model.lazy="content" placeholder="请输入"> <p>输入框：{ {content}}</p> </div> <script> new Vue({ el: '#app', data: { name: '123', content: '' } }) </script> </code></pre> <h2>五、总结</h2> <code>v-model</code> 作为一个语法糖，在 Vue 中有着非常重要的地位。合理、有效地使用 <code>v-model</code> 可以有效提升项目代码的可读性。 本专栏将持续更新，关注我，继续带你体验更多 Vue 技巧！ </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1456404321687089152"></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,vue.js,html5,javascript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> 软件技术NINI <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> 小猿L <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835453535777550336.htm" title="vue3中el-table中点击图片放大时，被表格覆盖" target="_blank">vue3中el-table中点击图片放大时，被表格覆盖</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中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported</div> </li> <li><a href="/article/1835452528599330816.htm" title="vue项目element-ui的table表格单元格合并" target="_blank">vue项目element-ui的table表格单元格合并</a> 酋长哈哈 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'</div> </li> <li><a href="/article/1835450384655675392.htm" title="Vue中table合并单元格用法" target="_blank">Vue中table合并单元格用法</a> weixin_30613343 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> 苹果酱0567 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/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><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/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>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835443569528238080.htm" title="Vue( ElementUI入门、vue-cli安装)" target="_blank">Vue( ElementUI入门、vue-cli安装)</a> m0_l5z <a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435885760442368.htm" title="vue+el-table 可输入表格使用上下键进行input框切换" target="_blank">vue+el-table 可输入表格使用上下键进行input框切换</a> 以对_ <a class="tag" taget="_blank" href="/search/vue%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">vue学习记录</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei</div> </li> <li><a href="/article/1835435885122908160.htm" title="vue + Element UI table动态合并单元格" target="_blank">vue + Element UI table动态合并单元格</a> 我家媳妇儿萌哒哒 <a class="tag" taget="_blank" href="/search/element/1.htm">element</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre</div> </li> <li><a href="/article/1835431726982197248.htm" title="vue 创建项目报错：command failed: npm install --loglevel error" target="_blank">vue 创建项目报错：command failed: npm install --loglevel error</a> 那鱼、会飞 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue-cli3/1.htm">vue-cli3</a> <div>这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/cli@3.12.1npminstall-g@vue/cli@3.12.1（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835428821877223424.htm" title="计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）" target="_blank">计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）</a> java毕设程序源码王哥 <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> hai40587 <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835401975269781504.htm" title="vue render 函数详解 (配参数详解)" target="_blank">vue render 函数详解 (配参数详解)</a> 你的眼睛會笑 <a class="tag" taget="_blank" href="/search/vue2/1.htm">vue2</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>vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> 余生逆风飞翔 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835393400380157952.htm" title="VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。" target="_blank">VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。</a> 焚木灵 <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，</div> </li> <li><a href="/article/1835390752381825024.htm" title="详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因" target="_blank">详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因</a> hw_happy <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%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> <div>前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> 海淀萌狗 <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div> </li> <li><a href="/article/1835376631733121024.htm" title="Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘" target="_blank">Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘</a> 周bro <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a> <div>node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本6.9.0npminstallnpm@6.14.17-g执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases</div> </li> <li><a href="/article/1835376632366460928.htm" title="vue2实现复制,粘贴功能" target="_blank">vue2实现复制,粘贴功能</a> 周bro <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>一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> 马小蜗 <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> 红匣子实力推荐 <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835370074102394880.htm" title="【vite 自动配置路由】" target="_blank">【vite 自动配置路由】</a> CODER-V <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%9E%84%E5%BB%BA/1.htm">软件构建</a> <div>手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men</div> </li> <li><a href="/article/116.htm" title="ViewController添加button按钮解析。（翻译）" target="_blank">ViewController添加button按钮解析。（翻译）</a> 张亚雄 <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div><div class="it610-blog-content-contain" style="font-size: 14px"></div>// ViewController.m // Reservation software // // Created by 张亚雄 on 15/6/2. </div> </li> <li><a href="/article/243.htm" title="mongoDB 简单的增删改查" target="_blank">mongoDB 简单的增删改查</a> 开窍的石头 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div> 在上一篇文章中我们已经讲了mongodb怎么安装和数据库/表的创建。在这里我们讲mongoDB的数据库操作在mongo中对于不存在的表当你用db.表名他会自动统计下边用到的user是表明，db代表的是数据库添加(insert): </div> </li> <li><a href="/article/370.htm" title="log4j配置" target="_blank">log4j配置</a> 0624chenhong <a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a> <div>1) 新建java项目 2) 导入jar包，项目右击，properties—java build path—libraries—Add External jar，加入log4j.jar包。 3) 新建一个类com.hand.Log4jTest package com.hand; import org.apache.log4j.Logger; public class </div> </li> <li><a href="/article/497.htm" title="多点触摸(图片缩放为例)" target="_blank">多点触摸(图片缩放为例)</a> 不懂事的小屁孩 <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%82%B9%E8%A7%A6%E6%91%B8/1.htm">多点触摸</a> <div>多点触摸的事件跟单点是大同小异的，上个图片缩放的代码，供大家参考一下 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener</div> </li> <li><a href="/article/624.htm" title="有关浏览器窗口宽度高度几个值的解析" target="_blank">有关浏览器窗口宽度高度几个值的解析</a> 换个号韩国红果果 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>1 元素的 offsetWidth 包括border padding content 整体的宽度。 clientWidth 只包括内容区 padding 不包括border。 clientLeft = offsetWidth -clientWidth 即这个元素border的值 offsetLeft 若无已定位的包裹元素</div> </li> <li><a href="/article/751.htm" title="数据库产品巡礼：IBM DB2概览" target="_blank">数据库产品巡礼：IBM DB2概览</a> 蓝儿唯美 <a class="tag" taget="_blank" href="/search/db2/1.htm">db2</a> <div>IBM DB2是一个支持了NoSQL功能的关系数据库管理系统，其包含了对XML，图像存储和Java脚本对象表示（JSON）的支持。DB2可被各种类型的企业使用，它提供了一个数据平台，同时支持事务和分析操作，通过提供持续的数据流来保持事务工作流和分析操作的高效性。 DB2支持的操作系统 DB2可应用于以下三个主要的平台: 工作站，DB2可在Linus、Unix、Windo</div> </li> <li><a href="/article/878.htm" title="java笔记5" target="_blank">java笔记5</a> a-john <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>控制执行流程： 1，true和false 利用条件表达式的真或假来决定执行路径。例：（a==b）。它利用条件操作符“==”来判断a值是否等于b值，返回true或false。java不允许我们将一个数字作为布尔值使用，虽然这在C和C++里是允许的。如果想在布尔测试中使用一个非布尔值，那么首先必须用一个条件表达式将其转化成布尔值，例如if(a!=0)。 2，if-els</div> </li> <li><a href="/article/1005.htm" title="Web开发常用手册汇总" target="_blank">Web开发常用手册汇总</a> aijuans <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>一门技术，如果没有好的参考手册指导,很难普及大众。这其实就是为什么很多技术，非常好，却得不到普遍运用的原因。正如我们学习一门技术，过程大概是这个样子： ①我们日常工作中，遇到了问题，困难。寻找解决方案，即寻找新的技术； ②为什么要学习这门技术？这门技术是不是很好的解决了我们遇到的难题，困惑。这个问题，非常重要，我们不是为了学习技术而学习技术，而是为了更好的处理我们遇到的问题，才需要学习新的</div> </li> <li><a href="/article/1132.htm" title="今天帮助人解决的一个sql问题" target="_blank">今天帮助人解决的一个sql问题</a> asialee <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div> 今天有个人问了一个问题，如下： type AD value A </div> </li> <li><a href="/article/1259.htm" title="意图对象传递数据" target="_blank">意图对象传递数据</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%84%8F%E5%9B%BEIntent/1.htm">意图Intent</a><a class="tag" taget="_blank" href="/search/Bundle%E5%AF%B9%E8%B1%A1%E6%95%B0%E6%8D%AE%E7%9A%84%E4%BC%A0%E9%80%92/1.htm">Bundle对象数据的传递</a> <div>学习意图将数据传递给目标活动; 初学者需要好好研究的 1,将下面的代码添加到main.xml中 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/</div> </li> <li><a href="/article/1386.htm" title="oracle查询锁表解锁语句" target="_blank">oracle查询锁表解锁语句</a> bijian1013 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/object/1.htm">object</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/kill/1.htm">kill</a> <div>一.查询锁定的表如下语句，都可以查询锁定的表语句一： select a.sid, a.serial#, p.spid, c.object_name, b.session_id, b.oracle_username, b.os_user_name from v$process p, v$s</div> </li> <li><a href="/article/1513.htm" title="mac osx 10.10 下安装 mysql 5.6 二进制文件［tar.gz］" target="_blank">mac osx 10.10 下安装 mysql 5.6 二进制文件［tar.gz］</a> 征客丶 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/osx/1.htm">osx</a> <div>场景：在 mac osx 10.10 下安装 mysql 5.6 的二进制文件。环境：mac osx 10.10、mysql 5.6 的二进制文件步骤：[所有目录请从根“/”目录开始取，以免层级弄错导致找不到目录] 1、下载 mysql 5.6 的二进制文件，下载目录下面称之为 mysql5.6SourceDir；下载地址：http://dev.mysql.com/downl</div> </li> <li><a href="/article/1640.htm" title="分布式系统与框架" target="_blank">分布式系统与框架</a> bit1129 <a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>RPC框架 Dubbo 什么是Dubbo Dubbo是一个分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，以及SOA服务治理方案。其核心部分包含: 远程通讯: 提供对多种基于长连接的NIO框架抽象封装，包括多种线程模型，序列化，以及“请求-响应”模式的信息交换方式。集群容错: 提供基于接</div> </li> <li><a href="/article/1767.htm" title="那些令人蛋痛的专业术语" target="_blank">那些令人蛋痛的专业术语</a> 白糖_ <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/SSO/1.htm">SSO</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a> <div> spring 【控制反转(IOC)/依赖注入(DI)】：由容器控制程序之间的关系，而非传统实现中，由程序代码直接操控。这也就是所谓“控制反转”的概念所在：控制权由应用代码中转到了外部容器，控制权的转移，是所谓反转。简单的说：对象的创建又容器(比如spring容器)来执行，程序里不直接new对象。 Web 【单点登录(SSO)】：SSO的定义是在多个应用系统中，用户</div> </li> <li><a href="/article/1894.htm" title="《给大忙人看的java8》摘抄" target="_blank">《给大忙人看的java8》摘抄</a> braveCS <a class="tag" taget="_blank" href="/search/java8/1.htm">java8</a> <div>函数式接口：只包含一个抽象方法的接口 lambda表达式：是一段可以传递的代码你最好将一个lambda表达式想象成一个函数，而不是一个对象，并记住它可以被转换为一个函数式接口。事实上，函数式接口的转换是你在Java中使用lambda表达式能做的唯一一件事。方法引用：又是要传递给其他代码的操作已经有实现的方法了，这时可以使</div> </li> <li><a href="/article/2021.htm" title="编程之美-计算字符串的相似度" target="_blank">编程之美-计算字符串的相似度</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> public class StringDistance { /** * 编程之美计算字符串的相似度 * 我们定义一套操作方法来把两个不相同的字符串变得相同，具体的操作方法为： * 1.修改一个字符（如把“a”替换为“b”）; * 2.增加一个字符（如把“abdd”变为“aebdd”）; * 3.删除一个字符（如把“travelling”变为“trav</div> </li> <li><a href="/article/2148.htm" title="上传、下载压缩图片" target="_blank">上传、下载压缩图片</a> chengxuyuancsdn <a class="tag" taget="_blank" href="/search/%E4%B8%8B%E8%BD%BD/1.htm">下载</a> <div>/** * * @param uploadImage --本地路径(tomacat路径) * @param serverDir --服务器路径 * @param imageType --文件或图片类型 * 此方法可以上传文件或图片.txt,.jpg,.gif等 */ public void upload(String uploadImage,Str</div> </li> <li><a href="/article/2275.htm" title="bellman-ford(贝尔曼-福特)算法" target="_blank">bellman-ford(贝尔曼-福特)算法</a> comsci <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/F%23/1.htm">F#</a> <div>Bellman-Ford算法(根据发明者 Richard Bellman 和 Lester Ford 命名)是求解单源最短路径问题的一种算法。单源点的最短路径问题是指：给定一个加权有向图G和源点s，对于图G中的任意一点v，求从s到v的最短路径。有时候这种算法也被称为 Moore-Bellman-Ford 算法，因为 Edward F. Moore zu 也为这个算法的发展做出了贡献。与迪科</div> </li> <li><a href="/article/2402.htm" title="oracle ASM中ASM_POWER_LIMIT参数" target="_blank">oracle ASM中ASM_POWER_LIMIT参数</a> daizj <a class="tag" taget="_blank" href="/search/ASM/1.htm">ASM</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/ASM_POWER_LIMIT/1.htm">ASM_POWER_LIMIT</a><a class="tag" taget="_blank" href="/search/%E7%A3%81%E7%9B%98%E5%B9%B3%E8%A1%A1/1.htm">磁盘平衡</a> <div>ASM_POWER_LIMIT 该初始化参数用于指定ASM例程平衡磁盘所用的最大权值，其数值范围为0~11，默认值为1。该初始化参数是动态参数，可以使用ALTER SESSION或ALTER SYSTEM命令进行修改。示例如下： SQL>ALTER SESSION SET Asm_power_limit=2; </div> </li> <li><a href="/article/2529.htm" title="高级排序:快速排序" target="_blank">高级排序:快速排序</a> dieslrae <a class="tag" taget="_blank" href="/search/%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F/1.htm">快速排序</a> <div> public void quickSort(int[] array){ this.quickSort(array, 0, array.length - 1); } public void quickSort(int[] array,int left,int right){ if(right - left <= 0</div> </li> <li><a href="/article/2656.htm" title="C语言学习六指针_何谓变量的地址一个指针变量到底占几个字节" target="_blank">C语言学习六指针_何谓变量的地址一个指针变量到底占几个字节</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div># include <stdio.h> int main(void) { /* 1、一个变量的地址只用第一个字节表示 2、虽然他只使用了第一个字节表示，但是他本身指针变量类型就可以确定出他指向的指针变量占几个字节了 3、他都只存了第一个字节地址，为什么只需要存一个字节的地址，却占了4个字节，虽然只有一个字节，但是这些字节比较多，所以编号就比较大， </div> </li> <li><a href="/article/2783.htm" title="phpize使用方法" target="_blank">phpize使用方法</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>phpize是用来扩展php扩展模块的，通过phpize可以建立php的外挂模块,下面介绍一个它的使用方法,需要的朋友可以参考下安装（fastcgi模式）的时候，常常有这样一句命令：代码如下: /usr/local/webserver/php/bin/phpize 一、phpize是干嘛的？ phpize是什么？ phpize是用来扩展php扩展模块的，通过phpi</div> </li> <li><a href="/article/2910.htm" title="Java虚拟机学习 - 对象引用强度" target="_blank">Java虚拟机学习 - 对象引用强度</a> shuizhaosi888 <a class="tag" taget="_blank" href="/search/JAVA%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">JAVA虚拟机</a> <div> 本文原文链接：http://blog.csdn.net/java2000_wl/article/details/8090276 转载请注明出处！无论是通过计数算法判断对象的引用数量，还是通过根搜索算法判断对象引用链是否可达，判定对象是否存活都与“引用”相关。引用主要分为：强引用(Strong Reference)、软引用(Soft Reference)、弱引用(Wea</div> </li> <li><a href="/article/3037.htm" title=".NET Framework 3.5 Service Pack 1（完整软件包）下载地址" target="_blank">.NET Framework 3.5 Service Pack 1（完整软件包）下载地址</a> happyqing <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/%E4%B8%8B%E8%BD%BD/1.htm">下载</a><a class="tag" taget="_blank" href="/search/framework/1.htm">framework</a> <div> Microsoft .NET Framework 3.5 Service Pack 1（完整软件包） http://www.microsoft.com/zh-cn/download/details.aspx?id=25150 Microsoft .NET Framework 3.5 Service Pack 1 是一个累积更新，包含很多基于 .NET Framewo</div> </li> <li><a href="/article/3164.htm" title="JAVA定时器的使用" target="_blank">JAVA定时器的使用</a> jingjing0907 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E5%99%A8/1.htm">定时器</a> <div>1、在应用开发中，经常需要一些周期性的操作，比如每5分钟执行某一操作等。对于这样的操作最方便、高效的实现方式就是使用java.util.Timer工具类。 privatejava.util.Timer timer; timer = newTimer(true); timer.schedule( newjava.util.TimerTask() { public void run() </div> </li> <li><a href="/article/3291.htm" title="Webbench" target="_blank">Webbench</a> 流浪鱼 <a class="tag" taget="_blank" href="/search/webbench/1.htm">webbench</a> <div>首页下载地址 http://home.tiscali.cz/~cz210552/webbench.html Webbench是知名的网站压力测试工具，它是由Lionbridge公司（http://www.lionbridge.com）开发。 Webbench能测试处在相同硬件上，不同服务的性能以及不同硬件上同一个服务的运行状况。webbench的标准测试可以向我们展示服务器的两项内容：每秒钟相</div> </li> <li><a href="/article/3418.htm" title="第11章动画效果（中）" target="_blank">第11章动画效果（中）</a> onestopweb <a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB/1.htm">动画</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3545.htm" title="windows下制作bat启动脚本." target="_blank">windows下制作bat启动脚本.</a> sanyecao2314 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a><a class="tag" taget="_blank" href="/search/bat/1.htm">bat</a> <div>java -classpath C:\dwjj\commons-dbcp.jar;C:\dwjj\commons-pool.jar;C:\dwjj\log4j-1.2.16.jar;C:\dwjj\poi-3.9-20121203.jar;C:\dwjj\sqljdbc4.jar;C:\dwjj\voucherimp.jar com.citsamex.core.startup.MainStart </div> </li> <li><a href="/article/3672.htm" title="Java进行RSA加解密的例子" target="_blank">Java进行RSA加解密的例子</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>加密是保证数据安全的手段之一。加密是将纯文本数据转换为难以理解的密文；解密是将密文转换回纯文本。　　数据的加解密属于密码学的范畴。通常，加密和解密都需要使用一些秘密信息，这些秘密信息叫做密钥，将纯文本转为密文或者转回的时候都要用到这些密钥。　　对称加密指的是发送者和接收者共用同一个密钥的加解密方法。　　非对称加密(又称公钥加密)指的是需要一个私有密钥一个公开密钥，两个不同的密钥的</div> </li> <li><a href="/article/3799.htm" title="Android_ViewStub" target="_blank">Android_ViewStub</a> 阿尔萨斯 <a class="tag" taget="_blank" href="/search/ViewStub/1.htm">ViewStub</a> <div>public final class ViewStub extends View java.lang.Object android.view.View android.view.ViewStub 类摘要： ViewStub 是一个隐藏的，不占用内存空间的视图对象，它可以在运行时延迟加载布局资源文件。当 ViewSt</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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>

【Vue】关于 v-model，你想要的全部知识点，都在这儿了

一、v-model 的使用原理

一、`v-model` 的使用原理