🚀 Vue2 学习笔记：超快入门攻略，part 1 🚀

Brian_Griffin
400 阅读3分钟

🚀 Vue2 学习笔记：超快入门攻略，part 1 🚀

🌟 亲爱的朋友们，今天我要和大家分享一份超级实用的 Vue2 学习笔记，帮助你快速入门这个强大的前端框架！🎉

📚 学习目录

  • vue的安装
  • 初识vue
  • 用script引入并且使用vue
  • 模板语法
  • 数据绑定
  • MVVM------Model-View-ViewModel（软件架构模型）
  • 数据代理
  • 事件
  • 事件处理
  • 事件修饰符
  • 键盘事件
  • 计算属性
  • 注意：
  • 监视属性
  • 深度监视
  • watch和computed对比
  • class和style绑定
  • 条件渲染
  • 列表
  • 列表渲染
  • 遍历数组
  • 遍历对象
  • 列表过滤（也可以说是数据过滤）
  • 注意注意注意：空字符串 '' 在字符串中被认为是存在于任何位置的
  • 列表排序
  • key原理和虚拟DOM
  • vue管理的数据监视以及更新原理
  • 收集表单数据
  • 过滤器
  • 其余内置指令语法
  • v-text
  • v-html
  • v-cloak
  • v-once
  • v-pre
  • 自定义指令
  • 生命周期
  • 组件化编程
  • 组件和模块---组件化和模块化
  • 非单文件组件和单文件组件---（以后使用的单文件组件）
  • 组件嵌套
  • 关于Vue的component
  • vm和vc之间的一条内置关系
  • 单文件组件---重点、重点、重点
  • Vue脚手架
  • 脚手架使用步骤：
  • 用脚手架生成的文件的一些不同点：
  • render函数
  • ref属性
  • props属性
  • 插件
  • scoped样式-----脚手架下编写样式的小技巧
  • 组件化编码流程
  • 本地存储-----------（不是vue的东西，而是JavaScript的东西）
  • 自定义事件----绑定
  • 自定义事件-----解绑
  • 全局事件总线----任意组件之间的通信
  • 消息订阅与发布
  • $nextTick
  • vue的过渡与动画
  • vue第三方动画库---Animate.css
  • 跨域
  • vue-resource
  • solt插槽
  • Vuex---重点
  • vuex的基本使用
  • store里的配置项---getters
  • mapState和mapGetters
  • mapActions和mapMutations
  • vuex模块化
  • 路由
  • 路由的概念：
  • 路由的基本使用
  • 嵌套
  • 路由的query参数
  • 命名路由
  • 路由的props配置
  • 编程式路由导航
  • 两个新生命周期
  • 路由守卫
  • history模式和hash模式
  • 组件库

📚 1. Vue2 简介

Vue2 是一个渐进式的前端框架，它被设计为易于上手，同时也能够强大到驱动复杂的单页应用。🌐

vue的安装

有两种安装方式：

  1. 直接用
  2. 用npm包管理器搭配脚手架进行工程化创建框架。（不需要自己配置某些默认配置，并且可以快速创建好文件和目录。以后会常用。）

现在从最基本的用script标签来使用vue。

初识vue

  1. 想要使用vue就要先创建一个vue实例，并且要传入一个配置对象。new Vue({})。并且传入的参数指定就是一个对象，用来进行一些配置。如果要使用一个变量名来接收这个vue实例，建议命名为vm。这里就是把vue实例当成viewModel。
  2. 与vue绑定的（也可以说是挂载）容器里面的代码依旧是符合HTML规范，只是里有一些特殊的vue语法，比如插值语法{{}}。
  3. 被挂载的容器里的整个代码就是vue模板。
  4. vue实例和容器是一一对应的，一个容器只能作用于一个容器。
  5. 真实开发也只会有一个vue实例，并且还会配合组件一起使用。
  6. 插值表达式{{xxx}}中的xxx一定要是js表达式（表达式就是会产生一个值的式子，例如：一个变量、或者两个变量相加、三目运算符等等），xxx可以获取vue实例里面所有的data的所有属性。
  7. data里的数据变化，模板里面的用了data数据的地方也会变化（自动变化），这是因为用的就是data里的数据。

用script引入并且使用vue

直接在官网下载开发版本。也就是vue.js文件

自己创建一个文件夹放入vue.js文件。自己创建html文件，在页面引入vue.js。这时vue相当于一个构造函数。要想使用vue就要先实例化。注意的是，现在vue没有和html页面产生任何的关系，实例时实例页面是页面。要想vue实例作用于html里面，就要和html里的容器绑定。这时才可以使用vue上的东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="list">
        <h1>hello world? {{name}} </h1>
    </div>


