Vue从入门到精通 B站(001-022)

最新推荐文章于 2024-08-04 12:47:40 发布
最新推荐文章于 2024-08-04 12:47:40 发布
阅读量148 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oscarlic/article/details/110289748
版权

1. Vue.js课程介绍

2. Vue的认识和特点介绍

3. Vue.js安装

  1. 安装方式：
    1. CDN引入：选择开发环境版本
      <!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
    2. 下载和引入（先用这种）
      开发环境 https://vuejs.org/js/vue.js
      生产环境 https://vuejs.org/js/vue.min.js
    3. NPM安装（脚手架的使用）：后续通过webpack和CLI的使用，我们使用该方式

4. HelloVue的初体验

  • 注：let（定义变量）/const（定义常量），ES6中基本不用Var
  • 代码：
<body>
    <div id="app"> {{ message }} </div>
    <script src="../js/vue.js"></script>
    <script>
        // let(定义变量)/const（定义常量），ES6中基本不用Var
        // 编程范式：声明式编程。优点：数据与界面处理完全分离
        const app = new Vue({
            el: "#app",   // 用于挂载要管理的元素
            data: {       // 定义数据
                message: '宁好'
            }
        })
        /* 原始JS的做法（编程范式：命令式编程）：
        1. 创建div元素，设置id属性
        2. 定义一个变量叫message
        3. 将message变量放在前面的div元素中显示
        4. 修改message数据：今天天气不错
        5. 将修改后的数据再次替换到div元素 */
    </script>
</body>
  • 第一个Vue程序，体验Vue的响应式

5. Vue列表的展示

  • 体验v-for指令的用法
  • 代码：
<body>
    
    <div id="app">    
        <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>
  • 效果：

6. 小案例 - 计数器

  • 代码：
<body>
    <div id="app">
        <h2>当前计数：{{ counter }} </h2>
        <button @click="add">+</button>
        <button @click="sub">-</button>
        <!-- <button @click="counter++">+</button> -->
        <!-- <button @click="counter--">-</button> -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                counter: 0
            },
            methods: {
                add: function () {
                    console.log('add被执行');
                    this.counter++   // this代表当前对象
                },
                sub: function () {
                    console.log('sub被执行');
                    this.counter--  // this代表当前对象
                }
            }
        })
        // 1.拿button元素
        // 2.添加监听事件(v-on，可以简写为@，这种简写的方式又称为语法糖)
    </script>
</body>
  • 总结：
    1. 新的属性：methods，该属性用于在Vue对象中定义方法
    2. 新的指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是methods中定义的方法）

7. Vue中的MVVM

  • MVVM：Model-View-ViewModel

  • 计数器中的MVVM

    1. View依然是我们的DOM
    2. Model就是我们我们抽离出来的obj（app）
    3. ViewModel就是我们创建的Vue对象实例
    • 工作方式：
      1. 首先ViewModel通过Data Binding让obj（app）中的数据实时的在DOM中显示
      2. 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj（app）中的数据

8. 理解Vue的options选项

我们在创建Vue实例的时候，传入了一个对象options。

  • 目前先掌握这些选项：
    1.el：
    1. 类型：string | HTMLElement
    2. 作用：决定之后Vue实例会管理哪一个DOM
    2. data：
    1. 类型：Object | Function （组件当中data必须是一个函数）
    2. 作用：Vue实例对应的数据对象
    3. methods：
    1. 类型：{ [key: string]: Function }
    2. 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用
  • 补充：开发中什么时候称为方法，什么时候称之为函数？
    • 方法：method，定义在类中，与一个对象相关联
    • 廖雪峰网站：绑定到对象上的函数称为方法，和普通函数也没啥区别，但是它在内部使用了一个this关键字。在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性

9. 什么是Vue的生命周期

  • 生命周期：事物从诞生到消亡的整个过程

10. 理解Vue的生命周期有哪些

11. 定义Vue的template

  • 补充：代码规范：缩进4个空格或缩进2个空格（前端大型开源项目经常使用）

