[今日白记]Vue基础的学习笔记（一）

短命女 2022-01-20 08:11 240阅读 0赞

###  ###

> \#不知道写点啥，那就开❀❀吧\#  
>

本文章仅用作于个人学习笔记（我又来了！）复制代码

### 前言： ###

这是一个Vue指令非常，特别，极其?和基础的笔记。文中错误可能较多.ps：点击副标题可查看对应的官方文档。

### [\#v-cloak][v-cloak] ###

*  用于解决页面加载时vue标签或指令出现闪烁的问题。如加载时出现\{ \{item.id\}\}。
 *  v-cloak可直接在el挂载的标签上添加，如添加后不起作用，可能是v-cloak的display:none层级更高的覆盖掉了。加个!important提高一下层级。

html
    <div id="app" v-cloak>
        {
        {item.id}}
    </div>
    
    css
    [v-cloak] {
        display: none!important;
    }复制代码

### [\#v-text][v-text] ###

*  v-text用于操作纯文本，它会替代显示对应data对象上的值（也就是说里面的内容会被覆盖成data对象上的值），简写为\{ \{text\}\}
 *  v-text是单向数据绑定，data对象的值变化时页面就会更新，反之不会。

<p v-text="msg">啦啦啦啦</p>
    <p>{
        {msg}}</p>复制代码

### [\#v-html][v-html] ###

*  v-html输出的是html，不同于v-text的输出纯文本（里面的内容也是会被覆盖\_(√ ζ ε:)\_  
    ）。

<div v-html='msg2'>我不要被覆盖/(ㄒoㄒ)/</div>
    
    ...
       data(){
          msg2: "<h1>v-html:来了来了(◔◡◔)</h1>"
       }
    ...复制代码

### [\#v-bind][v-bind] ###

*  v-bind是用于绑定HTML属性的指令。v-bind:要绑定的属性 , 缩写为：要绑定的属性。
 *  v-bind中可以写合法的表达式。

<h2 :title=" msg3 + '表达式' ">v-bind:title</h2>
    
    ...
       data(){
          msg3: "我是一个合法的"
       }
    ...
    复制代码

### [\#v-on][v-on] ###

*  v-on用于绑定一个事件监听器。v-on:事件 , 缩写为：@事件。
 *  可以在子组件上监听自定义事件（ [上一章有(●'◡'●)][Link 1] ）。

<button @click="show">v-on</button>
    
    ...
       data(){
          msg: "hello Vue"
       },
       methods: {
          show() {
             alert(this.msg);
          }
       }
    ...
    复制代码

### [\#事件修饰符][Link 2] ###

*  .stop 阻止事件的冒泡行为

<div class="inner" @click="divHandler">我是外层div
       <button @click="btnHandler">我是内部button</button>
    </div>
    
    ...
       data(){},
       methods: {
          divHandler() {
             console.log("触发了外层div的点击事件");
          },
          btnHandler() {
             console.log("触发了button的点击事件");
          }
       },
    ...复制代码

因为button是被外层div.ineer包裹的，所以触发button的click事件时，接下来就会触发外层div的click事件。

点击button后

给button的click事件添加.stop修饰符即可阻止默认的冒泡机制

<div class="inner" @click="divHandler">我是外层div
       <button @click.stop="btnHandler">我是内部button</button>
    </div>复制代码

点击button后

*  .prevent 阻止默认事件的发生

<div class="div">
       <a href="https://www.baidu.com/" @click.prevent="linkHandler">跳转到百度</a>
    </div>
    
    ...
       data(){},
       methods: {
          linkHandler() {
             console.log("阻止了a标签href属性的跳转");
          }
       },
    ...
    复制代码

*  .capture 实现捕获触发事件的机制

添加了.capture 修饰符的，先执行父级的函数，再执行子级的触发函数。如果都添加了，执行最外层父级的函数（人类的本质是...）

<div id="app">
       <div class="inner" @click="divHandler">我是"弟弟"（第一）层div
          <div class="sm-inner" @click.capture="smDivHandler">我是"弟中弟"（第二）层div
             <button @click="btnHandler">我是内部button</button>
          </div>
       </div>
    </div>
    
    ...
       data(){},
       methods: {
          divHandler() {
             console.log("触发了第一层div的点击事件")
          },
          btnHandler() {
             console.log("触发了button的点击事件")
          },
          smDivHandler() {
             console.log("触发了第二层div的点击事件");
          }
       },
    ...复制代码

