2020-06-16 Vue

指令-v-bind绑定class

作用：操作类名

想法：class属性是由多个类组成，使用对象或者数组

绑定对象：

语法：<div :class="{类名:是否添加该类名,...}"></div>
例如：<div :class="{btn:true,red:false}"></div>

    <style>
      .bg{
        background: pink;
      }
      .red {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 基本写法 -->
      <!-- <div :class="{bg:false,red:false}">使用对象操作类名</div> -->
      <!-- 通过数据来控制 单独控制-->
      <!-- <div :class="{bg:hasBg,red:hasRed}">使用对象操作类名</div> -->
      <!-- 通过数据来控制 完整控制 -->
      <button @click="classObject.bg=true">加bg</button>
      <button @click="classObject.red=true">加red</button>
      <div :class="classObject">使用对象操作类名</div>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          // hasBg: false,
          // hasRed: false
          classObject: {
            bg: false,
            red: false
          }
        },
        methods: {}
      })
    </script>
  </body>

绑定数组：

语法：<div :class="['类名1','类名2']"></div>
例子：<div :class="['bg','red']"></div>

      <!-- 基本写法 -->
      <!-- <div :class="['bg','red']">使用数组操作类名</div> -->
      <button @click="classArray.push('bg')">加bg</button>
      <button @click="classArray.push('red')">加red</button>
      <div :class="classArray">使用数组操作类名</div>

        data: {
          // hasBg: false,
          // hasRed: false
          classObject: {
            bg: false,
            red: false
          },
+          classArray: []
        },

补充：

如果既有 class 又有 :class 是什么效果
class是默认类名，：class产生的类名会进行合并。

总结：

v-bind绑定class可以使用对象可以使用数组进行操作。
:class="{类名：是否加类名}"
:class="['类名']"

指令-v-bind绑定style

作用：通过vue的方式动态修改行内样式，也就是style属性。

想法：style属性是由多个css样式组成的，可使用对象，可使用数组。

使用对象绑定：

语法：<div :style="{color:'red',fontSize:'20px'}" ></div>
- 如果属性中包含 - 符号
  - 'font-size' 字符表示
  - fontSize 遵循驼峰

    <div id="app">
      <!-- 基本写法 -->
      <!-- <div :style="{color:'red',fontSize:'20px'}">使用对象绑定style</div> -->
      <!-- 动态绑定 -->
      <button @click="objectStyle.color='pink'">加bg</button>
      <button @click="objectStyle.fontSize='100px'">加red</button>
      <div :style="objectStyle">使用对象绑定style</div>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          // 对象style样式
          objectStyle: {color:'red',fontSize:'20px',backgroundColor:'none'}
        },
        methods: {}
      })
    </script>

使用数组绑定：

语法：<div :style="[{color:'red'},{fontSize:'20px'}]" ></div>
如果属性中包含 - 符号
- 'font-size' 字符表示
- fontSize 遵循驼峰

      <!-- 基本写法 -->
      <!-- <div :style="[{color:'blue'},{fontSize:'30px'}]">使用数组绑定style</div> -->
      <!-- 动态绑定 -->
      <button @click="arrayStyle.push({color:'blue'})">加颜色</button>
      <button @click="arrayStyle.push({fontSize:'30px'})">加字体大小</button>
      <div :style="arrayStyle">使用数组绑定style</div>

        data: {
          // 对象style样式
          objectStyle: {color:'red',fontSize:'20px',backgroundColor:'none'},
          // 数组style样式
+          arrayStyle: []
        },

疑问：

标签上同时存在 style :style 结果是？
如果有一样的样式，会发生覆盖，不同的就追加。

总结：写法

:style="{csss属性:css属性值,...}"
:style="[{csss属性:css属性值,...}]"
css属性值最好遵循驼峰命名，或者用引号包起来。

指令-v-model

1、知道v-model的语法糖原理

双向：
- 数据到视图（把data中的数据赋值给表单元素） M->V
- 视图到数据（当表单元素的内容发生改变的时候，获取改变的值修改data中的数据） V->M
  不使用v-model实现双向绑定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <!-- 不使用v-model -->
      <!-- 1. data中数据赋值给表单元素  v-bind:value="msg" -->
      <!-- 2. 当表单元素值改变后，获取其值去修改data中的数据-->
      <!-- 2.1 使用input事件监听值改变 -->
      <!-- 2.2 获取值通过dom对象获取value属性值 -->
      <!-- 2.3 把最新的值去修改data中的数据-->
      <input type="text" :value="msg" @input="msg=$event.target.value">
      <!-- 总结：v-model的语法糖原理是 使用:value赋值，使用@input改值 -->
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hi vue'
        },
        methods: {
          // fn (e) {
          //   // e.target 是事件触发源  当前的input标签
          //   // e.target.value 就是输入的值
          //   // console.log(e.target.value)
          //   this.msg = e.target.value
          // }
        }
      })
    </script>
  </body>
</html>

总结：v-model的语法糖原理是使用:value赋值，使用@input改值

2、其他表单元素如何进行绑定

