Vue教程-day01-2018年12月18日笔记

最新推荐文章于 2022-04-05 21:54:44 发布
最新推荐文章于 2022-04-05 21:54:44 发布
阅读量763 收藏 6
点赞数 3
分类专栏： # 95_javascript 文章标签： vue.js vscode javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41748874/article/details/119941814
版权

文章目录

最近我有些苦恼，也不知道是为了什么。

在正数的工作也不算是很顺心。

行政的工作，让我做得有些心烦。

我很希望自己能够突破一下子。

image-20210828215002874

第1个视频 - vue课程介绍

image-20210824221501365

在这个视频当中，主要说了几个部分。

第一点：老师强调了，上课的时候要进行互动。

第二点：老师强调了他使用的思维导图软件是xmind-zen，是比xmind好用的软件。这个我倒是要去下载下来用用，试试看。

第三点：老师说了一下，整个课程当中的内容，主要是包含一下的部分：

1. 邂逅vue.js
2. vue基础语法
3. 组件化开发
4. vue cli详解
5. vue-router
6. vuex详解
7. 网络封装
8. 项目实战
9. 项目部署
10. vue源码和原理

第2个视频 - vuejs的认识和特点介绍

image-20210824221240960

image-20210824221427885

image-20210824221946342

image-20210824222038986

考试

在这是视频当中，老师主要讲了以下的几个知识点：

  1. 渐进式框架是什么意思，渐进式框架就是你可以使用vue来一点一点改造重构你的项目。
  2. angular和angularjs不是一个东西的，angularjs是以前的东西，angular是新的东西。
  3. github已经说了要慢慢移除jquery的代码了。
  4. angularjs当中可能还用了一些jquery的代码，vue当中是不用jquery的代码的，angular是用typescript。

第3个视频 - vuejs安装方式

image-20210824222340887

image-20210824222440550

我们看到了，这个老师，他演示的时候，使用的是vue2.x

然后老师讲解了一下webstorm和vscode的一些区别。

第4个视频 - hellVuejs的初体验

image-20210824223409706

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{message}}</div> <!--这里交给了vuejs进行管理-->
<div>{{message}}</div> <!--这里没有交给vuejs进行管理-->

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app', //用于挂载要管理的元素
        data: { // 定义数据
            message: '你好呀，李银河！'
        }
    })

    // 原始js的做法
    // 1、创建div元素，设置div属性
    // 2、定义一个变量叫做message
    // 3、将message变量放在前面的div元素当中进行显示
</script>
</body>
</html>

image-20210824225223940

image-20210825130312123

考试

js当中var是没有作用域（√）

es6语法当中是let是用修饰常量的，const是用来修饰变量的（×）

原生js的编程范式是命令式编程，vue的编程范式是声明式编程（√）

声明式编程是可以做到页面和数据的分离（√）

问题：什么叫做响应式？

答案：数据发生改变的时候，页面也发生了改变。

问题：el属性表示的是什么意思？

答案：el表示将html当中的元素挂载到vue当中进行管理。

问题：data属性表示的是什么意思？

答案：data里面设置的是数据，可以自己设置，也可以来自于网络。

第5个视频 - vue列表的展示

image-20210825130539171

王红元闲聊说之前在杭州工作，早上到公司，先打开NBA，11点多开始吃饭，下午敲两三个小时代码就下班了。越往后期越轻松。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{movies}} <!--[ "星际穿越", "大话西游", "少年派", "盗梦空间" ]-->
    <hr>
    <ul>
        <li>{{movies[0]}}</li>
        <li>{{movies[1]}}</li>
        <li>{{movies[2]}}</li>
        <li>{{movies[3]}}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好',
            movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
        }
    })
</script>
</body>
</html>

image-20210825131638519

上面的案例，就表示vue是响应式的，声明出来一个数据，就可以响应式展示出来。

如果是jquery的时候，还需要再创建一个li。

考试

问题：v-for怎么使用