12. 插值操作 - Mustache语法

  • 问：如何将data中的文本数据，插入到HTML中呢？

    • 答：我们已经学习过了，可以通过Mustache语法(也就是双大括号)

  • 补充：Mustache语法不仅可以直接写变量，也可以写简单的表达式

13. 插值操作 - 其他指令的使用

  1. v-once
    该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)

    • 指令：

    • 结果：

  2. v-html
    该指令后面往往会跟上一个string类型，并会将string的html解析出来并且进行渲染

  • 代码：
<body>
    <div id="app">
        <h2> {{ url }} </h2>
        <h2 v-html="url"></h2> 
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:'宁好',
                url:'<a href="http://www.google.com">谷歌搜索</a>'
            }
        })
    </script>   
</body>
  • 效果：
  1. v-text指令
    v-text作用和Mustache比较相似，都是用于将数据显示在界面中。但是v-text不够灵活，所以一般不使用
  • 代码：
    <div id="app">
        <h2> {{ message }} </h2>
        <h2 v-text="message"></h2>
    </div>
  • 结果：
  1. v-pre
    v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法
  • 代码：
    <div id="app">
        <h2> {{ message }} </h2>
        <h2 v-pre> {{ message }} </h2>
    </div>
  • 结果：
  1. v-cloak（cloak：斗篷）
  • 代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h2> {{ message }} </h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        // 在Vue解析之前，div中有一个属性v-clock
        // 在Vue解析之后，div中就没有一个属性v-cloak
        setTimeout(function () {
            const app = new Vue({
                el: "#app",
                data: {
                    message: '宁好'
                }
            })
        }, 1000)
    </script>
</body>

</html>
  • 结果 ：“宁好”在空白一秒后显示

14. v-bind的基本使用

  • v-bind简介：
    1. 作用：动态绑定属性
    2. 缩写：:
    3. 预期：any (with argument) | Object (without argument)
    4. 参数：attrOrProp (optional)
  • 代码：
<body>
    <div id="app">
        <img v-bind:src="imgURL" alt="">
        <br>
        <a :href="aHref">谷歌搜索</a>  <!-- 语法糖写法 -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: '宁好',
                imgURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/OSIRIS_Mars_true_color.jpg/600px-OSIRIS_Mars_true_color.jpg',
                aHref: 'http://www.google.com'
            }
        })
    </script>
</body>

  • 结果：

  • v-bind语法糖：可简写为:

15. v-bind动态绑定class（对象语法）

对象语法的含义是：class后面跟的是一个对象

  • 代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <h2 class="active"> {{ message }} </h2> -->
        <!-- <h2 :class="active"> {{ message }} </h2> -->
        <!-- <h2 v-bind:class=" {key1:value1, key2:value2}"> {{ message }} </h2> -->
        <!-- <h2 v-bind:class=" {类名1:boolean}, 类名2:boolean} "> {{ message }} </h2> -->

        <h2 v-bind:class="{active: isActive, line: isLine}"> {{message}} </h2>
        <button @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>
  • 结果：

属性如图：

控制台输入：

字体的蓝色消失且无active属性：

点击按钮，字体交替变色：

  • 总结：
    用法一：直接通过{}绑定一个类
    <h2 :class="{'active': isActive}">Hello World</h2>
    用法二：也可以通过判断，传入多个值
    <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
    用法三：和普通的类同时存在，并不冲突
    注：如果isActive和isLine都为true，那么会有title/active/line三个类
    <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
    用法四：如果过于复杂，可以放在一个methods或者computed中（后面再讲）
    注：classes是一个计算属性
    <h2 class="title" :class="classes">Hello World</h2>

16. v-bind动态绑定class（数组语法）

数组语法的含义是：class后面跟的是一个数组

  • 总结：
    用法一：直接通过{}绑定一个类
    <h2 :class="['active']">Hello World</h2>
    用法二：也可以传入多个值
    <h2 :class=“[‘active’, 'line']">Hello World</h2>
    用法三：和普通的类同时存在，并不冲突
    注：会有title/active/line三个类
    <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
    用法四：如果过于复杂，可以放在一个methods或者computed中
    注：classes是一个计算属性
    <h2 class="title" :class="classes">Hello World</h2>

