Vue学习笔记

0. Vue简介

1. Vue是什么?

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

构建用户界面:将手中的数据通过某种方法, 变成用户可以看到的界面

渐进式:Vue是可以自底向上逐层的应用.如果为简单应用,只需要一个轻量小巧的核心库,如果为复杂应用,可以引用各式各样的 Vue插件. 也就是从一个轻量小巧的核心库,逐渐递进到Vue插件库

2.由谁开发?

沈雨溪

3. Vue的特点

采用组件化模式, 提高代码复用率,且让代码更好维护.

组件化:一个页面中可能有多个模块,可将模块分成不同的XXX.Vue页面书写,封装成组件

声明式编码,让编码人员无需直接操作DOM, 提高开放效率

使用虚拟DOM+优秀的DIff算法,尽量复用DOM节点

4. Vue2官网指南使用

https://v2.cn.vuejs.org/

顶部导航——学习——教程&API：最重要的两个部分（API相当于是Vue的字典）；

顶部导航——学习——风格指南：写出更加优雅的代码，有优先级A（必要的）、B（强烈推荐）、C（推荐）等；

顶部导航——学习——Cookbook：Vue的使用技巧；

顶部导航——生态系统——帮助&信息：不重要，可不看；

顶部导航——生态系统——工具&插件：重要，后期需要，如脚手架、路由等:

5. 搭建Vue开发环境

下载引入开发版本的Vue.js

最开始使用Vue不推荐Vue-cli的方式，开始使用的是在.html中引入Vue。

安装开发者工具

https://devtools.vuejs.org/guide/installation.html

关闭提示

全局配置vue.config，去除提示

Vue.config.productionTip=false

未必生效,若不生效,直接修改vue.js源码即可

1. Vue基础部分

1.1 Vue程序初体验

01-第一个Vue程序

hello Word!示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>第一个Vue程序</title>
 <!-- 安装vue：当你使用script进行Vue安装之后，上下文中就注册了一个全局变量：Vue -->
 <script src="../js/vue.js"></script>
</head>
<body>
 <!-- 指定Vue实例的挂载位置。 -->
 <!-- <div id="app"></div> -->
 <hr>
 <div id="app"></div>
 <script>
   	/* 
     第一步：创建Vue实例
        1. 为什么要new Vue()，直接调用Vue()函数不行吗？
            不行，因为直接调用Vue()函数，不创建实例的话，会出现以下错误：
                Vue is a constructor and should be called with the `new` keyword
        2. 关于Vue构造函数的参数：options？
            option翻译为选项
            options翻译为多个选项
            Vue框架要求这个options参数必须是一个纯粹的JS对象：{}
            在{}对象中可以编写大量的key:value对。
            一个key:value对就是一个配置项。
            主要是通过options这个参数来给Vue实例指定多个配置项。
        3. 关于template配置项：
            template翻译为：模板。
            template配置项用来指定什么？用来指定模板语句，模板语句是一个字符串形式的。
            什么是模板语句？
                Vue框架自己制定了一些具有特殊含义的特殊符号。
                Vue的模板语句是Vue框架自己搞的一套语法规则。
                我们写Vue模板语句的时候，不能乱写，要遵守Vue框架的模板语法规则。
            模板语句可以是一个纯粹的HTML代码，也可以是Vue中的特殊规则。也可以是HTML代码 + Vue的特殊规则。
            template后面的模板语句会被Vue框架的编译器进行编译，转换成浏览器能够识别的HTML代码。
        */
      	const vm = new Vue({
            template : '<h1>Hello Vue!!!!!</h1>'
        })

        /* 
        第二步：将Vue实例挂载到id='app'的元素位置。
        1. Vue实例都有一个$mount()方法，这个方法的作用是什么？
            将Vue实例挂载到指定位置。
        2. #app 显然是ID选择器。这个语法借鉴了CSS。
        */
        myVue.$mount('#app')
        //myVue.$mount(document.getElementById('app'))
    </script>
</body>
</html>

02-模版语句的数据来源

模版语句的数据来源 :