答案：data当中放置一个movies数组，在ul和li当中，li标签上设置v-for=“item in movies”，然后就可以在li标签的内容当中使用{{item}}来渲染数据了。请注意，movies这个data属性当中的变量，是放置在v-for属性的值当中的。

第6个视频 - 计数器

image-20210825132046599

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>当前计数：{{counter}}</h2>
    <!--页面上面有很多事件。click，valuechange，拖拽，touchbegin，touchend-->
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
    <hr>
    <button v-on:click="increment">+</button>
    <button v-on:click="subtraction">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            increment: function () {
                //如果在这里直接写counter，是找不到的，会找全局的counter。
                //响应式当中是做了一层代理的。
                //this表示的就是vue对象。
                this.counter++
                console.log(this)
                console.log("increment被执行了");
            },
            subtraction: function () {
                this.counter--
                console.log(this)
                console.log("subtraction被执行了");
            }
        }
    })

    // 之前的做法：就是命令式的。
    // 第一步，取出来button元素，
    // 第二步，addEventListener，添加监听事件。
    // 第三步，拿到counter修改。
</script>
</body>
</html>

image-20210825133825398

考试
  • 问题：v-on的用法是什么
    • 答案：v-on也是写在html标签元素的属性位置，v-on:后面跟着的是事件名称。
    • v-on:=""里面写的是执行语句、或者是函数名。这个函数名是可以在vue对象参数当中，methods属性的对象值当中定义的函数。
  • 问题：vue当中的methods表示的是什么？
    • 答案：表示的方法，可以在里面自定义函数。
  • 问题：在methods当中怎么拿到data当中定义的变量呢？
    • 答案：通过this关键字。如上面的例子data当中的counter，感觉上应该是属于data对象的，再上一层是属于vue参数对应的，再上一层才是vue对象的。也就是data->{}->vue，可是根据我们的测试，我们的this关键字表示的，就是vue对象，直接通过this.counter就能够拿到data对象当中的变量了。这是因为vue的响应式当中做了一层代理。
  • 问题：v-on:的语法糖是什么？
    • 答案：@，比如v-on:click，可以写成@click。

第7个视频 - Vue中的MVVM

react开发，微信小程序开发，都是这种MVVM的模式，这种模式，才是前端的未来。

MVVM = model view view-model

其实这个意思，就是数据绑定。最重要的是view-model。

vue实例，就是相当于view-model。

model就是js对象。

view就是dom。

view-model做了两件事情：

image-20210826122942633

image-20210826123447986

image-20210826123822543

从上面的图当中，看view - model - view-model就更加清晰。

考试

问题：什么是MVVM？

答案：model - view view-model，这个就是MVVM。

第8个视频 - Vue的options选项

image-20210826124417021

vue实例的options当中，能够传入多少东西？

image-20210826124544844

    const app = new Vue({
        // el: '#app',
        el: document.querySelector(),
        data: obj,
        methods: {
            increment: function () {
                //如果在这里直接写counter，是找不到的，会找全局的counter。
                //响应式当中是做了一层代理的。
                //this表示的就是vue对象。
                this.counter++
                console.log(this)
                console.log("increment被执行了");
            },
            subtraction: function () {
                this.counter--
                console.log(this)
                console.log("subtraction被执行了");
            }
        }
    })
考试

问题：el属性当中，怎么传入html元素

答案：通过document.queryselector()。

问题：在vue实例当中，data属性是个对象，这个我们知道，在组件当中，data是一个什么？

答案：函数。

问题：methods属性的对象当中，函数应该怎么写？

答案：例如add: function(){}。

问题：开发当中，什么时候叫方法，什么时候叫函数？

答案：方法叫method，函数叫function，定义在类里面的函数，叫做方法，一般是和某个实例相挂钩的。单独的函数，就是函数。JS当中是又有方法，又有函数。但是在Java当中，就只有方法，没有函数了。

第9个视频 - 什么是vue的生命周期

