Vue(day1)

一 : 课程介绍

  1. Vue 基础知识 (指令 + todomvc )

  2. Vue 全家桶 ( vue /vue-router / vuex + axios )

  3. 组件化开发 : 最近比较流行的一种开发模式 , 之前是原生 =>模块化 => 组件化

    把一个完成的项目划分成一个小小的组件

  4. webpack - 前端模块化打包构建工具

  5. Vue 项目 - 后台管理系统

二 : 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 (面试)

第 3.1 MVC

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

第 3.2 MVVM

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

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

第 3.3 MVVM 优势

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

第 3.4 Vue 中的 MVVM

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

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

第 3.5 学习 Vue 要转化思想

  • 采用的是 : 数据驱动视图的思想, 数据是核心

  • 以后如果想要操作 DOM, 立马想到的不是应该是拿到元素设置,而是数据

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

四 : 起步 - Hello Vue

第 4.1 : 基本使用

  1. 安装 : npm i vue (小写)
  2. 导入 : <script src='./vue.js'></script>
  3. 实例 vue
// 引入的 vue.js 里 暴露出来一个 构造函数 Vue
const vm = new Vue({
  // 指定 vue 管理的边界
  el: '#app',
  // 提供视图中 需要的数据
  // 视图可以直接使用data中的数据
  data: {
    msg: 'xxx'
  }
})

第 4.2 : 使用注意点

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

4.3 {{}} 插值表达式

  1. 解释：使用{{}}（插值表达式）从data中获取数据，并展示在模板中
  2. 说明：{{}}中只能出现JavaScript表达式
  3. 说明：数据对象的属性值发生了改变，插值处的内容都会更新
  • 表达式
    • 运算符 : {{ msg + 500}}
    • 调用方法 : {{ [14,7].join('-') }}
    • 三元 : {{ true ? '真':''假 }}
  • 不能使用语句 if语句 for语句

五 : 数据双向绑定演示

第 5.1 : 一个 input + v-model

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

第 5.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
  }
})

第 5.3 : 数据双向绑定的原理简单实现

通过数据劫持来实现的

  1. <input type="text" id="txt" />
  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
  }
})
  1. V => M
//1. 获取 input的值,最新值
//2. 通过监听oninput 拿到最新值
//3. 把最新值赋值给 obj.name
//4. 就会掉了set方法,就会修改了数据
  1. M => V
//1. obj.name = 'xxx'
//2. 调用 set方法
//3. 把值赋值给input元素

六 : 指令学习

  • 解释：指令 (Directives) 是带有 v- 前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性
  • 作用：指令提供了一些特殊的功能，当指令绑定到标签上时，可以给标签增加一些特殊的行为
  • 比如 : v-model v-bind v-if v-for 等等

第 6.1 v-model (常用)

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

<!-- 文本输入框 绑定的是值 -->
<input type="text" v-model="txt" />
<!-- 多选框  绑定的选中状态 -->
<input type="checkbox" v-model="isChecked" />

第 6.2 v-text 和 v-html

说明 : 设置文本内容

  1. v-text : 相当于之前的 innerText , 设置文本内容(不识别 html 标签) == 标签内部{
  2. v-html : 相当于之前的 innerHTML , 设置文本内容(是被 html 标签)
  3. 数据
   msg1: '<a>这是一条信息</a>',
   msg2: '<a href="#">我也是一条信息</a>'

第 6.3 v-bind (常用)

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

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

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

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

以后 使用
静态加载数据 : <a href="https://wbaidu.com">aaa</a>
动态加载数据 : <a :href="href">aaa</a>

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

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

容易出错点 : 
<!-- v-model 数据双向绑定 -->
<!--场景 :  表单元素中 -->
<input type="checkbox" v-model="isChecked1" /> <br />
<!--  v-bind 数据动态绑定 (单向) -->
<!--场景 :  主要用在属性中 -->
<input type="checkbox" :checked="isChecked2" />*

第 6.4 操作样式

1.操作样式

<!-- 1. 静态类名 -->
<h1 class="red">哈哈</h1>

<!-- 2. 动态类名 -->
<h1 :class="cls">哈哈</h1>

<!-- 3. 最常用 -->
<!-- :class 里的值是一个对象 
      键 : 类名 (可能会要,也可以不要)
      值 : 布尔值, true/false 确定类要不要
     -->
<h1 :class="{ red:isRed , fz:isFZ}">哈哈</h1>

<!-- 4. style -->
<h1 :style="{ color : 'red', fontSize : fz + 'px' }">哈哈</h1>

2.其他操作

<!-- 1 -->
<!-- 重点 -->
<div :class="{ active: true }"></div>
===>
<div class="active"></div>

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

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

--- style ---
<!-- 1   -->
<h1 :style="{ color : 'red', fontSize : fz + 'px' }">哈哈</h1>
<!--  fz : 80 -->

<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<!-- 如果有相同的样式，以后面的样式为准 -->
<div :style="[baseStyles, overridingStyles]"></div>

第 6.5 v-on 指令

注册事件/绑定事件

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

    : 后面是事件名称

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

  1. 缩写 : @click='fn'
    <button @click='fn'>按钮</button>

  2. 函数写在 methods 里面

fn : function(){ ... }
fn() { ... }
  1. 函数里面的 this 指的就是 vm 实例
> 在函数里面操作数据
- 获取数据  this.msg
- 修改数据  this.msg = 'XXX'
  1. 传参
    5.1 正常传参
@click='fn(123)'

5.2 事件对象 $event

<!-- 4.1 绑定事件对象的时候, 没有添加小括号,此时,直接在方法中,通过参数 e 就可以获取到事件对象 -->
<!-- 4.2 如果添加小括号,就拿不到事件对象了,vue留了一个$event -->
<button @click="fn1($event,123)">我是按钮</button>

6.5 v-for

  1. v-for 指令： 遍历数据，为数据中的每一项生成一个指令所在的标签
  2. 代码
<!-- 需求1 : 最常用 遍历数组 -->
<!-- 作用 : 遍历 list1 数据, 为数据中的每一项生成一个li标签 -->
<!-- item 数组里的每一项元素 -->
<ul>
  <li v-for="(item,index) in list1">{{ item }} - {{ index }}</li>
</ul>
<!-- 需求2 : 遍历元素是对象的数组 -->
<ul>
  <li v-for="(item,index) in list2">{{ item.name }} - id:{{ item.id }}</li>
</ul>

<!-- 需求3 : 遍历对象 -->
<ul>
  <li v-for="(item,key) in obj">{{ item }}-{{key}}</li>
</ul>

<!-- 需求4 : 想要生成10个h1 -->
<h1 v-for="item in 10">我是h1 {{ item }}</h1>
  1. 重点是遍历数组,,其他的了解即可

第七步 : TODOMVC

一 : 准备工作

  1. Vue-TodoMVC

  2. 演示效果 :

  3. 当前任务:敲代码、视频、游戏

  4. 下载模板地址

    git clone https://github.com/tastejs/todomvc-app-template.git

  5. 安装依赖包 : npm i

二 : 配置 vue

  1. 安装 vue : npm i vue

  2. 导入 vue : <script src="./node_modules//vue/dist/vue.js"></script>

    在 index.html里的app.js 导入之前导入,因为 app.js 里 就要用到 vue 了

  3. 实例化 vue :在app.js中创建 vue 示例,并设置好边界 el:'#app'

    找到 index.html ,给 section 标签添加一个 id

  4. 测试 vue :

    data 中随便来一个 msg 看能不能显示到视图中

posted @ 2020-04-17 10:57  handsomehe  阅读(177)  评论(0)  编辑  收藏  举报