谁可以给模版语句提供数据支持呢? data选项
data选项的类型是什么? Object | Function (对象或者函数)
data配置项的专业叫法: Vue实例的数据对象. (data实际上是给整个Vue实例提供数据来源的.)
如果data是对象的话,对象必须是纯粹的对象 (含零个或者多个的 Key /value 对)
data数据是如何插入到模版语句当中的?

{{}}这是Vue框架自己搞得一套语法,别的框架看不懂的浏览器也是不能识别的.

Vue框架自己能够看懂的,这种语法在Vue框架中被称为: 模版语法中的插值语法.(有人把他叫做胡子语法)

怎么用?

{{data的key}}

插值语法的小细节

{这个位置不能够包含其他字符包括空格{}这个位置不能够包含其他字符包括空格}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语句的数据来源</title>
    <!-- 安装Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 指定挂载位置 -->
    <div id="app"></div>
    <!-- vue程序 -->
    <script>
         new Vue({
            template : `<h1>最近非常火爆的电视剧{{name}}，它的上映日期是{{releaseTime}}。主角是{{lead.name}}，年龄是{{lead.age}}岁。
                其他演员包括：{{actors[0].name}}({{actors[0].age}}岁)，{{actors[1].name}}({{actors[1].age}}岁)。{{a.b.c.d.e.name}}
                </h1>`,
            data : {
                name : '狂飙!!!',
                releaseTime : '2023年1月2日',
                lead : {
                    name : '高启强',
                    age : 41
                },
                actors : [
                    {
                        name : '安欣',
                        age : 41
                    },
                    {
                        name : '高启兰',
                        age : 29
                    }
                ],
                a : {
                    b : {
                        c : {
                            d : {
                                e : {
                                    name : '呵呵'
                                }
                            }
                        }
                    }
                }
            }
        }).$mount('#app')
    </script>
</body>
</html>

03-template配置项详解

关于template配置项:

template 后面指定的是模版语句,但是模版语句中只有一个根节点.
只有data中的数据发生变化,模版语句一定会重新编译. (只要data变,template就会重新编译,重新渲染)
如果使用template配置项额话,指定挂载位置的元素会被替换.
好消息: 目前我们可以不使用template来编写模版语句. 这些模版语句可以直接写到html标签中.Vue框架能够找到并编译,然后渲染.
如果直接将模版语句先写到HTML标签中,指定的挂载位置就不会被替换了.