vue的声明周期当中，做了非常多，复杂的操作。跟vue实例当中，传入的options有关。

什么是生命周期呢？

生命周期，就是一个事物从诞生到消亡的整个过程。

Vue也有自己的生命周期。

new Vue({})之后，vue就诞生了，然后就消亡了。

image-20210826130039644

源码

从github上，下载vue的源码。

image-20210826130316736

公司当中，软件一般有两个版本，debug版本，release版本。

我们下载了源码，如下图所示：

image-20210826130601457

在src的core的index.js当中，是下面的代码：

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'

initGlobalAPI(Vue)

Object.defineProperty(Vue.prototype, '$isServer', {
  get: isServerRendering
})

Object.defineProperty(Vue.prototype, '$ssrContext', {
  get () {
    /* istanbul ignore next */
    return this.$vnode && this.$vnode.ssrContext
  }
})

// expose FunctionalRenderContext for ssr runtime helper installation
Object.defineProperty(Vue, 'FunctionalRenderContext', {
  value: FunctionalRenderContext
})

Vue.version = '__VERSION__'

export default Vue

这里面export default Vue，这就是ES6当中的导出，我们在页面当中的new Vue()，就是这个东西。

import Vue from './instance/index'

image-20210826130902184

在src/core/instance当中也有一个index.js：

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

上面的代码中，function Vue(options){}这就很像，我们之前定义一个对象的方式。

image-20210826131642041

在instance当中的index.js中，定义了Vue对象。

传入options，通过this._init来进行初始化。

在instance当中的init.js当中，有如下的代码：

image-20210826131926554

在init.js当中，在vue的原型上搞了一个_init方法，在index.js当中，初始化使用的_init方法，就是这个方法。

在这个_init方法中，做了非常多的操作。

生命周期的意义在于，在某个生命周期的阶段，要进行回调，让开发者可以自定义一些操作。

image-20210826133244432

实际上，在我们的vue对象的options当中，传入生命周期函数后，在源码当中，是通过callHook这个函数，来回调的。

考试

问题：在js当中，我们怎么定义一个对象。

答案：function Person(options){}，new Person(options){}

问题：在vue对象的options当中，传入生命周期函数后，源码中是通过什么函数进行回调的。

答案：callHook。

到这里，2018年12月18日上午的课程，就结束了。

第10个视频 - Vue的生命周期函数有哪些

在这里插入图片描述

如上图，绿色部门就是vue源码内部做的东西。红色的部分就是钩子，就是需要开发者自己实现的。

vue实例一般是不会销毁的。但是我们的组件是会销毁的。

我们在做项目的时候，是会用到destroyed()这些钩子的。

在整个生命周期当中给了很多的回调。

image-20210826222103020

这个图也是比较好的。

在这里讲解生命周期，是因为在vue的options当中除了可以传入el，data，methods，还可以传入生命周期函数。

考试

问题：写出来五个vue的生命周期函数

答案：beforeCreate()，created()，beforeMounted()，mounted()，beforeUpdated()，updated()，destroyed()，beforeDestroy()。

第11个视频 - 定义vue的template

image-20210826223011201

从现在开始，就要开始学习基本语法了。

如上图所示的，课程介绍和邂逅vue.js这两个ppt就已经讲完了。

老师讲的第一个事情，是抽取代码模版template。

老师讲的第二个事情，是代码规范。

缩进4个空格，并不是前端开发当中流行的方式。

一般都是缩进2个空格，大型项目的源码都这么干。

image-20210826223346139

举例，像是上面的vue的源码，就是缩建2个空格。

国外的投票统计，一般都是认为2个空格，是更加合适的。

react的源码也是2个空格。

jquery的源码好像是4个空格。

我们之后开发的时候，使用脚手架CLI，用它会创建一个.editconfig文件，配置代码规范，这个也是缩进2个空格。

image-20210826223842050

image-20210826223856155

image-20210826223912545

