vue学习笔记(2)－－vue实例和模板语法

子舒

发布于 2022-06-09 14:02:15

6300

发布于 2022-06-09 14:02:15

文章被收录于专栏：子舒的个人博客

一、vue实例

1.创建vue实例

一个vue实例应该通过new Vue来创建根实例，所有的 vue 组件其实都是 vue 实例

var vm = new Vue({
  ...
})

当一个实例被创建时，data对象中的 property 都被加入到vue的响应式系统中，当值发生改变时，试图也会改变

var data = {a: 1}

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

此时在控制台输入vm.a == data.a会返回true，变量data已经被赋给vue实例中的data对象了

同时，对两个对象的数据进行操作改变也会影响到另一个

vm.a = 2
// data.a = 2

data.a = 3
// vm.a = 3

当数据改变时，视图也会重新渲染，如果在vue实例被创建后，又添加了一个新的property，则不会被加入到响应式系统中

如果一开始就知道后面会添加一个property，但是一开始不存在或为空，需要设置一些初始值

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTods: fasle,
  todos: [],
  error: null
}

使用Object.freeze()方法的时候，无法修改数据引起视图变化

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

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

<script>
  var data = {message: 'hello,wolrd'}
  Object.freeze(data)

  var vm = new Vue({
    el: '#app',
    data: data
  })
</script>

在控制台改变vm.message的值会直接报错，因为data对象已经被冻结了，不可改变

vm.$data

代表vue实例观察的数据对象

console.log(vm.$data)
// 返回数据对象的数组形式

var data = { a: 1 }
var vm = new Vue({
  el: '#app',
  data: data
})

vm.$data === data // true
vm.$el === document.getElementById('app') // true

2.生命周期函数

每个实例在被创建的时候，都要经历一些初始化过程，比如：设置数据监听，编译模板，将实例挂载到dom，更新dom等

在这个过程中会运行一些叫做生命周期的钩子函数，可以在不同阶段添加自己需要的代码

比如created钩子可以用来表示一个实例被创建之后执行的代码

new Vue({
  data: {
    a: 1
  },
  created: function () {
    console.log('a is: ' + this.a)
  }
})
// "a is: 1"

this用来指向vm实例

但是不要在property或者回调上使用箭头函数，created: () => console.log(this.a)，因为箭头函数没有this的概念，他会把this当作变量一直向上级作用域查找，经常产生Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function之类的报错

二、模板语法

1.插值

最简单的就是

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

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: 'hello,world'
        }
    })
</script>
</script>

。。。

下面这段代码给input绑定了一个disabled属性，但是通过ok的真伪来控制属性是否渲染

当ok为fasle,null,undefined值时，属性都不会被渲染，有点类似于v-if，但是这种写法只是针对属性

<div id="app">
    <input type="text" v-bind:disabled="ok">
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello,wolrd',
            ok: false
        }
    })
</script>

在模板语法中还可以使用javascript表达式

<div id="app">
    <div>{{number + 1}}</div>
    <div v-bind:id="'list-' + id"></div>
    <div>{{message.split('').reverse().join('')}}</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            number: 2,
            id: 'li',
            message: 'hello,wolrd'
        }
    })
</script>

每个模板只能包含一个javascript表达式，如果有多个，则不会生效

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

2.指令

参数

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

<div id="app">
    <a v-bind:href="url">百度</a>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'https://www.baidu.com'
        }
    })
</script>

在这里href是参数，告知v-bind指令将该元素的hrefattribute 与表达式url的值绑定

另一个例子是v-on指令，它用于监听dom事件

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

动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

<!--注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。-->
<a v-bind:[attributeName]="url">...</a>

这里的attributeName会被作为一个javascript表达式进行动态求值，最终结果被作为参数来使用

比如：vue实例中有一个attributeName属性其值为href，则这个绑定将等价于v-bind:href

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

也可以使用动态的事件名绑定监听函数

<a v-on:[eventName]="doSomething"> ... </a>

如果eventName值为click，则该绑定等价于v-on:click="doSomething"，一个鼠标点击事件

对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为null，这个特殊的null值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的，例如：

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

因此，尽量不要使用空格和引号的表达式，或者采用计算属性来替代这种复杂表达式

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写

修饰符

修饰符是以.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preentDefault()

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

3.缩写

v-前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v-前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v-前缀也变得没那么重要了。因此，Vue 为v-bind和v-on这两个最常用的指令，提供了特定简写

v-bind

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

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on

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

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

它们看起来可能与普通的 HTML 略有不同，但:与@对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020 年 11 月，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js