点击button后

*  .self 实现作用在元素自身时才会触发处理函数（.stop为阻止冒泡事件， .self是跳过了冒泡和捕捉事件）

<div id="app">
       <div class="inner" @click="divHandler">我是"弟弟"（第一）层div
          <div class="sm-inner" @click.self="smDivHandler">我是"弟中弟"（第二）层div
             <button @click="btnHandler">我是内部button</button>
          </div>
       </div>
    </div>
    
    ...
       data(){},
       methods: {
          divHandler() {
             console.log("触发了第一层div的点击事件")
          },
          btnHandler() {
             console.log("触发了button的点击事件")
          },
          smDivHandler() {
             console.log("触发了第二层div的点击事件");
          }
       },
    ...
    复制代码

点击button后，”弟中弟“（第二层）div不会被触发（跳过了冒泡），第一层div触发冒泡机制

点击”弟中弟“（第二层）后，第一层div触发冒泡机制

*  .once 点击事件将只会触发一次

<a v-on:click.once="doThis"></a>复制代码

### [\#v-model（点击查看官方文档的完整介绍= =）][v-model_] ###

*  v-model可以实现表单元素（ <input> , <textarea> , <select> ）和 Model中数据的双向数据绑定。也就是说，我们在<input type="text">中输入什么数据，对应的view中就会更新成什么数据？

<div id="app">
       <input v-model="data2" type="text" />
       <p>{
        {data2}}</p>
    </div>
    
    ...
       data: {
          data2: ""
       }
    ...
    复制代码

*  .lazy

当给v-model加上修饰符 .lazy时，input框的值改变时并不会使p标签中的内容改变。转为当input失去焦点时才会更新p的内容，这就相当于双向数据绑定失去作用了。

*  .trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。

### [\#v-for 循环数组][v-for] ###

*  v-for 指令根据一组数组的选项列表进行渲染。
 *  v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
 *  v-for还支持一个可选的第二个参数为当前项的索引。

<div id="app">
       <ul>
          <li v-for="(item,index) in list">
             姓名:{
        {item.name}} --- 学号:{
        {item.number}} --- 索引值是:{
        {index}}
          </li>
       </ul>
    </div>
    
    ...
       data: {
          list: [
             { number: 201801, name: "张三" },
             { number: 201819, name: "李四" },
             { number: 201829, name: "CC" },
          ]
       }
    ...
    复制代码

### [\#v-for 循环对象][v-for 1] ###

*  你也可以用 v-for 通过一个对象的属性来迭代。
 *  提供的第一个参数仍是数组元素迭代的别名，第二个参数为键值（key），第三个参数为索引。

`数组下是没有键值的，所以第二个参数是索引。对象中有键值，键值在第二个参数的位置，索引则在第三个参数的位置。`

<div id="app">
       <ul>
          <li v-for="(item,key,index) in list2">
             值是:{
        {item}} --- 键是:{
        {key}} --- 索引值是:{
        {index}}
          </li>
       </ul>
    </div>
    
    ...
       data: {
          list2: {
             id: 0,
             name: "张三",
             profession: "student"
          }
       }
    ...复制代码

### \#v-for 迭代数字 ###

*  in 后面除了可以放数组，对象，还可以放数字。
 *  值 item 是从1开始的。  
    
    
        <div id="app">
           <ul>
              <li v-for="item in 7">这是第 {
              {item}} 次循环</li>
           </ul>
        </div>
        
        ...
           data: {}
        ...复制代码

### [\#v-for中的key键值][v-for_key] ###

*  为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。
 *  key属性的类型只能是 string 或 number 类型（使用对象或者数组之类的非原始类型值作为v-for的key并没有作用）。
 *  key必须使用 v-bind 属性绑定的形式指定key的值。

举个?的? (⊙~⊙饿了)：