通过如上的设置，将css，html，javascript的代码都设置为2个空格。

下面就是设置模版，先新建一个html，然后写进去下面的代码，然后复制代码：

image-20210826224511000

然后进入settings开始设置：

image-20210826224426848

image-20210826224709714

image-20210826224754482

考试

问题：前端开发当中缩进几个空格？

答案：2个

问题：怎么在webstorm当中配置代码模版

答案：在editor的live templates当中配置。

第12个视频 - 插值操作 - mustache语法

image-20210826224943495

  1. 插值操作
  2. 绑定属性
  3. 计算属性
  4. 事件监听
  5. 条件判断
  6. 循环遍历
  7. 阶段案例
  8. v-model

image-20210826225000969

mustache这个单词翻译过来，就是胡子的意思。

image-20210826225821880

考试

问题：mustache语法当中可以写表达式吗？

答案：可以。

第13个视频 - 插值操作 - 其他指令使用

v-once

image-20210826230022354

v-once的需求场景是，在响应式中，已经渲染显示的数据，当数据发生改变的时候，不要重新界面渲染了。

image-20210826230416797

v-once的效果是如图所示的：

image-20210826230345814

这个指令，在某些特殊情况下是会使用的，大部分情况下，不会使用的。

v-html

image-20210826230617520

效果如下：

image-20210826231022601

v-text

image-20210826231201921

v-text跟我们的mustache语法比较相似，但是v-text不够灵活。

image-20210826231443672

v-pre

image-20210826231713344

image-20210826231635247

v-cloak

image-20210826231740881

cloak这个单词是斗篷的意思。

这个使用场景是，html是从上到下解析的，当html解析到{{message}}的时候，

这个时候vue还没有进行数据绑定和渲染，用户可能是能够看到{{message}}的。

但是这对用户的体验是不好的。我们在标签上加上v-cloak属性。

在vue解析之前，标签上是有这个v-cloak属性的。

在vue解析之后，标签上是没有这个v-cloak属性的。

我们可以根据有没有v-cloak属性，决定要不要显示这段代码。

这个可以通过样式来进行控制：

//这是css当中的属性选择器。
[v-cloak] {
    display: none;
}

演示的代码如下图所示：

image-20210826232850403

这个v-cloak实际上，以后我们也不会用它。

因为我们以后写的这种

这种模版。

最终都会渲染成为函数的。

我们最终会用的是虚拟DOM。

这个用的最多的，还是我们的mustache语法。

考试

问题：插值操作一共有几个？

答案：mustache、v-once、v-html、v-text、v-pre、v-cloak

v-once：页面渲染后，数据改变，但是不想让元素重新渲染的情况。

v-html：从服务器拿到的数据含有html标签，想要直接解析显示。

v-text：在标签的内容位置显示文本，跟mustache一样，但是不够灵活。

v-pre：如果是在标签的content位置，就是想要显示双大括号，就用这个。

v-cloak：html从上到下解析渲染，如果遇到网络延迟，vue还没有完成数据绑定，这个时候不要让用户看到mustache语法的东西。

第14个视频 - v-bind的基本使用

image-20210826233752620

  • 前面将的都是插值操作，就是文本显示，就是标签之间的内容。

  • 除了这些东西以外，我们标签当中的属性也不是写死的，是要定义的。

    • 举例：<img src="xxxxx" alt="">，这个src属性不会是写死的。
    • 这个src属性值肯定是从网络当中获取的。
    • 例如，轮播图当中的图片地址。发送服务器一个请求，服务器返回json数据，包含很多url。
    • 将url动态放到src当中进行显示。
    • 我们网络数据请求过来之后，会放到data当中，然后动态绑定到属性当中的。
    • 比如a标签当中href属性，也是这样的。

image-20210826233859373

image-20210826234828562

语法糖

image-20210826234911166

真实开发当中，一般就是会使用这个语法糖。

第15个视频 - v-bind动态绑定class（对象语法）