17. v-for和v-bind结合的作业布置

18. v-bind绑定style（对象语法）

  • 语法：
    style后面跟的是一个对象类型
    • 对象的key是CSS属性名称
    • 对象的value是具体赋的值，值可以来自于data中的属性
      :style="{color: currentColor, fontSize: fontSize + 'px'}"
  • 代码：
<!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="app">

        <!-- <h2 :style="{key(CSS属性名): value(属性值)}">{{ message }}</h2> -->
        <!-- 50px必须加上单引号，否则会被当成变量解析 -->
        <h2 :style="{fontSize: '50px'}"> {{ message }} </h2>
        <!-- font和size的连接既可用以上的驼峰标识，也可用font-size -->
        <h2 :style="{fontSize: finalSize, color: finalColor}"> {{ message }} </h2>
        <!-- finalSize被单成一个变量使用 -->
        <!-- 在Vue中，引用key时可以不加单引号，但引用value时必须加单引号 -->
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: '宁好',
                finalSize: '100px',
                finalColor: 'blue',
            }
        })
    </script>

</body>

</html>
  • 效果：

19. v-bind绑定style（数组语法）

  • 语法：
    style后面跟的是一个数组类型。若为多个值，分割即可
    <div v-bind:style="[baseStyles, overridingStyles]"></div>
  • 代码：
<!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="app">
        <h2 :style="[baseStyle, baseStyle1]">{{ message }}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:'宁好',
                baseStyle: {backgroundColor:'yellow'},
                baseStyle1: {fontSize:'100px'},
            }
        })
    </script>
    
</body>
</html>
  • 结果：

20. 计算属性的基本使用

  • 代码：
<!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="app">
        <h2>{{ firstName + ' ' + lastName }}</h2>
        <h2>{{ firstName }} {{ lastName }}</h2>
        <h2>{{ getFullName() }}</h2>
        <h2>{{ fullName }}</h2> <!-- 计算属性后不需要加() -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                firstName: 'LeBron',
                lastName: 'James'
            },
            // computed：计算属性
            computed: {
                fullName: function () {
                    return this.firstName + ' ' + this.lastName;
                }
            },
            methods: {
                getFullName() {
                    return this.firstName + ' ' + this.lastName;
                }
            }
        })
    </script>
</body>

</html>
  • 结果：

21. 计算属性的复杂操作

  • 代码：
<!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="app">
        <h2>总价格: {{ totalPrice }}</h2>
    </div>

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

</body>

</html>
  • 结果：

22. 课堂回顾

