为了账号安全,请及时绑定邮箱和手机立即绑定

vue知识点总结(一)

2018.10.18 12:52 498浏览

VUE是什么

vue是一套用来构建用户界面的JavaScript框架
在学习vue之前,必须要有HTML、CSS、JavaScript的扎实基础
当前vue的最新版本是2.x

VUE的使用

  1. 使用script标签引入

  2. 使用vue-cli来快速搭建脚手架

VUE实例

每一个vue应用都是通过用vue函数来创建一个vue实例开始的:

var vm = new Vue({    //选项})

每一个vue应用,都是由一个通过new Vue创建的根Vue实例和可选的、可嵌套的、可复用的组件树组成。

data对象

vue中的data对象里,在vue实例创建的时候,在其响应式系统中加入了所有能在data中找到的属性,当这些属性的值发生改变的时候,视图也会响应,一起改变。

var vm = new Vue({  data: data
})

除了数据属性,vue实例中还暴露了一些有用的实例属性和方法。它们都有前缀$,可以和用户定义的属性区分开来

模板语法

文本

数据绑定最常见的是“mustache”语法,也就是双大括号:

<span>Message: {{ msg }}<span>

双大括号里的内容将会被替代为数据对象上面的msg属性的值,如果绑定的这个属性的值发生改变,那么大括号内的内容会跟着更新。
在数据绑定里,还可以支持JavaScript表达式(非语句)。

内部指令

vue内部可以使用在HTML上,HTML会根据这些指令来执行对应的任务,响应式地作用于dom。

v-html

双大括号里会把数据解释为普通文本,而不是HTML,所以如果想输出真正的HTML,那就要使用v-html命令:

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

v-bind

假如你想像双大括号语法一样修改HTML的属性,那么这时候用双大括号就不行了,需要使用v-bind语法:

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

这个指令还有一个常用的缩写形式:

<a :href="url"></a>

v-on

这个指令可以用来监听DOM事件,并在触发时运行一些JavaScript代码

<button v-on:click="counter += 1">Add 1 </button>

v-on里还可以接受一个需要调用方法的名称。
如果需要在内联语句处理器中访问原始的DOM时间,可以使用特殊变量$event把它传入方法。

vue还为v-on提供了事件修饰符:

  • .stop 阻止事件继续传播

  • .prevent 提交的事件不再阻止页面

  • .capture 添加事件监听器时使用事件捕获模式

  • .self 只当在event.target是当前元素自身时触发处理函数

  • .once 点击事件将只触发一次

  • .passive 滚动事件的默认行为将会立即触发

按键修饰符

<input v-on:keyup.13="submit">

除了根据keycode来调用键值,还可以使用vue提供的别名,比如enter等。

条件渲染 v-if

条件渲染可以根据条件来决定是否渲染dom:

<h1 v-if="ok"></h1>

也可以使用v-else来添加一个else块,v-else元素必须跟在v-if 的后面。还有v-else-if。

当想切换多个元素的时候,可以在template元素上使用v-if,template就可以当做不可见的元素。

假如两个模板使用了相同的HTML元素,在进行切换的时候,这个元素是不会更新的,这时候就可以使用key值来给这个元素做一个绑定,这个key值是唯一的,因此同一个元素上绑定的两个key值可以让这两个元素都是独立的。

v-show

这个命令可以根据条件选择是否展示元素。

<h1 v-show="ok">Hello!</h1>

v-if 和v-show的区别

v-if是真正的条件渲染,在切换的时候会有适当的销毁和重建,如果是假,那么就会什么也不渲染。
而v-show则是一个改变元素display的指令,只是基于CSS的切换。

v-for

v-for可以根据一组数据的选项列表来进行渲染,语法比较特殊:

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

其中的items是原数据数组,定义在data里,而item则是数组元素迭代的别名。也可以取整数表示重复。

v-for还支持一个可选参数,当做数组的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}  </li></ul>

其中的in也可以被of所替代 。

v-for还可以操作对象,通过一个对象的属性来进行迭代。如果设置第二个参数key,那么就是属性名。

当使用v-for的时候,如果更新已经渲染的元素列表,那么v-for会就地复用,为了方便它可以跟踪每一个节点的身份,所以必须要给一个key值,每项都有唯一的id。

变异方法

这些针对于数组的方法都能够改变原始数组,而非变异方法则不会改变原始数组,而是返回一个新的数组。
和原生js的数组操作方法一样,如push()等。

v-for和v-if

v-for和v-if处于同一节点的时候,v-for比v-if的优先级要高。

表单输入绑定

可以使用v-model指令在表单元素上创建双向绑定。

<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

表单输入绑定的修饰符

  • .lazy修饰符可以转变为使用change事件时进行同步

  • .number 如果想自动给用户的输入值转为数值类型

  • .trim 如果要自动过滤用户输入的首尾空白字符

class与style绑定

我们可以给v-bind:class传一个对象,动态的切换class:

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

方法、计算属性与侦听器

数据我们可以定义在data里,方法我们可以定义在methods里。
当然,除了方法之外,还有一些复杂的逻辑,我们可以使用计算属性。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {    // 计算属性的 getter
    reversedMessage: function () {      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

与方法不同,计算属性是基于它们的依赖进行缓存的,只在相关依赖发生改变时才会重新求值。

Vue还提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

var watchExampleVM = new Vue({  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()
    }
  }



作者:闰土在流浪
链接:https://www.jianshu.com/p/b52b0a4253d6


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 去赚学费 帮助中心 APP下载
官方微信

举报

0/150
提交
取消