<script  src="./vue.js"></script>

<script type="text/javascript">
new Vue({
    el:'#list',
data: function(){
    return {
        name:'高飞'
    }
}
})
</script>
</body>
</html>

注意：一个script标签在使用了src属性来引用外部文件后，

不要再在此script标签里面编写JavaScript脚本，也就是内联脚本，这样做会导致内联代码被忽略。

原因：JavaScript为了规避可能的兼容性问题，规定了此写法会忽略内联脚本。这是规定。

el:'#list'是绑定vue实例和容器，使vue实例作用于特定容器，这里就绑定的是id选择器list的div容器。这里的工作流程就是，确定绑定的容器，然后解析容器里面的代码，若有vue的特殊语法，就执行其操作，例如：解析到有插值语法{{name}}，vue实例就会在data里找相应的name属性对应的数据，再拿这个数据去替换{{name}}这一大坨。

dada属性是用于存储数据的，它和插值语法（也就是{{}}）配合使用。用于使得死的页面变成活的页面，当data里面的数据改变的时候，页面的数据就会相应的改变。

模板语法

模板语法简单分为插值语法和指令语法。

插值语法：

用于解析标签体，简单来说就是{{xxx}}，这样式的。用于可以动态更新数据。

指令语法：

什么是指令语法？

用于解析标签（包括：标签属性、标签内容、绑定事件........）

类似于v-bind的语句，例如在a标签里面想绑定vue实例里的data的值。就要使用v-bind语句。

若不使用v-bind语句<a href="url">我是链接1</a>里面src的双引号里面的url就会被看作是一个字符串，但是一旦用到了v-bind语句（用于绑定的），那么双引号“”里的url就会被视作一个表达式，并会去vue实例里面的data里去绑定url属性。

v-bind有一个简写形式（也可以说成是语法糖，说白了，语法糖相当于成语。），就是直接写成冒号:

我是链接1

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="list">
        <h1>hello world? {{name}} </h1>
  <a v-bind:href="url">我是链接1</a>
  <a :href="url">我是链接2</a>

    </div>


<script  src="./vue.js"></script>

<script type="text/javascript">
new Vue({
    el:'#list',
data: function(){
    return {
        name:'高飞',
      url:'www.baidu.com'
    }
}
})
</script>
</body>
</html>

ok,看到这里，你应该自己可以想到插值语法和指令语法的v-bind作用是不是差不多？都是从vue实例里面的data里面拿属性，然后再在html里面的容器里面渲染，只不过插值语法作用于标签体，而指令语法作用于标签里的属性。

哪里是标签体？哪里是标签属性？

<h1>hello world?{{name}} </h1>
  <a v-bind:href="url">我是链接1</a>

数据绑定

单向绑定：

刚刚我们学过了v-bind指令，知道了它是从vue实例里的data里面拿数据渲染到标签属性。那么这里就是单向的操作，只能由实例---->标签属性。

双向绑定：

指令：v-model,最常见于表单提交的时候，用户在input输入框里输入的内容会修改实例里的data里的对应的值的变化。

顾名思义，就是不光实例的data里的值变化会导致标签里绑定的属性变化，而且标签里的属性变化也会导致实例里的data里的值变化。

所以，双向绑定用于表单类元素，例如：input输入框。而像<h1>标签就不能使用双向绑定，若使用，就会报错。因为用户都无法在页面进行输入，那双向绑定就失去了意义了。

总的来说，就是拥有value值的标签可以使用双向绑定v-model，v-model默认获取value的值。

<input type="text" v-model:value>

所以两种绑定的简写就是

<a :href="url">我是链接1</a>
<input type="text" v-model>

其实vue实例挂载容器（其实就是一个DOM元素）的方法有两个：

  1. 在实例创建的时候，直接挂载容器，也就是el:'#list'。
  2. 通常用于需要用在延迟挂载的时候，也就是vm.$mount('#list')。

这里的v.$mount()方法是此vue实例对象的原型对象的里面的方法。也就是通过__proto__先在自身查找方法，若没有，就去其实例的构造函数身上的prototype上查找，以此规律往上查找。哈哈，这里居然又有原型和原型链的知识。

data的写法

要使用函数式的写法：

data:function(){
  return {
    name:'小兰花'，
    age:18
  }
}

当然这是完整的写法，在ES6里面可以简写对象里方法的定义：

data(){
  return {
     name:'小兰花'，
    age:18
  }
}

这样写的效果是一摸一样的。而且此时方法里的this指向的是vue的实例。

MVVM------Model-View-ViewModel（软件架构模型）

vue是参考这个模型而设计了一个vue的模型

注意：模板里面使用的模板语法，可以使用所有vue实例对象上的属性，而且vue原型上的方法也可以用。