oscarlic
关注
专栏目录
Vue入门笔记（B站）
方同学的博客
07-18 194
文章目录00.Html5框架代码01.Vue官网地址02.第一个Vue程序03.el挂载点04.data数据对象05.本地应用_v-text指令({{}}指令)06.本地应用_v-html指令07.本地应用_v-on指令(@指令)08.本地应用_v-show指令09.本地应用_v-if指令10.本地应用_v-bind指令(:指令)11.本地应用_v-for指令 00.Html5框架代码 <!DOCTYPE html> <html lang="en"> <head>
Vue从入门到精通
m0_57246577的博客
09-01 171
第2章 vue开发基础（上） 1.vue组件 vue可以进行组件化开发，组件是vue的基本结构单元，开发过程中使用起来非常方便灵活，只需按照vue规范定义组件，将组件渲染页面即可，组件可实现复杂的页面结构，提高代码复用性。 1-1 什么是组件：vue中，组件是构成页面中独立结构单元，①能减少重复代码的编写，提高开发效率，②降低代码之间的耦合程度，让项目更容易维护和管理，其主要以页面结构的形式存在，不同组件也具有基本交互功能，③根据业务逻辑实现复杂的项目功能。（组件的三个特性） <div i.
vue从入门到精通
03-28
vue从入门到精通适合刚入职场的小白，也适合职场多年的前端高手，为您全方位打造
视频教程-vue从入门到精通-Vue
weixin_33709681的博客
05-28 402
vue从入门到精通 软通动力教育集团简称软通大学，依托软通动力在技术服务领域...
Vue从入门到精通全网最强保姆级教程(持续更新中)
最新发布
2301_81007211的博客
08-04 1132
Vue是前端优秀框架， 是一套用于构建用户界面的渐进式框架。
vue从入门到精通教程,vue入门教程简书
chatgpt001的博客
11-23 893
爆肝15天，本文共4万5千字，包含Vue.js理论到实战。知识点全部都能使用ctrl+f速查，可作为知识点速查笔记使用Python解释器的安装步骤。尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通加工整理而成，包括其代码，案例，资源等。前置知识是学习尚硅谷的视频教程，本文配合其教程食用，效果更佳。从零开始的全栈之路-笔记资料篇: 助力您的全栈之路。
《Vue入门到精通系列》--- 两万字带你入门Vue
2401_84097696的博客
04-20 788
在模板中可以直接通过插值语法显示一些data中的数据 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示比如我们有firstName和lastName两个变量，我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}我们可以将上面的代码换成计算属性：OK，我们发现计算属性是写在实例的computed选项中的。总结来说，面试成功=基础知识+项目经验+表达技巧+运气。
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
1. Vue从入门到精通（第一章 vue核心）
cjhxydream的博客
05-24 2832
Vue基础1. Vue简介1.1 Vue是什么？1.2 Vue的作者以及迭代版本1.3 Vue的特点2. 搭建Vue开发环境2.1 安装Vue的方式2.1.1 第一种安装方式：直接使用1. Vue简介 1.1 Vue是什么？ Vue是一套用于构建用户界面的渐进式JavaScript框架 构建用户界面：将数据变成用户可以看到的界面 渐进式：是指Vue可以自底向上逐层的应用 对于简单应用，只需要轻量小巧的核心库 对于复杂应用，可以引入各种Vue插件 1.2 Vue的作者以及迭代版本 1.3 Vue
VUE.JS视频教学-入门到精通-全套
07-04
vue.js视频教程从入门到精通，全套视频，好东西就要分享，祝愿所有的开发小伙伴能学到东西。
3.Vue从入门到精通 （第三章 使用Vue脚手架）
cjhxydream的博客
07-21 1280
Vue从入门到精通 第三章 使用Vue脚手架
vue从入门到精通之【vue-router】(八)
qq_36812154的博客
01-03 591
vue从入门到精通之【vue-router】(八) 前端路由（vue-router/react-router-dom） 单页面应用& 多页面应用 「SPA（single page application）单页面应用」：一个项目只有一个页面，我们基于路由，控制页面展示不同的片段（或组件），当展示内容改变的时候，页面并不会刷新！！ 「MPA（multi page application）多页面应用」：一个项目有很多页面，我们做的是页面之间的跳转，每一次跳转都是打开新的页面（相当于页面刷新了.
【从入门到精通】Vue.js 教程
♀我爱摇滚，更爱金属乐♀
04-28 3052
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 002-实现第一个VueJS应用.html 下载vue: http...
《Vue入门到精通》最强Vue教程，附带经典案例，万字详解，干货十足！
热门推荐
abraham_ly的博客
03-21 1万+
目录：一、前言二、Vue是什么？1、简介2、发展史3、为什么要学习Vue？4、jQuery、javascript、Vue的区别5、Vue框架构造三、Vue的使用1、Vue环境搭建2、插值表达式3、指令（Directives）1、什么是指令2、指令API1、v-cloak 解决插值闪动2、v-text 填充纯文本3、v-html ：填充HTML片段4、v-pre 填充原始信息5、v-once 只编译一次6、v-model 双向数据绑定7、v-on 事件绑定8、v-bind 属性绑定9、v-if 分支结构v-i
Vue.js从入门到精通
weixin_56580267的博客
12-14 2056
.stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件监听器使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时回调 .once 事件只触发一次
JavaScript教程：从入门到精通的完整指南
"这是一份全面的JavaScript教程，旨在帮助读者从零基础开始掌握JavaScript，直至精通。教程以PDF形式提供，由互联网上的多个资源整理而成。教程详细介绍了JavaScript这门编程语言，以及它在网络应用中的重要性。" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值