Vue 学习笔记 1.0 --- 基本概念 && 常用指令

一 : Vue 介绍

1. vue 中文网
2. github 下载地址
3. Vue.js (读音 /vju:/ view)
4. 渐进式 JavaScript 框架
   3.1 渐进式 :

   小型项目 就可以使用 vue 就高度了
   随着页面的复杂程序提高,就要学习 vue-rouer 来管理更多的页面
   再随着项目的数据越来越多,管理数据也变得麻烦起来了,就开始使用 vuex 来管理数据

3.2 框架 : 一整套的解决方案

框架和库的区别 (面试)

1. 库(Library) , 代表 : jquery

• 库就是一系列函数的集合, 我们开发人员在使用库的时候,想要完成什么样的功能,就调用库中提供的某个方法

比如 : 想要添加样式, 就调用 jquery 中的 .css() / .addClass()

• 库起到了一个辅助的作用, 在使用库的是时候,是由开发人员说了算, 也是由开发人员起主导作用.

比如 : 想给 A:设置样式 A.css(), B:addClass() C:style.background='red'

2. 框架 (Framework), 代表:vue

• 在使用框架的时候,是由框架说了算,由框架起到了主导作用,
• 框架是一套完整的解决方案,框架中制定了一套规则,使用框架的时候,只需要按照规则,把代码放到合适的地方,然后框架会在合适的时机,主动调用开发人员的代码

比如 : 想用vue,组件里遍历就得使用 v-for, 下次不用 v-for 了,使用 for 不行 v-for=‘item in list’

3. 主要区别 : 控制反转

也就是 : 谁起到了主导作用

• 使用库的时候 : 开发人员起主导作用
• 使用框架的时候:框架起到了主导作用
• 从体量上看,框架一般比库大
• 会发现使用框架的时候,会受到很多限制
• 我们所说的前端框架与库的区别？

二 : MVC + MVVM (面试)

第 2.1 MVC

1. MVC 是一种软件架构模式,也有人叫做设计模式
2. M : Model 数据模型 (专门用来操作数据,数据的 CRUD)
3. V : View 视图 (对于前端来说,就是页面)
4. C : Controller 控制器 (是视图和数据模型沟通的桥梁,用于处理业务逻辑)
5. 看图

第 2.2 MVVM

Vue 使用的是 MVVM 模式
为什么要学习 MVVM ?

• MVVM ===> M / V / VM
• M : model 数据层
• V : view 视图层
• VM : ViewModel 视图模型
• 核心 : M <=> VM <=> V

第 2.3 MVVM 优势

• MVC 模式 将应用程序划为三个部分,实现职责分离
  • 但是,在前端中,经常要通过 js 代码来进行一些逻辑操作,最终还要把这些逻辑操作展示页面中, 也需要频繁的操作DOM
  • DOM是前端性能的瓶颈
  • 比如 : ajax 请求、添加、修改、设置样式、动画
• MVVM 提出来的思想 通过 数据双向绑定 让数据自动的双向同步
  • V (修改视图) --> M
  • M (修改数据) --> V
• 采用的是 : 数据驱动视图的思想, 数据是核心
• 以后如果想要操作 DOM, 立马想到的不是应该是拿到元素设置,而是数据

第 2.4 Vue 中的 MVVM

• 注意 : 不推荐直接手动操作 DOM

  每个人操作 DOM 的方法不一样,会造成性能不一样
  官网 : 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

第 2.5 学习 Vue 要转化思想

• 数据驱动视图 : 不要再想着怎么操作 DOM, 而是想着如何操作数据

三 : 起步 - Hello Vue

第 3.1 : 基本使用

1. 安装 : npm i vue (小写)
2. 导入 :
3. 实例 vue

const vm = new Vue({
  // 指定 vue 管理的边界
  el: '#app',
  // 提供视图中 需要的数据
  // 视图可以直接使用data中的数据
  data: {
    msg: 'xxx'
  }
})

第 3.2 : 使用注意点