关于$mount(‘#app’)?

也可以不使用$mount(“#app”)的方式进行挂载了.

在Vue中有一个配置项: el

el配置项和$mount()可以达到同样的效果.

el配置项的作用?

告诉Vue实例去接管哪个容器.

el: ‘#app’,表示让Vue实例去接管id=’app’的容器

el其实是element的缩写.翻译为元素.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template配置项详解</title>
    <!-- 安装Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 指定挂载位置 -->
    <!-- 注意：以下代码就是只有Vue框架能够看懂的代码了。下面的代码就是一个模板语句。这个代码是需要Vue框架编译，然后渲染的。 -->
    <div id="app">
        <div>
            <h1>{{msg}}</h1>
            <h1>{{name}}</h1>
        </div>
    </div>
    <script>
        new Vue({
            // 错误的
            //template : '<h1>{{msg}}</h1><h1>动力节点老杜</h1>',
             template : `
            <div>
                <h1>{{msg}}</h1>
                <h1>{{name}}</h1>
            </div>
            `, 
            data : {
                msg : 'Hello Vue!!!!!!!',
                name : 'a动力节点老杜!!!!!!'
            },
            el : '#app'
            //el : document.getElementById('app')
        })
        //}).$mount('#app')
        
    </script>
</body>
</html>

Vue实例和容器是一夫一妻制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实例 和 容器 的关系是：一夫一妻制</title>
    <!-- 安装Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备容器 -->
    <div class="app">
        <h1>{{msg}}</h1>
    </div>

    <div class="app">
        <h1>{{msg}}</h1>
    </div>

    <!-- 准备容器 -->
    <div id="app2">
        <h1>{{name}}</h1>
    </div>

    <!-- vue程序 -->
    <script>
        /* 
            验证：一个Vue实例可以接管多个容器吗？
                不能。一个Vue实例只能接管一个容器。一旦接管到容器之后，即使后面有相同的容器，Vue也是不管的。因为Vue实例已经“娶到媳妇”了。
        */
        new Vue({
            el : '.app',
            data : {
                msg : 'Hello Vue!'
            }
        })

        new Vue({
            el : '#app2',
            data : {
                name : 'zhangsan'
            }
        })

        // 这个Vue实例想去接管 id='app2'的容器，但是这个容器已经被上面那个Vue接管了。他只能“打光棍”了。
        new Vue({
            el : '#app2',
            data : {
                name : 'jackson'
            }
        })
        
    </script>


</body>
</html>

1.2 Vue核心技术

01-模版语法之插值语法

主要研究：
1. 在data中声明的变量、函数等都可以。
2. 常量都可以。
3. 只要是合法的javascript表达式，都可以。
4. 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 等。
‘Infinity,undefined,NaN,isFinite,isNaN,’
‘parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,’
‘Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,’
‘require’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法之插值语法{{}}</title>
    <!-- 安装Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备容器 -->
    <div id="app">
        <!-- 在data中声明的 -->
        <!-- 这里就可以看做在使用msg变量。 -->
        <h1>{{msg}}</h1>
        <h1>{{sayHello()}}</h1>
        <!-- <h1>{{i}}</h1> -->
        <!-- <h1>{{sum()}}</h1> -->

        <!-- 常量 -->
        <h1>{{100}}</h1>
        <h1>{{'hello vue!'}}</h1>
        <h1>{{3.14}}</h1>

        <!-- javascript表达式 -->
        <h1>{{1 + 1}}</h1>
        <h1>{{'hello' + 'vue'}}</h1>
        <h1>{{msg + 1}}</h1>
        <h1>{{'msg' + 1}}</h1>
        <h1>{{gender ? '男' : '女'}}</h1>
        <h1>{{number + 1}}</h1>
        <h1>{{'number' + 1}}</h1>
        <h1>{{msg.split('').reverse().join('')}}</h1>

        <!-- 错误的：不是表达式，这是语句。 -->
        <!-- <h1>{{var i = 100}}</h1> -->

        <!-- 在白名单里面的 -->
        <h1>{{Date}}</h1>
        <h1>{{Date.now()}}</h1>
        <h1>{{Math}}</h1>
        <h1>{{Math.ceil(3.14)}}</h1>

    </div>

    <!-- vue程序 -->
    <script>

        // 用户自定义的一个全局变量
        var i = 100
        // 用户自定义的一个全局函数
        function sum(){
            console.log('sum.....');
        }

        new Vue({
            el : '#app',
            data : {
                number : 1,
                gender : true,
                msg : 'abcdef',  // 为了方便沟通，以后我们把msg叫做变量。（这行代码就可以看做是变量的声明。）
                sayHello : function(){
                    console.log('hello vue!');
                }
            }
        })
    </script>
</body>
</html>

02-模版语法之指令

指令语法:

指令是什么

指令的指着是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 Demo
Vue框架中的所以指令的名字都以”v-“开始.
插值是写在标签体当中的,那么指令写在哪里呢?

Vue框架中所以得指令都是以HTML标签的属性形式存在的,例如:

<span 指令是写在这里的></span>

注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。

是需要先让Vue框架进行编译的，编译之后的内容浏览器是可以看懂的。
指令的语法规则：

指令的一个完整的语法格式：

<HTML标签 v-指令名:参数=”javascript表达式”></HTML标签>

表达式：

之前在插值语法中，那么指令中的表达式就可以写什么。实际上是一样的。

但是需要注意的是：在指令中的表达式位置不能外层再添加一个{{}}

不是所有的指令都有参数和表达式：

有的指令，不需要参数，也不需要表达式，例如：v-once

有的指令，不需要参数，但是需要表达式，例如：v-if=”表达式”

有的指令，既需要参数，又需要表达式，例如：v-bind:参数=”表达式”

v-once 指令

作用：只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-if=”表达式” 指令

作用：表达式的执行结果需要是一个布尔类型的数据：true或者false

true：这个指令所在的标签，会被渲染到浏览器当中。

false：这个指令所在的标签，不会被渲染到浏览器当中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法之指令语法 v-??? </title>
    <!-- 安装Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="app">
        <h1>{{msg}}</h1>
        <h1 v-once>{{msg}}</h1>
        <h1 v-if="a > b">v-if测试：{{msg}}</h1>
    </div>
    <!-- vue程序 -->
    <script>
        new Vue({
            el : '#app',
            data : {
                msg : 'Hello Vue!',
                a : 10,
                b : 11
            }
        })
    </script>
</body>
</html>

03-v-bind指令详解

v-bind指令详解

这个指令是干啥的？
它可以让HTML标签的某个属性的值产生动态的效果。

v-bind指令的语法格式：

<HTML标签 v-bind:参数="表达式"></HTML标签>

v-bind指令的编译原理？
编译前：
```
   1
<HTML标签 v-bind:参数="表达式"></HTML标签>
```
编译后：
1
<HTML标签参数="表达式的执行结果"></HTML标签>
注意两项：
第一：在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”
第二：表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化。
所以，连带的就会产生动态效果。
v-bind因为很常用，所以Vue框架对该指令提供了一种简写方式：
只是针对v-bind提供了以下简写方式：
```
  1
<img:src="imgPath">
```
什么时候使用插值语法？什么时候使用指令？
凡是标签体当中的内容要想动态，需要使用插值语法。
只要向让HTML标签的属性动态，需要使用指令语法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令详解（它是一个负责动态绑定的指令）</title>
    <!-- 安装Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="app">
        <!-- 注意：以下代码中 msg 是变量名。 -->
        <!-- 注意：原则上v-bind指令后面的这个参数名可以随便写。 -->
        <!-- 虽然可以随便写，但大部分情况下，这个参数名还是需要写成该HTML标签支持的属性名。这样才会有意义。 -->
        <span v-bind:xyz="msg"></span>

        <!-- 这个表达式带有单引号，这个'msg'就不是变量了，是常量。 -->
        <span v-bind:xyz="'msg'"></span>

        <!-- v-bind实战 -->
        <img src="../img/1.jpg"> <br>
        <img v-bind:src="imgPath"> <br>

        <!-- v-bind简写形式 -->
        <img :src="imgPath"> <br>

        <!-- 这是一个普通的文本框 -->
        <input type="text" name="username" value="zhangsan"> <br>
        <!-- 以下文本框可以让value这个数据变成动态的：这个就是典型的动态数据绑定。 -->
        <input type="text" name="username" :value="username"> <br>

        <!-- 使用v-bind也可以让超链接的地址动态 -->
        <a href="https://www.baidu.com">走起</a> <br>
        <a :href="url">走起2</a> <br>

        <!-- 不能采用以下写法吗？ -->
        <!-- 
            不能这样，报错了，信息如下：
            Interpolation inside attributes has been removed. 
            Use v-bind or the colon shorthand instead. For example, 
            instead of <div id="{{ val }}">, use <div :id="val">
            
            属性内部插值这种语法已经被移除了。（可能Vue在以前的版本中是支持这种写法的，但是现在不允许了。）
            请使用v-bind或冒号速记来代替。
            请使用 <div :id="val"> 来代替 <div id="{{ val }}">

         -->
        <!-- <a href="{{url}}">走起3</a>  -->

        <h1>{{msg}}</h1>

    </div>
    <!-- vue程序 -->
    <script>
        
        // 赋值的过程就可以看做是一种绑定的过程。
        //let i = 100

        new Vue({
            el : '#app',
            data : {
                msg : 'Hello Vue!',
                imgPath : '../img/1.jpg',
                username : 'jackson',
                url : 'https://www.baidu.com'
            }
        })
    </script>
</body>
</html>