vue学习笔记--(1)

基础篇

1.什么是MVVM模式?

vue.js在设计上使用了MVVM(Model-View-ViewModel)模式.MVVM由经典的软件架构MVC衍生而来,当View变化时,会自动更新到ViewModel,反之亦然,View和ViewModel之间通过双向绑定建立联系.

2.通过创建一个.html来学习vue的语言

新建一个html文件,用任何一个前端编辑器打开,通过script的方式引入vue.js文件

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

通过声明式的渲染,将数据加载进DOM元素中

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

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

var app代表了创建的一个vue实例,而其中的"#app"则是通过ID选择器,绑定一个已存在的一个DOM元素,相当于jQuery中$("#app"),而双大括号{{}}则是基本的插值方法,将数据显示出来

3.什么是语法糖?

语法糖是指将vue的指令通过缩写的方式表达出相同的效果,可以有效简化代码
语法糖有两类
一是数据绑定指令v-bind简化为’:’

<img v-bind:src="imgUrl">
等效于
<img :src="imgUrl">

二是事件指令v-on简化为’@’

<button v-on:click="handleClose"></button>
等效于
<button @click="handleClose"></button>

4.有哪些常用指令?

v-bind:

5.什么是生命周期?

vue实例在被创建后,都会经历一系列初始化的过程,相应的过程可以在过程中分别调用不同的函数,称之为生命周期钩子.

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. activated
8. deactivated
9. beforeDestroy
10. destroyed

比较 常用的有created,在实例被创建完后调用;mounted,在el挂载到实例上后调用;beforedestroy,实例销毁前调用