vue笔记一

一.Vue基本知识点

1.声明式渲染

<div id="app">{{ msg }}</div>

<script>

var app = new Vue({

el: '#app',

data: {

  msg: 'hello'

}

})

</script>

ps:
a.el指定了将vue挂载到那个元素上
b.msg是响应式的,即只要改变,对应的元素将重新渲染

2.if与for

<div id="app">

<p v-if="isShow">你看到我了</p>

</div>

<script>

var app = new Vue({

el: '#app',

data: {

  isShow: true

}

})

</script>

<div id="app">

<ul>

<li v-for="item in list">{{ item }}</li>

</ul>

</div>

<script>

var app = new Vue({

el: '#app',

data: {

  list: ['a', 'b', 'c']

}

})

</script>

3.v-on和v-model

v-on提供了绑定事件,v-model提供了表单和应用状态双向绑定

<div id="app">

<input v-model="msg">

<button v-on:click="showMsg">点我</button>

</div>

<script>

var app = new Vue({

el: '#app',

data: {

  msg: '输入'

},

methods: {

  showMsg: function () {

    alert(this.msg)

  }

}

})

</script>

二.数据与方法和实例的生命周期与钩子

1.当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性是响应式的;不存在的则不会触发响应;

2.实例的生命周期

(摘自https://segmentfault.com/a/1190000008010666)

三.模板语法

1.v-once
数据对象在改变的时候,绑定处的值也会改变;如果要改变这种情况,只绑定一次,即便数据对象改变,也不会重新绑定,可以使用v-once

<span v-once>这个将不会改变: {{ msg }}</span>

2.v-html
{{}}会将内容解释为普通文本,但有时候,我们需要html,使用v-html

<div v-html="rawHtml"></div>

ps:
rawHtml将会被解释为html

3.v-bind
mustache 语法不能作用在 HTML 特性上,也就是{{ value }}这种无法作用在html的特性上

<div id="{{ value }}"></div> // 无法作用

应该使用v-bind

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

4.使用javascript

<div v-bind:id="value + '_pk'"></div>

限制:每个绑定都只能包含单个表达式,如果有if判断,请使用三元表达式

5.指令
指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)

ps:一些指令可以带参数,如v-bind和v-on

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

<a v-on:click="doSomething">

6.修饰符
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<form v-on:submit.prevent="onSubmit"></form>

7.缩写

v-on可以缩写为@
v-bind可以缩写为:

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

<a @onclick="onClick"></a>

三.计算属性computed

1.优点:
计算属性可以摆脱将过于复杂的表达式写在模板内
算属性是基于它们的依赖进行缓存的,只有相关依赖发生改变时才会重新求值

2.计算属性示例:

<div id="app">

<span>{{ fullName }}</span>

</div>

<script>

var app = new Vue({

el: '#app',

data: {

  firstName: 'first',

  lastName: 'last'

},

computed: {

  fullName: function() {

    return this.firstName + this.lastName

  }

},

methods: {

  showMsg: function () {

    alert(this.msg)

  }

}

})

</script>

ps:计算属性是一种属性,所以调用可以看到是不加小括号的

3.默认情形下,计算属性只有getter,如果需要可以添加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]

    }

  }

}

四.观察者watch

1.与计算属性的异同:
同:都是基于一个属性变化来做出相应的
异:计算属性一般用于同步操作,而观察者一般用于异步

2.示例

<template>

  <div id="app">

    <input v-model="name">

    <span>{{ age }}</span>

  </div>

</template>

<script>

export default {

  name: 'app',

  data () {

    return {name: 'john', age: 0}

  },

  watch: {

    name: function (newName) {

      this.age = '正在获取年龄...'

      this.getAge()

    }

  },

  methods: {

    getAge () {

      let _this = this

      setTimeout(function () {

        _this.age = 20

      }, 5000)

    }

  }

}

</script>

ps:
在此示例中我们使用了v-model双向绑定,使用了setTimeOut来模拟异步获取数据

五.class与style绑定

1.class: 绑定一个属性

<template>

  <div id="app">

    <span v-bind:class="{red: red}">文字显示</span>

  </div>

</template>

<script>

export default {

  name: 'app',

  data () {

    return {red: true}

  }

}

</script>

最终渲染为:
文字显示

2.class: 绑定一个对象

<template>

  <div id="app">

    <span v-bind:class="objClass">文字显示</span>

  </div>

</template>

<script>

export default {

  name: 'app',

  data () {

    return {objClass: {

      red: true,

      large: true

    }}

  }

}

</script>

最终渲染为:
文字显示

3.class: 数组语法

<template>

  <div id="app">

    <span v-bind:class="[red, large]">文字显示</span>

  </div>

</template>

<script>

export default {

  name: 'app',

  data () {

    return {

      red: 'red',

      large: 'large'

    }

  }

}

</script>

最终渲染为:
文字显示

4.style:

<span v-bind:style="{color: red, fontSize: 18 + 'px'}">文字显示</span>

最终被渲染为:

<span class="" style="color: red; font-size: 18px;">文字显示</span>

ps:
对于-分割css属性,需要使用驼峰命名或配合引号的短横线,所以上面的也可以写成

<span v-bind:style="{color: red, 'font-size': 18 + 'px'}">文字显示</span>

5.style: 绑定一个对象

<template>

  <div id="app">

    <span v-bind:style="styleObject">文字显示</span>

  </div>

</template>

<script>

export default {

  name: 'app',

  data () {

    return {

      styleObject: {

        color: 'red',

        'font-size': '18px'

      }

    }

  }

}

</script>

六.条件指令

1.示例

<div v-if="type === 'A'">

  A

</div>

<div v-else-if="type === 'B'">

  B

</div>

<div v-else-if="type === 'C'">

  C

</div>

<div v-else>

  Not A/B/C

</div>

2.用key管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染.

<template v-if="loginType === 'username'">

  <label>Username</label>

  <input placeholder="Enter your username">

</template>

<template v-else>

  <label>Email</label>

  <input placeholder="Enter your email address">

</template>

loginType的变化,不会清除掉用户之前输入的内容.

如果要解决这个问题,可以添加一个key

<template v-if="loginType === 'username'">

  <label>Username</label>

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

</template>

<template v-else>

  <label>Email</label>

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

</template>

3.v-show
v-show和v-if用法一样,不同的是v-show只是进行简单的css的display的变化.元素保留在dom中.

4.v-if和v-for,一起用时,v-for有更高优先级.

巴特西

vue笔记一

一.Vue基本知识点

二.数据与方法和实例的生命周期与钩子

三.模板语法

三.计算属性computed

四.观察者watch

五.class与style绑定

六.条件指令

最新文章

热门文章