从Vue2.0开始

_sky
105 阅读3分钟

logo.svg

从零搞起vue2（基础Api）

模板语法

  • <span>Message: {{ msg }}</span> msg作为变量

  • <div v-bind:id="dynamicId"></div> 简写

  • 开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它

  • <div :id="dynamicId"></div>

  • 动态绑定多个值

  • 1、data() { return { objectOfAttrs: { id: 'container', class: 'wrapper' } } };

  • 2、<div v-bind="objectOfAttrs"></div>

  • 使用 JavaScript 表达式

  • 1、 {{ number + 1 }}

    2、 {{ ok ? 'YES' : 'NO' }}

    3、 {{ message.split('').reverse().join('') }}

    4、 <div :id="list-${id}"></div>

  • 调用函数渲染

  • 1、<span :title="toTitleDate(date)">{{ formatDate(date) }}</span>

  • export default{ methods: { formatDate(params){ return params } }}

  • 指令 Directives

  • v-if() v-bind v-on()

  • 1、<span v-if="条件结果为真假">是否能看见我</span>

  • 2、 <a v-bind:href="url"> </a>

  • <a :href="url">简写</a>

  • 3、 <a v-on:click="doSomething"> </a>

  • <a @click="doSomething">简写 </a>

  • 声明响应式状态

  • 选用选项式 API 时，会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。Vue 将在创建新组件实例的时候调用此函数，并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 this) 上。

  data() {
    return {
      count: 1
    }
  },

  // `mounted` 是生命周期钩子 （用作为数据请求）
  mounted() {
    // `this` 指向当前组件实例
    console.log(this.count) // => 1

    // 数据属性也可以被更改
    this.count = 2
  }
}
  • 声明方法
  • 1、要为组件添加方法，我们需要用到 methods 选项。它应该是一个包含所有方法的对象：
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 在其他方法或是生命周期中也可以调用方法
    this.increment()
  }
}
  • 2、methods 中的方法绑定了永远指向组件实例的 this； 在定义 methods 时不能使用箭头函数，因为箭头函数没有自己的 this 上下文。例：
  methods: {
    increment: () => {
      // 反例：无法访问此处的 `this`!
    },
    increment(){
    // 正确的使用方法
    }
  }
}

  • DOM 更新时机

  • DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只需要更新一次。若要等待一个状态改变后的 DOM 更新完成，你可以使用 nextTick() 这个全局 API：
import { nextTick } from 'vue'
export default {
  methods: {
    increment() {
      this.count++
      nextTick(() => {
        // 访问更新后的 DOM
      })
    }
  }
}

  • 深层次响应

  • 在 Vue 中，状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组，你的改动也能被检测到。例：
export default {
  data() {
    return {
      obj: {
        nested: { count: 0 },
        arr: ['foo', 'bar']
      }
    }
  },
  methods: {
    mutateDeeply() {
      // 以下都会按照期望工作
      this.obj.nested.count++
      this.obj.arr.push('baz')
    }
  }
}
  • Class 与 Style 绑定 （参照官网）
  • 我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：
  • <div :class="{ active: isActive }"></div>
  • 上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。 你可以在对象中写多个字段来操作多个 class。此外，:class 指令也可以和一般的 class attribute 共存。举例来说，下面这样的状态：
data() {
  return {
    isActive: true,
    hasError: false
  }
}

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

渲染结果：
    <div class="static active"></div>
    
注：当 `isActive` 或者 `hasError` 改变时，class 列表会随之更新。举例来说，
    如果 `hasError` 变为 `true`，class 列表也会变成 `"static active text-danger"`。
  • 条件渲染
  • v-if v-else v-else-if
  • v-show 是用来控制样式display; 而v-if-else 是控制某个dom（组件）卸载，与重载；按需使用。
<div v-if="tttype === 'A'">A</div>
<div v-else-if="tttype === 'B'">B</div>
<div v-else-if="tttype === 'C'">C</div>
<div v-else>Not A/B/C</div>
  • 列表渲染
      <div v-for="(item,index) in newArr">
        {{item.name}}+{{item.id}}+{{index}}
      </div>
      
    data () {
        return {
            newArr:[{name:'liudu八零',id:1},{name:'北京12213323',id:2}],
            }
 }
  • 持续更新中。。。
avatar
文章
阅读
粉丝