1. vm 官网建议
2. Vue 构造函数首字母大写
3. 参数是一个对象
4. id=’#app’, 其他也可以
5. 边界外的无法使用 msg

3.3 {{}} 插值表达式

1. {{}} Mustache 小胡子语法, 插值表达式
2. 作用 : 使用{{}} 从data中获取数据,并展示在模板中
3. 说明 : {{}} 中只能出现 js 表达式

• 表达式 (有返回值的)
  • 常见的数据类型 1 'abc' false [] {}
  • 数据类型 和 运算符结合在一起1+2 arr.join('-') true ? 123 : 321
• 语句 if语句 for语句

4. {{}} 语法 不能作用在 HTML 元素的属性上

四 : 数据双向绑定演示

第 4.1 : 一个 input + v-model

 v-model 指令 : 数据双向绑定的指令
 作用 : 把data中的msg值 和  input上的值 绑定到一起
 注意 : v-model只能用在 表单控件上 (input checkbox 等)
 > 可以在浏览器分别演示 V => M  和 M =>V

第 4.2 : Object.defineProperty

内在-响应式原理

let obj = {}
let temp

obj.name = 'zhanhgsan'

// 参数1 : 要给哪个对象设置属性
// 参数2 : 给对象设置什么属性
// 参数3 : 属性的修饰符
Object.defineProperty(obj, 'name', {
  set: function(newVal) {
    console.log('赋值了', newVal)
  },
  get: function() {
    console.log('取值了')
    return temp
  }
})

第 4.3 : 数据双向绑定的原理

2. 演示 : V ==> M

//1. 拿到文本框
const txt = document.getElementById('txt')
//2. 时刻监听txt ,拿到最新的值
txt.oninput = function() {
  console.log(this.value)
  obj.name = this.value
}

//3. 数据模型
var obj = {}
let temp

Object.defineProperty(obj, 'name', {
  // 给属性赋值的时候会掉
  set: function(newVal) {
    console.log('调用了set', newVal)
    temp = newVal

    txt.value = newVal
  },
  get: function() {
    console.log('调用了get')
    return temp
  }
})

3. V => M

//1. 获取 input的值,最新值
//2. 通过监听oninput 拿到最新值
//3. 把最新值赋值给 obj.name
//4. 就会掉了set方法,就会修改了数据

4. M => V

//1. obj.name = 'xxx'
//2. 调用 set方法
//3. 把值赋值给input元素

五 : 指令学习

第 5.0 指令

• 指令 : 就是一个特殊的标记, 起一个辅助作用, 使 html 具备原来没有的功能
• vue 中 所有的指令, 都是以 v-开头的
• 比如 : v-model v-bind v-if v-for 等等

第 5.1 v-model (常用)

说明 : 用在表单元素中, 用来实现数据双向绑定 (input checkbox 等等)
作用 : 将 数据txt 和 文本框的值 绑定到一起, 任何一方发生改变,都会引起对方的改变
注意 : v-model 在不同类型的表单元素中,该指令的作用不同

<input type="text" v-model="txt" />

<input type="checkbox" v-model="isChecked" />

第 5.2 v-text 和 v-html

说明 : 设置文本内容

1. v-text : 相当于之前的 innerText , 设置文本内容(不识别 html 标签) == 标签内部{{}}
2. v-html : 相当于之前的 innerHTML , 设置文本内容(是被 html 标签)
3. 数据

   msg1: '这是一条信息',
   msg2: '我也是一条信息'

第 5.3 v-bind (常用)

说明 : 动态绑定数据 (单向)
出现原因 : 在 HTML 属性中, 无法使用插值表达式
步骤:

// 加载静态数据
 <a href="https://wbaidu.com">aaa</a>
// 想加载动态数据  {{ }}可以获取data中的数据
// 但是 {{}} 不能使用在属性中
<a href="{{ src }}">aaa</a>
// 所以使用v-bind
<a v-bind:href="{{ src }}">aaa</a>   ok
 <img v-bind:src="src">   ok

缩略 : v-bind 全部省略 只留下一个:
改为 :

<a :href="src">aaaa> ok
<img :src="src" /> ok

