Vue的基本使用与指令

博主： xiaoxiao
发布时间：2021 年 11 月 14 日
1939 次浏览
2 条评论
4977字数
分类： Vue 笔记 JavaScript 前端

<h2>一、推荐大家安装的 VScode 中的 Vue 插件</h2><button class=" btn m-b-xs btn-info " onclick='window.open("https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets","_blank")'>Vue 3 Snippets</button> <button class=" btn m-b-xs btn-info " onclick='window.open("https://marketplace.visualstudio.com/items?itemName=octref.vetur","_blank")'>Vetur</button><h2>二、vue 的基本使用</h2><ol><li>导入 vue.js 的 script 脚本文件</li><li>在页面中声明一个将要被 vue 所控制的 DOM 区域</li><li>创建 vm 实例对象（vue 实例对象）<pre><code>&lt;div id=&quot;app&quot;&gt;{{url}}&lt;/div&gt;
&lt;script src=&quot;../vue-2.6.12.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
 const vm = new Vue({
 el: '#app',//el指定选择器

data: {
 url: 'www.xxhzm.cn'
 }
 })
&lt;/script&gt;
</code></pre></li></ol><h2>三、vue 的指令与过滤器</h2>指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。 vue 中的指令按照不同的用途可以分为如下 6 大类：<ol><li>内容渲染指令</li><li>属性绑定指令</li><li>事件绑定指令</li><li>双向绑定指令</li><li>条件渲染指令</li><li>列表渲染指令</li></ol>注意：指令是 vue 开发中最基础、最常用、最简单的知识点。3.1 内容渲染指令 内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个： v-text {{ }} v-htmlv-text用法示例： <img src="https://www.xxhzm.cn/usr/uploads/2021/11/2770277749.png" alt="1.png" title="1.png"style="">{{ }} 语法 vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达 式（英文名为：Mustache）。 用法示例： <img src="https://www.xxhzm.cn/usr/uploads/2021/11/2905230863.png" alt="2.png" title="2.png"style="">v-html v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素， 则需要用到 v-html 这个指令 <img src="https://www.xxhzm.cn/usr/uploads/2021/11/13234351.png" alt="3.png" title="3.png"style="">3.2 属性绑定指令如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。用法示例如下： <img src="https://www.xxhzm.cn/usr/uploads/2021/11/3626318513.png" alt="4.png" title="4.png"style=""> 由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。注意：原生 DOM 对象有 onclick、oninput、onkeyup、onmouseover 等原生事件，替换为 vue 的事件绑定形式后， 分别为：v-on:click、v-on:input、v-on:keyup、v-on:mouseover3.3 事件绑定指令 通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明： <img src="https://www.xxhzm.cn/usr/uploads/2021/11/1538281624.png" alt="5.png" title="5.png"style="">由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）。在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参，示例代码如下： <img src="https://www.xxhzm.cn/usr/uploads/2021/11/2606482466.png" alt="6.png" title="6.png"style="">3.3.1 按键修饰符 在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如:<pre><code> &lt;div id=&quot;app&quot;&gt;
 &lt;input type=&quot;text&quot; @keyup.enter=&quot;enter&quot;&gt;
 &lt;input type=&quot;text&quot; @keyup.esc=&quot;esc&quot;&gt;
 &lt;/div&gt;
 &lt;script&gt;
 const vm = new Vue({
 el: '#app',
 methods: {
 enter() {
 console.log('你按到了enter')
 },
 esc() {
 console.log('你按到了esc')
 }
 }

})
</code></pre>在第一个表单内按enter键就会输出你按到了enter，第二个esc同上3.4 双向绑定指令vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据例子：<pre><code>&lt;div id=&quot;app&quot;&gt;
 &lt;p v-model=&quot;username&quot;&gt;{{ username }}&lt;/p&gt;
 &lt;input type=&quot;text&quot; v-model=&quot;username&quot;&gt;

&lt;/div&gt;
&lt;script src=&quot;../vue-2.6.12.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
 const vm = new Vue({
 el: '#app',
 data: {
 username: '小小孩子们'
 }
 })