输入框
下拉框
复选框
单选框
文本域

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- 输入框 -->
      <input type="text" v-model="str">
      <hr>
      <!-- 下拉框 -->
      <select v-model="subject">
        <!-- :value目的是让数值解析 number -->
        <option :value="1">前端</option>
        <option :value="2">java</option>
        <option :value="3">UI</option>
      </select>
      <hr>
      <!-- 复选框 -->
      <!-- 1. 单个复选框  表示布尔类型的值  true 选中 false 不选中 -->
      <input type="checkbox" v-model="isChecked">
      <hr>
      <!-- 2. 多个复选框 -->
      <input type="checkbox" value="book" v-model="hobby"> 书籍
      <input type="checkbox" value="ball" v-model="hobby"> 球类
      <input type="checkbox" value="game" v-model="hobby"> 游戏
      <hr>
      <!-- 单选框 -->
      <input type="radio" value="男" v-model="gender"> 男
      <input type="radio" value="女" v-model="gender"> 女
      <!-- 文本域 -->
      <hr>
      <textarea v-model="text"></textarea>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          str: '输入框',
          subject: '',
          isChecked: false,
          hobby: [],
          gender: '男',
          text: '文本域'
        },
        methods: {}
      })
    </script>
  </body>
</html>

注意：多个复选框绑定的值是数组

指令-v-cloak

问题：模板（视图）中会使用插值表达式，在vue没有解析前{{}}，解析后才是正常的内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <h1>{{msg}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
      // 思考：先让模板隐藏，当解析完毕后显示
      // 指令：v-cloak给容器添加，当解析完毕后v-cloak指令被移除。

      const vm = new Vue({
        el: '#app',
        data: {
          msg: '你好'
        },
        methods: {}
      })
    </script>
  </body>
</html>

总结：

v-cloak指令在解析后会移除
写一个隐藏样式

      [v-cloak] {
        display: none;
      }

指令-v-once

认知：

在模板中使用一个数据，如果有多处使用这个数据，当数据发生变化的时候，所有使用数据的位置都会更新。
可以让某一次内容只渲染一次

场景：

计数器（每点一次加一），显示初始值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <div v-once>初始值：{{count}}</div>
      <div>累加值：{{count}}</div>
      <button @click="count++">加一</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          count: 100
        },
        methods: {}
      })
    </script>
  </body>
</html>

总结：v-once让某一处只渲染一次，不受数据改变的影响。

vue定义过滤器

目的：掌握使用过滤器完成常见的数据格式转换

作用：

在插值表达式中使用，可以对输出的内容进行格式的转换。

定义：

全局定义（在任何vue实例管理的视图中都可使用）
- 语法 Vue.filter('过滤器名称',处理格式函数(val){ //val就行需要转换的值 //对val进行处理 //处理好的数据return出去即可 })
局部定义（仅仅在当前定义过滤器的vue实例中使用）
- 语法 new Vue({filters:{'过滤器名称':处理格式函数(val){ //val就行需要转换的值 //对val进行处理 //处理好的数据return出去即可 }}})

使用：

模板中进行使用 {{数据字段|过滤器名称}}

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- 输出十位数的编号，不够十位往前补0 -->
      <h1>{{num|formatNum(20)}}</h1>
      <h1>{{num|privateFilter}}</h1>
    </div>
    <hr>
    <div id="app2">
      <h1>{{count|formatNum}}</h1>
      <!-- <h1>{{count|privateFilter}}</h1> -->
    </div>
    <script src="./vue.js"></script>
    <script>

      // 全局过滤器
      // 处理函数(默认参数，自己传参) 补齐几位自己决定
      Vue.filter('formatNum',(val, total) => {
        // 如果没有传参默认十位
        total = total || 10
        // val 使用过滤器的时候 | 前的js表达式的执行结果
        // | 术语：管道符
        // 1. 处理格式
        // 2. 返回结果（在插值表达式中输出）
        // 字符串的padStart(得到几位字符串,不够位数补齐的字符) 往前补齐
        // 字符串的padEnd(得到几位字符串,不够位数补齐的字符) 往后补齐
        return String(val).padStart(total, 0)
      })  

      const vm = new Vue({
        el: '#app',
        data: {
          num: 101
        },
        methods: {},
        // 局部过滤器
        filters: {
          'privateFilter': (val) => {
            // 逻辑往后补零
            return String(val).padEnd(10,0)
          }
          // Failed to resolve filter: privateFilter
          // 在其他视图中使用报错
        }
      })

      // 其他实例
      new Vue({
        el: '#app2',
        data: {
          count: 222
        }
      })
    </script>
  </body>
</html>

总结：

全局的 Vue.filter(过滤器名称,处理函数)
局部的 new Vue({filters:{过滤器名称:处理函数}})
如果有参数处理 num|formatNum(20)
处理函数里面一定要return

vue操作dom

vue中获取dom的方式：

首先，给你想获取dom的容器上加上一个ref属性
然后，ref有属性值，定义一个字符串作为标识（联想成给了个ID）
最后，在vue实例中有一个属性$refs
- $refs它收集了视图中使用ref标识过的所有dom对象

<div ref="myDiv">dom容器</div>

// $refs === {myDiv:'dom对象',。。。}
const dom = this.$refs.myDiv

ref属性的值，就是将来拿dom的键

栗子代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <button @click="getWidth()">获取宽度</button>
      <div ref="container">我是一个容器</div>
      <!-- 特殊情况 -->
      <ul>
        <li ref="lis" v-for="i in 3">我是第{{i}}个LI</li>
      </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {},
        methods: {
          getWidth () {
            // console.log(this.$refs)  {container:div对象}
            console.log('容器宽度：'+ this.$refs.container.offsetWidth)
            // 通过 this.$refs.lis 获取的是什么？
            // 获取到的是数组  [dom1,dom2,dom3]
            // 获取其中某一个 根据索引获取即可
            console.log(this.$refs.lis)
          }
        }
      })
    </script>
  </body>
</html>

补充：

目前我们没有学习过组件
ref给原生的标签添加后，获取的是dom元素 (掌握)
ref给vue的组件添加后，获取的是组件实例