image-20210827001816790

image-20210827001841420

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: orange;
    }
  </style>
</head>
<body>
<div id="app">
  <h2 class="active">{{message}}</h2>
  <h2 :class="active">{{message}}</h2><!--给class属性绑定了一个字符串-->
  <!--开发当中，有时候需要给一个元素加上class，有时候不需要给一个元素加上class-->
  <!--比如有一个列表，显示好几部电影，我点击谁，谁就变成红色-->
  <!--以前的做法，点击谁，给谁加上一个active属性，同时把以前的active属性移除掉-->
  <!--在vue当中有更加简便的做法-->
  <h2 :class="{key1: value1, key2: value2}">{{message}}</h2><!--给class属性绑定一个对象-->

  <!--如下所示，我们可以通过boolean值来控制，元素有没有对应的类名，一般是把boolean值放在vue实例的data当中做的。-->
  <h2 :class="{类名1: boolean, 类名2: boolean}">{{message}}</h2><!--给class属性绑定一个对象-->
  <h2 :class="{active: true, line: false}">{{message}}</h2><!--给class属性绑定一个对象-->
  <h2 :class="{active: isActive, line: isLine}">{{message}}</h2><!--给class属性绑定一个对象-->

  <!--普通的class和动态绑定的class，是会合并的-->
  <h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2><!--给class属性绑定一个对象-->

  <!--需求：点击按钮，上面的字变成红色，再点击按钮，上面的字变成黑色-->
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
      }
    }
  })
</script>
</body>
</html>

image-20210827002541688

image-20210827002506557

考试

问题：什么是动态绑定class的对象语法

答案：在v-bind的基本使用中，我们用img标签的src属性，a标签的href属性做了一个简单的距离。但是元素最通用的就是class属性。我们可以通过动态绑定，给class属性绑定一个对象。这个对象里面是键值对。键的意思就是class属性值，值的意思就是布尔值。然后我们将布尔值放到vue实例当中进行处理，可以在data属性当中进行定义。然后结合v-on绑定操作事件，通过函数控制布尔值，控制布尔值就能够控制class的属性值，进而控制样式。

问题：为什么动态绑定class的时候，属性值对象，可以放到methods当中，然后进行函数调用需要加上小括号。但是v-on进行函数调用的时候，没有加上小括号。

答案：没什么道理。v-on进行函数调用的时候，是可以省略的。

第16个视频 - v-bind动态绑定class（数组语法）

image-20210827003411982

数组语法这个东西，用的比较少。

考试

问题：v-bind动态绑定class属性的数据语法是什么？

答案：<h2 class="title" :class="[active, line]"></h2>

第17个视频 - v-bind和v-for结合的作业布置

作业

image-20210827003949310

如图，一开始让【海王】默认变成红色，之后就是我点击谁，谁变成红色。

image-20210827004107273

第18个视频 - v-bind动态绑定style（对象语法）

image-20210827191916723

为什么要动态绑定样式？

我们在组件化开发的时候会用到。

什么是组件化呢？

我们会把导航栏封装到navigation.vue文件当中。这个东西，就叫做一个组件。

封装组件的作用，组件就是可复用的。

另外的页面当中，也可以使用navigation.vue。

image-20210827193106678

很多类似这些东西，都会封装成一个一个小的组件。

这个背景的颜色就不能写死了。这些组件的样式就不能写死了。

让用的人来决定，使用什么样式。

这种情况的时候，就需要动态来绑定属性了。

image-20210827193909126

如果运行上面的代码，会报错的。因为并没有50px这个变量。

image-20210827193825622

解决的办法是：

<h2 :style="{fontSize: '50px'}">{{message}}</h2>

image-20210827194625310

image-20210827194829891

PPT当中需要补充的内容：

image-20210827195002716

上面就是v-bind绑定style样式的对象语法和数组语法的案例。

如果你觉得v-bind:style的值非常长，你可以将他们写在methods当中。