数据代理

数据代理是使用JavaScript内置的一个方法：Object.defineProperty()方法。这个方法的作用是创建一个属性并且修改对象上属性权限或者修改已有的对象上的属性的权限。那么，是关于什么的权限？这个方法会接受三个参数，一个是要修改属性权限的对象，一个是要修改的属性的权限，还有一个配置对象。

<script type="text/javaScript">
  let number=18;
  let person={
    name:'小兰花'，
    sex:'male'
  }

  // 属性要用单引号包起来
  Object.defineProperty(person,'age',{
    value:18,
    enumerable:true, // 可以被枚举，也就是可以被遍历到，默认为false。
    writeable:true, // 可以被修改，默认为false。
    configurable:true // 可以被删除，默认为false。
      
// 这个方法会监听到这个age被访问的这个行为，并且可以返回一个自定义的值。为了方便命名这个方法，
// 直接说get方法会不太明确，干脆叫做getter，也就是获取器。
get(){
  return number
},
  // 这个方法会监听到这个age属性被设置的这个行为，可以自定义到底要设置的什么值，为了方便叫这个方法，
  // 直接说set方法不太好，干脆叫setter，也就是设置器。
  set(value){
    number=value
  }
  
  })
  
</script>

这里说明了，什么是getter，什么是setter，还有他们有什么用？

这里再详细说明一下，vue实例是怎么实现数据代理的。

基本原理：

通过Object.defineProperty()来讲data里的所有属性添加到vm（就是vue实例）上，并且会为每一个添加到vm上的属性指定一个Getter和一个Setter，可以通过Getter和Setter这两个方法来操作具体的行为（读/写）。

事件

为了方便理解，可以把JavaScript的事件看成一个动作 ， 既然是动作，想要描述动作就要给动作分类，所以，在JavaScript里面，例如：鼠标点击就可以说是点击事件，那么鼠标移入某个盒子的这个动作就叫做鼠标移入事件。所以有很多描述动作的事件。说白了，在JavaScript里面，事件就是为了描述一个动作。

事件处理

事件处理使用的指令是v-on，它也有一个简写形式就是一个@

<div id="list">
  <button @click="showInfo">我是曾牛</button>
</div>

const vm=new Vue({
el:'#list',
  data:{
    name:'曾牛'，
    sex:'male'
  },
  methods:{
    showInfo(){
      alert('弹窗了曾牛。')
    }
  }
})

现在是在button里，事件处理没有进行方法传参。但是，JavaScript会默认传递一个参数叫event，也可以简写成e。例如：可以通过事件对象拿到发生事件的事件目标，也就是发生点击的按钮。通过event.target方法就可以拿到。并且此时的this指向的是vm或组件实例对象。

vue实例对象里面，数据要写在data对象里面，事件的方法不可以写在实例对象外面，而是写在实例对象里面的methods里面。

最后一点，若按钮点击的时候，想要传一些参数时，要注意：只传一个参数的话，就会覆盖默认传入的event事件对象，所以，既想传自己的参数又想保证event事件对象不被覆盖，就要额外自己传一下事件对象。

  <button @click="showInfo($event,66)">我是曾牛</button>
    // 第一个参数是事件对象，第二个参数是传了一个66的数字。
// click是点击事件，点击后会调用一个回调函数。

事件修饰符

常见的事件修饰符：

  1. prevent：阻止默认事件。
  2. stop：阻止事件冒泡。
  3. once：规定事件只触发一次。

使用：例如：直接在事件后面写上.prevent就可以了

<a href="www.baidu.com" @click.prevent="showInfo"></a>
// 这样就会阻止a标签的跳转的默认行为。

键盘事件

分为键盘按下和键盘按下后抬起两种键盘事件。

keyup为键盘抬起，keydown为键盘按下。

常用的键盘事件：

  1. enter
  2. delete
  3. space------空格
  4. tab------换行
  5. 上下左右都对应其英文单词。

特殊用法：

meta、CapsoLock、Tab、ctrl

配合ctrl和keyup的时候，ctrl要和其他键一起按，并且要抬起后才生效。

用keydown就会正常触发。

当只想要ctrl键和y键按才触发键盘事件，怎么设置？

<input type="text" placeholder="我是输入框" @keyup.ctrl.y="showInfo">
// 这样的写法意思是：只是ctrl和y键按下抬起后，才出发键盘事件。

用法：

<input type="text" placeholder="我是输入框" @keydown.enter="showInfo">
// Enter键按下的时候，触发showInfo回调函数。

注意：事件修饰符可以连着写。

<a href="www.baidu.com" @click.prevent.stop="showInfo"></a>
avatar
文章
阅读
粉丝