【Vue】学习笔记二：基本属性使用总结

你的名字 2021-09-20 15:10 240阅读 0赞

### 文章目录 ###

*   *  \`基本的代码结构\`和\`插值表达式\`、\`v-cloak\`
     *  \`v-text\`和\`v-html\`的区别
     *  \`v-bind\`——属性绑定
     *  \`跑马灯效果\`demo
     *  \`v-on\`和\`事件修饰符\`
     *  \`v-model\`——\`双向数据绑定\`
     *  计算器demo——v-model双向数据绑定示例
     *  \`v-for\` & \`key\`——遍历/迭代
     *  \`v-if\` & \`v-show\`——显示、隐藏

## `基本的代码结构`和`插值表达式`、`v-cloak` ##

**基本代码结构**

<!DOCTYPE html>
    <html lang="en">
    <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          
          <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
          
          
          <div id="app">
            <p>{
       { msg }}</p>
          </div>
    
          <script> // 2. 创建一个Vue的实例，这个实例是MVVM中的调度器 // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数 var vm = new Vue({ el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域 // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的 data: { // data 属性中，存放的是 el 中要用到的数据 msg: 'study Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，而且当数据改变页面数据自动被渲染，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】 } }) </script>
    </body>
    </html>

**插值表达式**  
插值表达式（\{ \{ \}\}）会被vue对象的值替换, 当vue对象的数据改变后插值表达式的值也会改变.

**v-cloa k**  
v-cloak:用来暂时隐藏因浏览器加载而显示的传值表达式，待到vue加载完毕会取消这个属性，添加这个属性用来解决闪烁问题.

## `v-text`和`v-html`的区别 ##

*  v-text:用来操作标签中的文本，不会把文本解析成HTML元素
 *  v-heml：会把文本解析成HTML元素

## `v-bind`——属性绑定 ##

1.  直接使用指令`v-bind`，是vue中提供的用于绑定属性的命令
2.  使用简化指令`:`
3.  在绑定的时候，拼接绑定内容：`:title="btnTitle + ', 这是追加的内容'"`  
    注意:`绑定属性如果有多个单词组成, 中间使用-分隔, 否则赋值属性会出错`, 这是因为dom属性不区分大小写, 但是JavaScript/vue区分.

## `跑马灯效果`demo ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      
      <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">
    
        <h4>{
       { msg }}</h4>
    
      </div>
      
      <script> // 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象 var vm = new Vue({ el: '#app', data: { msg: '猥琐发育，别浪~~！', intervalId: null // 在data上定义 定时器Id }, methods: { lang() { // 获取到头的第一个字符 if (this.intervalId != null) return; this.intervalId = setInterval(() => { var start = this.msg.substring(0, 1) // 获取到 后面的所有字符 var end = this.msg.substring(1) // 重新拼接得到新的字符串，并赋值给 this.msg this.msg = end + start }, 400) }, stop() { clearInterval(this.intervalId) // 每当清除了定时器之后，需要重新把 intervalId 置为 null this.intervalId = null; } } }) // 思路： // 1. 给 【浪起来】 按钮，绑定一个点击事件 v-on @ // 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可； // 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去； </script>
    </body>
    
    </html>

## `v-on`和`事件修饰符` ##

*  v-on: 用来绑定事件, 缩写是@

注意:`绑定的事件名不可用-分隔, dom事件名属性符合JavaScript标识符命名规则--区分大小写且不可包含"-"符`

**事件修饰符：**

*  .native 组件本地化，使组件可以绑定事件
 *  .stop 阻止冒泡
 *  .prevent 阻止默认事件,例如a标签, input的submit的提交时间等等
 *  .capture 添加事件侦听器时使用事件捕获模式, 带此事件修饰符的事件会优先触发
 *  .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
 *  .once 使事件只触发一次

**事件修饰符使用示例:**

ps:这些事件修饰命令可以链式写多个, 即**一次写多个**

## `v-model`——`双向数据绑定` ##

**v-model：**

*  用来实现双向数据绑定
 *  绑定的元素是表单元素，例：input、select、checkbox、textarea

**使用示例：**

//和v-on和v-bind绑定数据不一样
    <input type="text" v-model="msg">

## 计算器demo——v-model双向数据绑定示例 ##

**HTML 代码结构**

**Vue实例代码：**

// 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({ 
              el: '#app',
              data: { 
                    n1: 0,
                    n2: 0,
                    result: 0,
                    opt: '0'
              },
              methods: { 
                    getResult() { 
                      switch (this.opt) { 
                        case '0':
                              this.result = parseInt(this.n1) + parseInt(this.n2);
                              break;
                        case '1':
                              this.result = parseInt(this.n1) - parseInt(this.n2);
                              break;
                        case '2':
                              this.result = parseInt(this.n1) * parseInt(this.n2);
                              break;
                        case '3':
                              this.result = parseInt(this.n1) / parseInt(this.n2);
                              break;
                      }
                }
              }
        });

## `v-for` & `key`——遍历/迭代 ##

**1. 迭代数组**

**2. 迭代对象中的属性**

<div v-for="(val, key, i) in userInfo">{
       {val}} --- {
       {key}} --- {
       {i}}</div>

**3. 迭代数字**

注意：如果单纯迭代数字的话，**i是从1开始的**。

**`v-for的一些注意事项`**

> 2.2.0+ 的版本里，**当在组件中使用** v-for 时，**key 是必须的**。如果不加则在操作的时候浏览器可能**分不清**绑定数据的标签。

// key 值应为 数字类型 或 字符串类型
    <p v-for="item in list"  :key"item.id">

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “**就地复用**” 策略。如果数据项的顺序被改变，Vue将**不是移动 DOM 元素来匹配数据项的顺序**， 而是**简单复用此处每个元素**，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，**以便它能跟踪每个节点的身份，从而重用和重新排序现有元素**，2.x版本后需要为每项提供一个唯一 key 属性。

## `v-if` & `v-show`——显示、隐藏 ##