如下图所示：

image-20210827195311653

考试

问题：v-bind的对象语法当中，key和value什么时候是需要加单引号的。

答案：key是不用加单引号的，直接就会当做属性名或者类名，是一个字符串。

value是加上单引号的时候，才会被看成是字符串。value如果不加单引号的时候，看成的是变量。

第19个视频 - v-bind动态绑定style（数组语法）

image-20210827200001804

上面的就是v-bind动态绑定style的数组语法。

考试

问题：v-bind的数组语法是用在什么场景？

答案：样式一般都是key/value的，可以把一对key和value或者多对key和value放在对象当中，然后把对象的变量，放在数组当中。

这个场景，就会用到数组语法了。当然了，这种场景是非常少见的，用的也是比较少的。

第20个视频 - 计算属性的基本使用

image-20210827200330010

idea小技巧

如果你写一个单词是拼写错误的，你有强迫症，你可以将这个东西加入到字典当中：

image-20210827201023867

详细的计算属性的基本使用，在下面的图中：

image-20210827203119437

考试

问题：计算属性放在mustache语法当中为什么不用加小括号

答案：计算属性，本质是一个属性，虽然，看起来，像是跟methods一样，在里面写了一个函数，但是在mustache当中调用的时候，就是不用写小括号。这是为什么呢？这是王八的屁股，规定。

问题：计算属性命名的时候，有什么需要注意的呢？跟methods里面的函数命名的时候有什么不一样的呢？

答案：methods里面的函数命名的时候，一般都是动词+名词的这个习惯，比如说getTotalPrice()这样的，但是计算属性的本质是一个属性，所以命名的时候，是没有必要加上动词的，一般命名的时候，就是totalPrice()这种名字就好了。

第21个视频 - 计算属性的复杂操作

计算属性难道就只有那么一点作用的吗？

当然不是的。

有些时候，你是必须使用计算属性的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--显示书的总价格-->
  <h2>总价格：{{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 110, name: 'Unix编程艺术', price: 119},
        {id: 111, name: '代码大全', price: 105},
        {id: 112, name: '深入理解计算机原理', price: 98},
        {id: 113, name: '现代操作系统', price: 87}
      ]
    },
    computed: {
      /* 后面讲一下高阶函数：filter reduce map */
      totalPrice: function () {
        let result = 0;
        for (let i = 0; i < this.books.length; i++) {
          result += this.books[i].price;
        }
        return result;
      }
    }
  });
</script>
</body>
</html>
高阶函数

后面讲一下高阶函数：filter reduce map。

es6的for循环

第一种

for (let i in this.books) {
          result += this.books[i].price;
}

第二种

for (let book of this.books) {
    result += book.price
}
计算属性的本质

image-20210827204834929

计算属性的缓存

image-20210827204917737

考试

问题：computed和methods的区别是什么？

答案：computed是有缓存的，调用多次的时候，其实只会调用一次。methods是没有缓存的，调用多次的时候，就是调用多次。methods的性能要低一些，computed的性能要高一些。

问题：es6当中for循环的写法？

第一种

for (let i in this.books) {
          result += this.books[i].price;
}

第二种

for (let book of this.books) {
    result += book.price
}

第22个视频 - 课堂回顾

image-20210827205130642

image-20210827205205641

2018年12月28日，今天都讲了一些什么东西呢？

一、邂逅vue.js

  • 1.1 - 认识vue.js
    • 为什么学习vue
    • vue的读音
    • vue的渐进式
    • vue的特点
  • 1.2 - 安装vue.js
    • cdn引入
    • 下载引入
    • npm安装
  • 1.3 - vue的初体验
    • helloVuejs.html
      • mustache语法 - 体验vue的响应式
    • vue的列表展示
      • v-for
      • 后面给数组追加元素的时候，新的元素也可以在界面中渲染出来
    • vue的计算器小案例
      • 事件监听: v-on:click -> method
  • 1.4 - vue的MVVM
  • 1.5 - 创建vue时候options可以放个哪些东西
    • el
    • data
    • methods
    • computed
    • 生命周期函数

