Vue指令及组件

Vue指令及组件

木头人 426 2021-09-06

Vue

Vue是什么

Vue是一套用于构建用户界面的渐进式框架。
Vue的核心库只关注视图层,数据和DOM已经被建立了关联,所有东西都是响应式的。
Vue是数据驱动的,写Vue代码时我们不需要关注页面如何渲染,只需要关注Vue中的数据就可以了。
因为Vue所有的元素都是它自己管理的,所以我们使用Jquery、layui等其他的js框架去操作Vue管理的元素时,就会有冲突,导致元素渲染失败或事件绑定无效。
所以我们在使用Vue时,尽量避免同时使用其他框架,都是用Vue统一管理。如果非要用,则有两种解决方案:

  1. 使用Vue指令v-once,只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。
  2. 在元素发生变化时,再次调用其他框架的方法去做对应的操作。

Vue实例

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created: function () {
    // 在实例创建完成后被立即同步调用
  },
  mounted: function () {
    // 实例被挂载后调用
  },
  methods: {
    log: function () {
      console.log(this.message);
    }
  }
});

生命周期

Vue的常用指令

  • v-text
    更新元素的文本内容
    <span v-text="msg"></span>
    <!-- 和下面的一样 -->
    <span>{{msg}}</span>
    
  • v-html
    更新元素的innerHTML
    <div v-html="html"></div>
    
  • v-show
    根据表达式之真假值,切换元素的display。当条件变化时该指令触发过渡效果(transition)。
    <div v-show="isShow"></div>
    
  • v-if
    根据表达式的值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
    与之对应的还有:v-elsev-else-if
    <div v-if="value == 1">一</div>
    <div v-else-if="value == 2">二</div>
    <div v-else="value > 2">其他</div>
    
  • v-for
    基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法alias in expression,为当前遍历的元素提供别名。
    <div v-for="item in items">{{ item.text }}</div>
    <div v-for="(item, index) in items"></div>
    <div v-for="(val, key) in object"></div>
    <div v-for="(val, name, index) in object"></div>
    

    v-for的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素,你需要用特殊 attributekey来提供一个排序提示。

    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
    
  • v-on
    @为缩写。
    绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。
    <!-- 方法处理器 -->
    <button v-on:click="doThis"></button>
    <!-- 与上面一样 -->
    <button @click="doThis"></button>
    <!-- 与上面一样 不写()会默认传$event -->
    <button @click="doThis($event)"></button>
    
    <!-- 内联语句 -->
    <button @click="doThat('hello', $event)"></button>
    <button @click="count += 1"></button>
    <button @click="isSHow = !isSHow"></button>
    
  • v-bind
    :为缩写。
    动态地绑定一个或多个属性,或一个组件prop到表达式。
    在绑定classstyle时,支持其它类型的值,如数组或对象。
    <!-- 绑定一个属性-->
    <img v-bind:src="imageSrc">
    <img :src="imageSrc">
    <!-- 内联字符串拼接 -->
    <img :src="'/path/to/images/' + fileName">
    
    <!-- class 绑定 -->
    <div :class="{ red: isRed }"></div>
    <div :class="[classA, classB]"></div>
    <div :class="[classA, { classB: isB, classC: isC }]">
    
    <!-- style 绑定 -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div>
    
  • v-model
    在表单控件或者组件上创建双向绑定。
    <!-- 改变input的值,message的值也会随之变化 -->
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    

Vue组件

<script>
Vue.component('my-component-name', {
  template: '<button v-on:click="count++">{{ name }} clicked me {{ count }} times.</button>',
  data: function () {
    return {
      count: 0
    }
  },
  props: ['name'],
});
</script>
<!-- 使用 -->
<div>
  <my-component-name ref="myComponent" name="testName"></my-component-name>
</div>

全局注册组件

Vue.component('my-component-name', { /* ... */ })
my-component-name为组件名,即使用时的标签名称,别用大写。
使用组件:<my-component-name></my-component-name>,和使用标签差不多

template

组件的具体内容。

data

组件的数据,个组件的data选项必须是一个函数,每个实例可以维护一份被返回对象的独立的拷贝,不然操作数据时影响到其它所有实例。

props

这里定义的是使用组件时,标签中传入的属性的名称的定义。
可以是数组或对象

  • 数组
    直接写要传入的属性名称就可以了
    props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
    
  • 对象
    对象的键为属性名称,值为属性的类型及验证的方法。
    props: {
      // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
      propA: Number,
      // 多个可能的类型
      propB: [String, Number],
      // 必填的字符串
      propC: {
        type: String,
        required: true
      },
      // 带有默认值的数字
      propD: {
        type: Number,
        default: 100
      },
      // 带有默认值的对象
      propE: {
        type: Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default: function () {
          return { message: 'hello' }
        }
      },
      // 自定义验证函数
      propF: {
        validator: function (value) {
          // 这个值必须匹配下列字符串中的一个
          return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
      }
    }
    

渐进式框架

VUE不强求你一次性接受并使用它的全部功能特性。
就是用你想用或者能用的功能特性,你不想用的部分功能可以先不用。
所以VUE的适用面很广,你可以用它代替老项目中的JQuery。也可以在新项目启动初期,有限的使用VUE的功能特性,从而降低上手的成本。
一开始不需要你完全掌握它的全部功能特性,可以后续逐步增加功能。

MVVM 模型

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。


# javaScript # vue # 文档