《风尚坐火箭学习vue》-- 第十一章：Vue中的自定义组件以及类的绑定语法

前言：前端框架千千万，独有vue占一半

我是风尚，让我们一起坐火箭去学习Vue

 

---

《风尚坐火箭学习vue》-- 第十一章：Vue中的自定义组件以及类的绑定语法

上章回顾：“这这这，让我多看会！”风尚有点蒙的说。。。

---

“好，你多看会，一会儿去吃饭，吃完饭赶紧给你讲今天的技能，时间紧，任务重！”老头说完便养身而去了。

风尚把案例敲了两遍便去找了老头吃饭，今天竟然是土豆炖肉，真香，风尚吃了两碗饭，中午睡了一个午觉。

---

“”滴滴滴，闹钟响了，该去学习了“”风尚赶紧去了电脑室。

---

“来吧，今天我们学习Vue中的自定义组件以及类的绑定”老头说。风尚拿出了笔记本开始记.

---

关于自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点

<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus="">
</div>
  
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

指令的值数据-简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子

<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus="true">
</div>
  
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: function (el,data) {
        // 聚焦元素
        //如果指令的值是true则获取焦点
        if(data.value==true){
           el.focus()
        }
       
    }
  }
})
</script>

---

关于类的绑定：

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 真假

你可以在对象中传入更多属性来动态切换多个 class

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data 如下

data: {   isActive: true,   hasError: false }

渲染结果为

<div class="static active"></div>

绑定的数据对象不必内联定义在模板里：

<div v-bind:class="classObject"></div>

数据如下

data: {   classObject: {     active: true,     'text-danger': false   } }

classObject对象可以通过计算动态获得

---

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {   activeClass: 'active',   errorClass: 'text-danger' }

渲染为

<div class="active text-danger"></div>

绑定内联样式-对象语法

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名

<div v-bind:style="{ color: activeColor, fontSize: '24px' }"></div>

data: {   activeColor: 'red', }

渲染结果

<div style="color:red, font-size: 24px"></div>

直接绑定到一个样式对象通常更好，这会让模板更清晰：

data: {   styleObject: {     color: 'red',     fontSize: '13px'   } }

对象语法常常结合返回对象的计算属性使用。

vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

---

“好了，今天就讲这摸多”老头说道。。。