以后 使用
静态加载数据 : aaa
动态加载数据 : aaa

第 5.3.1 v-bind 和 v-model 的区别

//  v-model :  数据双向绑定         表单元素上
//   :      :  动态绑定数据(单向)    任意元素动态读取属性

容易出错点 : 


<input type="checkbox" v-model="isChecked1" /> <br />


<input type="checkbox" :checked="isChecked2" />*

第 5.4 操作样式

1.操作样式

<h1 class="red">哈哈h1>


<h1 :class="cls">哈哈h1>



<h1 :class="{ red:isRed , fz:isFZ}">哈哈h1>


<h1 :style="{ color : 'red', fontSize : fz + 'px' }">哈哈h1>

2.其他操作

<div :class="{ active: true }">div>
===>
<div class="active">div>


<div :class="['active', 'text-danger']">div>
===>
<div class="active text-danger">div>


<div :class="[{ active: true }, errorClass]">div>
===>
<div class="active text-danger">div>

--- style ---

<h1 :style="{ color : 'red', fontSize : fz + 'px' }">哈哈h1>





<div :style="[baseStyles, overridingStyles]">div>

第 5.5 v-on 指令

注册事件/绑定事件

1. v-on:click 绑定了一个单击事件

   : 后面是事件名称

<button v-on:click="fn">按钮button>

2. 缩写 : @click=‘fn’
   按钮

3. 函数写在 methods 里面

fn : function(){ ... }
fn() { ... }

4. 函数里面的 this 指的就是 vm 实例

> 在函数里面操作数据
- 获取数据  this.msg
- 修改数据  this.msg = 'XXX'

5. 传参
   5.1 正常传参

@click='fn(123)'

5.2 事件对象 $event

<button @click="fn1($event,123)">我是按钮button>

第 5.6 v-for 指令

1. v-for 指令： 遍历数据，为数据中的每一项生成一个指令所在的标签
2. 代码

<ul>
  <li v-for="(item,index) in list1">{{ item }} - {{ index }}li>
ul>

<ul>
  <li v-for="item in list2">{{ item.name }} - id:{{ item.id }}li>
ul>


<ul>
  <li v-for="(item,key) in obj">{{ item }}-{{key}}li>
ul>


<h1 v-for="item in 10">我是h1 {{ item }}h1>

3. 重点是遍历数组,其他的了解即可

第 5.7 : v-else-if 和 v-else

1. v-else : 两种情况的

<h1 v-if="num > 40">第一个h1>
<h1 v-else>第三个h1>

2. v-else-if : 三种以上情况

<h1 v-if="num >= 40">第一个h1>
<h1 v-else-if="num >= 30 && num < 40">第二个h1>
<h1 v-else>第三个h1>

第 5.8 : v-once

1. v-once 作用 : 告诉 vue 这个标签中的内容,只需要解析一次
   即便是数据再发送改变, 那么,这个标签中的内容,也不会被更新

2. 代码

   比如说第一次登陆先显示登陆一欢迎信息

<p>{{ num }}p>
<p v-once>带 onece的 {{ num }}p>

第 5.9 : v-pre

1. 添加 v-pre 指令，就是告诉 vue 这段节点中没有指令或表达式，不需要解析
   这样，Vue 就跳过这一段内容的解析，从而，提升性能
2. 代码

<p>{{ num }}p>
<p v-pre>带 v-pre {{ num }}p>

第 6.0 : v-cloak

1.代码

<h1 v-cloak>{{ msg }}h1>

[v-cloak] { display: none }

alert(1)

2. 分析

1.页面为什么会闪???闪是因为页面的内容 由  {{ msg }} ==> 100
2. 解决办法 : 使用遮盖
	2.1 给要遮盖的元素添加一个 v-cloak 指令
	2.2 使用属性选择器,添加样式
	2.3 vue 会在解析模板后,将 v-cloak指定,从页面中移除,
		移除指令的时候,{{}} 已经变为对应的数据

3. 注意 : 演示每次右键打开,不要在当前页面刷新,有缓存的