三篇文章学完Vue(一)

函数命名,因为是Vue,所以基本上所有的函数都是v打头,再用横杠连接,如下:

v-if=判断
v-bind:title=绑定元素属性(property)
v-for循环
v-on:click点击事件
v-model表单
v-html显示html内容
v-once显示一次
v-bind:style绑定样式
v-bind:class绑定类

指令

这些又称为指令 (Directives) ,即带有 v- 前缀的特殊 attribute。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML attribute:

<a v-on:click=”doSomething”>…</a>

还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写

修饰符 (modifier)

是以半角句号** .** 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

event.preventDefault该方法将通知 Web 浏览器不要执行与事件关联的默认动作
stopPropagation该方法将停止事件的传播,阻止它被分派到其他 Document 节点。

v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

computed计算属性和methods方法

两者的区别:计算属性基于响应式依赖进行缓存,只在响应式依赖发生改变时才会重新计算。

响应式依赖是啥?就是某个变量依赖另一个变量的变化去改变

计算属性computed与侦听方法watch对比

watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }

明显计算属性更简约。

计算属性的setter(不知道有啥用)

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

现在再运行 vm.fullName = ‘John Doe’ 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
相当于getter提供返回fullName的方法,setter提供,根据fullName,设置fname和lname的方法。

计算属性和侦听器(Compute,和Watch)

el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
watch: {
    // 如果 `question` 发生改变,这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer() 
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
    // 请参考:https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api?question='+this.question)
        .then(function (response) {
          //capitalize 大写
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }

debounce 防抖和throttle 节流

景晨:
防抖就是一段时间内多次执行 只生效最后一个

景晨:
节流就是执行一次后 一段时间内无法继续执行

实现:节流给button加disable和定时器,防抖判断2次点击的间隔,超过间隔时间再提交
在上面这个示例中,使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

绑定html class

<div v-bind:class=”{ active: isActive }”></div>
上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 true or false。多个类之间用,号分割

data:{
       isActive:true//为true则显示

}

还可以定义为对象,并在计算属性中动态计算。

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

还可以用数组,甚至在数组中做三元运算

[isActive ? activeClass : ”, errorClass]

用在组件上会和模板的class合并。(没组件基础就忽略这句)

可以绑定style样式

同样支持数组类型

v-bind:style="styleObj"
data:{
styleObj:{
  color:'red'
}

条件语句

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。v-else表示不满足时,v-else-if

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

因为v-if时指令,要绑定在元素上,这时可以绑定在template元素上,最后不会被渲染

<template v-if=”true”></template>

表单复用

vue会复用元素,比如同一个input的值可能在切换时还保存,如果想清空,添加一个唯一的key 属性就行了。

<input placeholder="Enter your username" key="username-input">
 <input placeholder="Enter your email address" key="email-input">

循环语句

v-for,也可以用of替代in
v-for=”item in items”或者指定索引

<li v-for=”(item, index) in items”>
v-for也可以遍历对象,不指定,默认当前对象的值,可以增加第二个参数指定key和第三个参数指定index
v-for=”(value, name, index) in object”

循环语句的缓存

vue的for循环出来的数据,如果不加key,在数据更新后只会更新值,不会更新排序。加上后会更新排序号。(官方也建议加)
加key方法(以id排序为例):

v-for=”item in items” v-bind:key=”item.id”

数组的一些操作方法执行时会被侦听

当被侦听的数组,元素发生变更时,视图也会更新。这些方法包括数组的push,pop,splice,sort,reverse等等。

过滤数组元素

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

当然也能用filter,concat,slice这些方法生成一个新的数组替换旧数组。

可以使用一个计算属性,来显示一个经过过滤或者排序后的数组

<li v-for="n in evenNumbers">{{ n }}</li>

 evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })

在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 你可以使用一个方法来处理循环数据

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>

methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

v-for接受整数,他会把模板重复对应次数。(可以用来循环出一个id)
类似v-if也可以在template标签上写v-for,因为template标签不会被渲染

v-on的使用

可以使用v-on监听dom事件,并在触发时运行一些js代码。

v-on:click=”greet” 绑定一个方法
v-on:click=”greet(123,$event)” 调用要给方法|调用event

js中空数组和空对象是true。PHP中只有空对象是true。

preventDefault和stopPropagation

event.preventDefault该方法将通知 Web 浏览器不要执行与事件关联的默认动作
stopPropagation该方法将停止事件的传播,阻止它被分派到其他 Document 节点。

vue的事件修饰符

修饰符支持链式调用,用.连接

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
顺序很重要

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<div v-on:scroll.passive="onScroll">...</div>


<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

键盘按钮和鼠标按钮都有对应的监听事件(这个有需求自己看文档吧,文档里的方法官方自己都不推荐使用,真是生产环境,还是得用别的轮子)

select设置multiple属性可以多选下拉形式展示

<option v-for=”option in options” v-bind:value=”option.value”>
可以用v-for动态渲染OPTION

v-model支持双向数据绑定

什么是双向数据绑定?

可能是表单的值跟数据互相影响吧

最后附3个修饰方法:
.lazy
.number如果想自动将用户的输入值转为数值类型
.trim去除行首行尾字符

打赏作者

发表评论

电子邮件地址不会被公开。