<div id="app">
       <div>
          id:<input v-model="id" type="text">
          content:<input v-model="content" type="text">
          <button @click="handleSubmit">添加</button>
       </div>
       <p v-for="item in list">
          <input type="checkbox">
          {item.id}} --- {
        {item.content}}
       </p>
    </div>
    
    ...
       data: {
          id: "",
          content: "",
          list: [
             { id: 0, content: "便签一" },
             { id: 1, content: "便签二" },
             { id: 2, content: "便签三" },
             {id: 3, content: "便签四" },
          ]
       },
       methods: {
          handleSubmit() {
             // unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
             this.list.unshift({ id: this.id, content: this.content })
          }
       },
    ...复制代码

但我们选中 “1---便签二”的checkbox时，往列表再添加一条新的数据时：

可以看到，checkbox选中的不是 之前选中的 “1---便签二（添加新数据前索引为1）”，而是名为“0---便签一（添加新数据后索引为1）”的checkbox。

现在我们给每次循环指定一个key，key为循环里的唯一属性id。

<p v-for="item in list" :key="item.id">
       <input type="checkbox">
       {
        {item.id}} --- {
        {item.content}}
    </p>复制代码

再次选中“1---便签二”的checkbox并往列表添加一条新数据

问题解决了！ (◔◡◔)

### [\#v-show][v-show] ###

*  根据表达式之真假值，切换元素的 display CSS 属性。
 *  当条件变化时该指令触发过渡效果。
 *  有较高的初始渲染性能。
 *  如果元素可能永远不会显示出来，则推荐使用v-if（比如悬浮的关于框？不懂瞎扯的）。

<div id="app">
       <button @click="flag=!flag">切换显示隐藏</button>
       <h1 v-show="flag">这是一条v-show控制的元素</h1>
    </div>
    
    ...
       data: {
          flag: false
       }
    ...复制代码

### [\#v-if][v-if] ###

*  根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
 *  有较高的切换性能
 *  如果一个元素需要频繁的切换，最好不要用v-if

也就是说v-if每次都会重新删除或创建元素，当一个元素需要频繁的切换时，因为每次的重新删除和创建元素，会产生较高的切换性能。

<div id="app">
       <button @click="flag=!flag">切换显示隐藏</button>
       <h1 v-if="flag">这是一条v-if控制的元素</h1>
    </div>
    
    ...
       data: {
          flag: false
       }
    ...复制代码

### [Class 与 Style 绑定（详细还是看官方文档吧= =）][Class _ Style _] ###

这里只记一个用得比较多？的例子

*  [绑定 HTML Class][HTML Class]

[  
][Link 3]

*  [绑定内联样式][Link 3]

<div id="app">
       <div v-bind:style="styleObject">绑定内联样式</div>
    </div>
    
    ...
       data: {
          styleObject: {
             color: 'red',
             fontSize: '13px'
          }
       }
    ...复制代码

\-------END-------

放张从 [@我笑酸斋][Link 4] 里偷来的图(●'◡'●)

[v-cloak]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23v-cloak
[v-text]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23v-text
[v-html]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23v-html
[v-bind]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23v-bind
[v-on]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23v-on
[Link 1]: https://juejin.im/post/5ca1a6d5e51d4507de4234a3
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fevents.html%23%25E4%25BA%258B%25E4%25BB%25B6%25E4%25BF%25AE%25E9%25A5%25B0%25E7%25AC%25A6
[v-model_]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fforms.html
[v-for]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Flist.html%23%25E7%2594%25A8-v-for-%25E6%258A%258A%25E4%25B8%2580%25E4%25B8%25AA%25E6%2595%25B0%25E7%25BB%2584%25E5%25AF%25B9%25E5%25BA%2594%25E4%25B8%25BA%25E4%25B8%2580%25E7%25BB%2584%25E5%2585%2583%25E7%25B4%25A0
[v-for 1]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Flist.html%23%25E4%25B8%2580%25E4%25B8%25AA%25E5%25AF%25B9%25E8%25B1%25A1%25E7%259A%2584-v-for
[v-for_key]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Flist.html%23key
[v-show]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fconditional.html%23v-show
[v-if]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fconditional.html%23v-if
[Class _ Style _]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fclass-and-style.html
[HTML Class]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fclass-and-style.html%23%25E7%25BB%2591%25E5%25AE%259A-HTML-Class
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fclass-and-style.html%23%25E7%25BB%2591%25E5%25AE%259A%25E5%2586%2585%25E8%2581%2594%25E6%25A0%25B7%25E5%25BC%258F
[Link 4]: https://juejin.im/user/5ca23d326fb9a05e5516390c