</code></pre>在输入框内更改内容p标签会同步变更 input select textarea 都可以使用v-model3.5 条件渲染指令 条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：<ol><li>v-if</li><li>v-show</li></ol><img src="https://www.xxhzm.cn/usr/uploads/2021/11/895078567.jpg" alt="1.jpg" title="1.jpg"style=""> <img src="https://www.xxhzm.cn/usr/uploads/2021/11/2875872587.jpg" alt="2.jpg" title="2.jpg"style="">v-if 和 v-show 的区别 实现原理不同： v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏 v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏性能消耗不同： v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此： 如果需要非常频繁地切换，则使用 v-show 较好 如果在运行时条件很少改变，则使用 v-if 较好但实际开发中基本都使用v-if使用v-if判断成绩 <img src="https://www.xxhzm.cn/usr/uploads/2021/11/3059877724.jpg" alt="3.jpg" title="3.jpg"style=""> 演示地址:<a href="https://www.xxhzm.cn/vue/day1/v-if.html">https://www.xxhzm.cn/vue/day1/v-if.html</a>3.6 循环渲染指令 vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使 用 item in items 形式的特殊语法，其中：<ol><li>items 是待循环的数组</li><li>item 是被循环的每一项</li></ol>v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items，示例代码如下：<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3a6ca14c6e0ae52121270482deca71a621" aria-expanded="true"><div class="accordion-toggle">代码

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3a6ca14c6e0ae52121270482deca71a621" class="collapse collapse-content"><pre><code> &lt;div id=&quot;app&quot;&gt;
 &lt;table class=&quot;table table-bordered table-hover&quot;&gt;
 &lt;thead&gt;
 &lt;th&gt;索引&lt;/th&gt;
 &lt;th&gt;ID&lt;/th&gt;
 &lt;th&gt;姓名&lt;/th&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
 &lt;tr v-for=&quot;(item,index) in list&quot;&gt;
 &lt;td&gt;{{ index }}&lt;/td&gt;
 &lt;td&gt;{{ item.id }}&lt;/td&gt;
 &lt;td&gt;{{ item.name }}&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/div&gt;

&lt;script src=&quot;../vue-2.6.12.js&quot;&gt;&lt;/script&gt;
 &lt;script&gt;
 const vm = new Vue({
 el: '#app',
 data: {
 list: [{
 id: 1,
 name: '张三'
 }, {
 id: 2,
 name: '李四'
 }, {
 id: 3,
 name: '王五'
 }]
 }
 })
</code></pre></div></div></div> <img src="https://www.xxhzm.cn/usr/uploads/2021/11/4187476853.jpg" alt="5.jpg" title="5.jpg"style=""> <img src="https://www.xxhzm.cn/usr/uploads/2021/11/1134046851.jpg" alt="4.jpg" title="4.jpg"style="">注意：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist使用 key 维护列表的状态 当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种 默认的性能优化策略，会导致有状态的列表无法被正确更新。 为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲 染的性能。此时，需要为每项提供一个唯一的 key 属性：key 的注意事项<ol><li>key 的值只能是字符串或数字类型</li><li>key 的值必须具有唯一性（即：key 的值不能重复）</li><li>建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）</li><li>使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）</li><li>建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）</li></ol>示例：<pre><code> &lt;!-- 官方建议，只要用到了v-for指令，那么一点要绑定一个 :key 属性 --&gt;
 &lt;!-- 而且，尽量把id作为key值 --&gt;
 &lt;!-- 官方对key的值类型是有要求的 key的值只能是字符串或数字类型 --&gt;
 &lt;!-- key的值千万不能重复，否则会终端进行报错 Duplicate keys detected --&gt;
 &lt;tr v-for=&quot;(item , index) in list&quot; :key=&quot;item.id&quot;&gt;
 &lt;td&gt;{{ index }}&lt;/td&gt;
 &lt;td&gt;{{ item.id }}&lt;/td&gt;
 &lt;td&gt;{{ item.name }}&lt;/td&gt;
 &lt;/tr&gt;

</code></pre>