二、插值语法

  • mustache语法
  • v-once
  • v-html
  • v-text
  • v-pre
  • v-cloak

三、v-bind动态绑定

  • 基本属性：img的src，a的href
  • class属性：对象语法（作业），数组语法
  • style属性：对象语法，数组语法

四、计算属性

  • 基本使用：firstName+lastName
  • 复杂使用：books数组有很多book，计算价格。

王红元的电脑配置：

image-20210827210326010

codelyq
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
B站王红元（codewhy）vue课件以及笔记
01-12
B站王红元（codewhy）vue课件以及笔记
B站coderwhy老师Vue课程上课课件代码笔记资料
09-11
B站视频地址： https://www.bilibili.com/video/BV15741177Eh?from=search&seid=291894933216424179 B站视频是免费的，讲的很好，这里放一份资料，方便大家学习。
vue-ssr视频笔记
weixin_42113124的博客
10-17 441
一、vue-ssr项目前期配置 代码规范：eslint和editorconfig插件以及precommit 1、安装使用eslint和editorconfig以及precommit 1.1 安装 npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import...
vue3视频学习笔记
十九万里的博客
10-07 212
一、vue3.0基础 vue3.0目前是国内最火的开发框架，2020.9.18发布vue3.0正式版 目前支持vue3.0的ui组件库： ant-design-vue element-plus vant等 学习的路线主要是vue3.0文档 二、vite的使用 vite是一个原生ESM驱动的web开发构建工具，在开发环境下基于浏览器原生ES inports开发 可以用于快速构建vue3的工程化项目环境 1、vite的基本使用 npm init vite -app 项目名称 cd 项目名称 yarn yar
vue 实战课件,讲解,教程.zip
08-12
vue 实战课件,讲解,教程.zip
vite-plugin-vue-i18n:Vue I18n的快速插件
04-09
:globe_with_meridians: @ intlify / vite-plugin-vue-i18n Vue I18n的Vite插件 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的...
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
vue3.0 vue-quill-editor.rar
09-19
Vue3.0是Vue.js框架的重大更新，带来了许多性能优化和功能增强，旨在提供更高效、更灵活的开发体验。这次升级引入了Composition API，它允许开发者以更模块化的方式组织组件逻辑，使得代码更易于理解和维护。Vue3.0...
vue-i18n-loader：用于自定义块的vue-i18n-loader
02-06
@ intlify / vue-i18n-loader 用于自定义块的vue-i18n加载程序 注意： :warning: next分支是Vue 3的开发分支！ 稳定版现已在分支中！ 状态：测试版 :star: 产品特点 i18n资源预编译 i18n自定义块 i18n资源定义 i18...
vue-country-flag:国旗的Vue组件
05-01
vue-country-flag 国家标记作为Vue组件 Vue 3支持 从2.0.3版开始，此组件同时支持Vue2和Vue3。 为了将其与Vue 3配合使用，请按如下所示安装vue-country-flag-next软件包： npm install vue-country-flag-next Vue...
vue课件 b站老师.rar
06-24
这是B站中“2019年最全最新Vue、Vuejs教程，从入门到精通”这个视频的源码，只要看玩，估计vue就学的差不多了
vue学习ppt
10-23
这是一个车不认识vue的简单ppt，轻松演示，画面简洁，一目了然！
vue初步学习ppt
12-09
初步认识vue 简单ppt
vue学习笔记（2）.md
06-09
感谢王红元老师的开源精神，喜欢的朋友可加老师VXin（coderwhy001）拿全套课程资源，开源不易，感谢支持。
vue3 -----视频讲解
09-23
vue -----视频讲解
Vue教程-day03-2018年12月21日笔记
浪漫韫秋
08-29 646
文章目录上午 - 9点 - 12点 - 3小时第44个视频 - javascript高阶函数的使用filter函数map函数reduce函数需求用高阶函数实现链式编程箭头函数之前的购物车案例总价格计算使用reduce考试第45个视频 - v-model的使用和原理示例代码v-model的原理和本质对input的小小总结回归v-model的本质v-model的本质总结考试第46个视频 - v-model结合radio类型使用表单input radio和v-model结合小知识点考试第47个视频 - v-mod
03-Vue的Options API
mjjhen的博客
09-19 567
前言 本文章来源于王红元老师（coderwhy）的 Vue3 + Ts 课程 附上链接：https://ke.qq.com/course/3453141 谁能拒绝一个100%好评还加课的老师呢 目录 前言 computed 认识计算属性computed 计算属性的基本使用 计算属性 vs methods 计算属性的setter和getter 侦听器watch 侦听器watch的基本使用 侦听器watch的配置选项 侦听器watch的其他方式 阶段案例 案例介绍 项目搭建
Vue3项目搭建学习笔记
baidu_41388533的博客
03-23 1362
创建项目 vue create vue3-ts-cms 项目搭建规范 集成editorconfig配置 VSCode需要安装一个插件：EditorConfig for VS Code 新建文件.editorconfig # http://editorconfig.org root = true [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = space # 缩进风格（tab | spa.....
vue3项目搭建
weixin_52247167的博客
04-05 1712
文章目录 前言 一、创建项目 二、集成editorconfig配置 1. 在VSCode中安装editorconfig插件 2. 根目录下添加.editorconfig文件 三、使用prettier工具 1. 安装prettier 2.根目录下添加.prettierrc文件 3.根目录下添加.prettierignore文件 4. 在VSCode中安装prettier-code formatter插件 5. prettier的使用 四、eslint 1. 安装eslint ..
vue-property-decorator笔记
最新发布
08-20
`vue-property-decorator` 是一个用于在 Vue 中使用装饰器语法的库，它提供了一些装饰器来简化 Vue 组件的开发过程。这些装饰器可以用于定义组件的属性、方法、计算属性、生命周期钩子等。 以下是一些常用的装饰器和它们的用法： - `@Component(options?: ComponentOptions)`：将一个类声明为一个 Vue 组件。可以传入一个可选的 `ComponentOptions` 对象来配置组件选项，例如 `template`、`props`、`computed` 等。 - `@Prop(options?: (Vue.PropOptions | Vue.Constructor[] | Vue.Constructor)[] | Vue.PropOptions)`：定义一个组件的 prop 属性。可以传入一个可选的 `PropOptions` 对象来配置 prop 的类型、默认值等。 - `@Watch(path: string, options?: WatchOptions)`：监听一个属性或表达式的变化，并在变化时执行相应的方法。可以传入一个可选的 `WatchOptions` 对象来配置监听选项，例如 `deep`、`immediate` 等。 - `@Emit(event?: string)`：将一个方法标记为触发事件的方法，并指定要触发的事件名。可以传入一个可选的事件名，默认为方法名。 - `@Ref(refKey?: string)`：获取子组件或 DOM 元素的引用，并将其赋值给指定的属性。可以传入一个可选的引用键，默认为属性名。 - `@Inject(key?: string | symbol)`：注入一个父组件提供的属性或方法。可以传入一个可选的注入键，默认为属性名。 - `@Provide(key?: string | symbol)`：在组件中提供属性或方法，以供子组件注入使用。可以传入一个可选的提供键，默认为属性名。 - `@Model(event?: string, options?: (PropOptions | Constructor[] | Constructor)[] | PropOptions)`：将一个 prop 属性设置为组件的 v-model。可以指定要触发的事件名和 prop 的配置选项。 这些装饰器可以与 `vue-class-component` 一起使用，帮助我们更清晰、简洁地定义 Vue 组件，并提供更好的类型支持和可读性。 希望这些笔记对你有所帮助！如有任何疑问，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值