Vue学习笔记

Posted 2022-04-16 野生java研究僧

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习笔记相关的知识，希望对你有一定的参考价值。

Vue学习笔记

1.vue基础入门
2.Vue基础语法
3.组件化开发
4.webpack 模块化开发
5.vue-cli
- 5.1vue-cli2
- 5.2 vue-cli3
6.vue-router
7.vueX
8.axios
9. 附录

1.vue基础入门

1.1 vue基础概念

Vue是一个渐进式的框架

渐进式意味着你可以将Vue作为你应用的一部分嵌套其中
Vue的核心库以及其生态系统
Core + Vue-router + Vuex

1.2安装vue.js

方式一：CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

方式二：下载和引入

// 开发环境
https://vuejs.org/js/vue.js

// 生产环境
https://vuejs.org/js/vue.min.js

1.3 MVVM理解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2BcZCUsQ-1649957421207)(C:%5CUsers%5C14823%5CDesktop%5Clearn-note%5Ctyproa-img%5Cimage-20211223182614086.png)]

M： Model 数据模型

数据层：数据可能是固定的思数据, 更多的是来自服务器, 从网络上请求下来的数据

V: View 视图模板

视觉层：写在前端开发中, 通常是DOM层。作用: 是给用户展示各种信息

VM： View-Model 视图模型

视图模型层：是View和Model沟通的桥梁，一方面实现了Data Binding (数据绑定), 讲Model的改变实时的反应到View中，另一方面实现了DOM Listener (DOM监听), 当DOM发生一些时间 (点击, 滚动, touch等) 时, 可以监听到, 并在需要的情况下改变对应的Data

1.4 vue初体验

展示单个字符串：

<div id="app">
     message 
</div>

<script type="text/javascript">
    let app  = new Vue(
        el:'#app',
        data:
            message:"hello world"
        
    )
</script>

展示列表：

<div id="app">
    <ul v-for="item in movies">
        <li>item</li>
    </ul>
</div>
<script type="text/javascript">
    // 展示列表
    const app = new Vue(
        el: "#app",
        data:
            movies:["海贼王","寒战","大话西游","海上钢琴师"]
        
    );


</script>

小案例：计数器


<div id="app">
    <h2>当前计数count</h2>

<!--
方式1：
<button v-on:click="count++">+</button>
<button v-on:click="count&#45;&#45;">-</button>
-->
<!-- 方式2： -->

 <button v-on:click="incremental">+</button>
 <button v-on:click="subtract">-</button>
</div>

<script type="text/javascript">

    const app = new Vue(
        el:"#app",
        data:
            count:0
        ,
        methods:
            incremental:function () 
                console.log("递增");
                this.count++;
            ,
            subtract:function () 
                console.log("递减");
                this.count--;
            
        
    )
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BKnPWQWp-1649957421207)(C:%5CUsers%5C14823%5CDesktop%5Clearn-note%5Ctyproa-img%5Cimage-20211223183056060.png)]

2.Vue基础语法

2.1 options参数

el
data
methods
生命周期函数
等…

2.2 Vue生命周期

每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

new Vue()实例化一个vue实例，然后init初始化event 和 lifecycle，其实这个过程中分别调用了3个初始化函数（initLifecycle(), initEvents(), initRender()），分别初始化了生命周期，事件以及定义createElement函数，初始化生命周期时，定义了一些属性，比如表示当前状态生命周期状态得_isMounted ，_isDestroyed ，_isBeingDestroyed，表示keep-alive中组件状态的_inactive，而初始化event时，实际上就是定义了 $o n c e 、$ off、 $e m i t 、$ on几个函数。而createElement函数是在初始化render时定义的（调用了initRender函数）
执行 beforeCreate 生命周期函数
beforeCreate执行完后，会开始进行数据初始化，这个过程，会定义data数据，方法以及事件，并且完成数据劫持observe以及给组件实例配置watcher观察者实例。这样，后续当数据发生变化时，才能感知到数据的变化并完成页面的渲染。
执行created生命周期函数，所以，当这个函数执行的时候，我们已经可以拿到data下的数据以及methods下的方法了，所以在这里，我们可以开始调用方法进行数据请求了
created执行完后，我们可以看到，这里有个判断，判断当前是否有el参数(这里为什么需要判断，是因为我们后面的操作是会依赖这个el的，后面会详细说)，如果有，我们再看是否有template参数。如果没有el，那么我们会等待调用$mount(el)方法(后面会详细说)。
确保有了el后，继续往下走，判断当有template参数时，我们会选择去将template模板转换成render函数（其实在这前面是还有一个判断的，判断当前是否有render函数，如果有的话，则会直接去渲染当前的render函数，如果没有那么我们才开始去查找是否有template模板），如果没有template，那么我们就会直接将获取到的el（也就是我们常见的#app，#app里面可能还会有其他标签）编译成templae, 然后在将这个template转换成render函数。
之后再调用beforMount，也就是说实际从creted到beforeMount之间，最主要的工作就是将模板或者el转换为render函数。并且我们可以看出一点，就是你不管是用el，还是用template, 或者是用我们最常用的.vue文件(如果是.vue文件，他其实是会先编译成为template)，最终他都是会被转换为render函数的。
beforeMount调用后，我们是不是要开始渲染render函数了，首先我们会先生产一个虚拟dom（用于后续数据发生变化时，新老虚拟dom对比计算），进行保存，然后再开始将render渲染成为真实的dom。渲染成真实dom后，会将渲染出来的真实dom替换掉原来的vm. $e l （这一步我们可能不理解，请耐心往下看，后面我会举例说明）, 然后再将替换后的$ el append到我们的页面内。整个初步流程就算是走完了
之后再调用mounted，并将标识生命周期的一个属性_isMounted 置为true。所以mounted函数内，我们是可以操作dom的，因为这个时候dom已经渲染完成了。
再之后，只有当我们状态数据发生变化时,我们在触发beforeUpdate，要开始将我们变化后的数据渲染到页面上了（实际上这里是有个判断的，判断当前的_isMounted是不是为ture并且_isDestroyed是不是为false，也就是说，保证dom已经被挂载的情况下，且当前组件并未被销毁，才会走update流程）
beforeUpdate调用之后，我们又会重新生成一个新的虚拟dom(Vnode)，然后会拿这个最新的Vnode和原来的Vnode去做一个diff算，这里就涉及到一系列的计算，算出最小的更新范围，从而更新render函数中的最新数据，再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新
然后再执行updated，所以updated里面也可以操作dom，并拿到最新更新后的dom。不过这里我要插一句话了，mouted和updated的执行，并不会等待所有子组件都被挂载完成后再执行，所以如果你希望所有视图都更新完毕后再做些什么事情，那么你最好在mouted或者updated中加一个 $n e x t T i c k （），然后把要做的事情放在$ netTick()中去做.
再之后beforeDestroy没啥说的，实例销毁前，也就是说在这个函数内，你还是可以操作实例的
之后会做一系列的销毁动作，解除各种数据引用，移除事件监听，删除组件_watcher，删除子实例，删除自身self等。同时将实例属性_isDestroyed置为true
销毁完成后，再执行destroyed

案例：在Vue实例初始化完成后就会调用beforeCreate()方法

<div id="app">
    <h1>message</h1>
</div>
<script type="text/javascript">
    const app = new Vue(
        el:"#app",
        data:
            message:"hello world"
        ,
        beforeCreate:function () 
            console.log("Vue初始化完成");
        
    );
</script>

2.3 mustache语法

我们可以像下面这样来使用，并且数据是响应式的

<div id="app">
    <!-- 直接插入  -->
    <h2>message：message</h2>
    <!--  可以插入多个-->
    <h2>firstNamelastName</h2>
    <!-- 也可以是一个表达式 -->
    <h2> count*6</h2>
</div>
<script type="text/javascript">
    const app = new Vue(
        el: "#app",
        data: 
            count: 10,
            firstName: "法外狂徒",
            lastName: "张三",
            message: "hello world"
        
    );
</script>

2.4 v-once

在某些情况下，我们可能不希望界面随意的跟随改变,这个时候，我们就可以使用一个Vue的指令

v-once:

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

<div id="app">
    <h2 v-once> message</h2>
</div>
<script type="text/javascript">
    const app = new Vue(
        el:"#app",
        data:
            message:"hello world"
        
    );
</script>

2.5 v-html

如果我们希望将字符串中的内容按照HTML解析出展示
可以使用v-html指令

该指令后面往往会跟上一个string类型
会将string的html解析出来并且进行渲染
此方式会将标签中原有的内容进行替换掉

<div id="app">
    <p v-html="message"> </p>
</div>

<script type="text/javascript">
    const app = new Vue(
        el:"#app",
        data:
            message:`<a href="https://www.baidu.com/">点击此处跳转到百度</a>`
        
    );
</script>

2.6 v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中,区别就是，v-text即使字符串中有HTML代码，也会被当做普通字符串解析，而且会替换掉标签中的全部内容。

<div id="app">
    <h2 v-text="message"> </h2>
</div>

<script type="text/javascript">
    const app = new Vue(
        el:"#app",
        data:
            message:`<b> hello world</b>`
        
    );
</script>

2.7 v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法,不对mustache语法进行解析，显示标签内的原始内容

<div id="app">
<h2 v-pre>message</h2>
</div>
<script type="text/javascript">
    const app = new Vue(
        el: "#app",
        data: 
            message:"hello world"
        
    );
</script>

2.8 v-cloak

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。v-cloak可以保证mustache语法被正确解析后才进行渲染

在vue解析之前标签中会有 v-cloak属性，解析完毕后，标签中的v-cloak属性就自动删除。

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

<style>
    [v-cloak]
        display: none;
    
</style>

<script type="text/javascript">
    // 延时一秒钟
   setTimeout(function () 
       const app = new Vue(
           el: "#app",
           data: 
               message: "hello world"
           
       );
   ,1000)

</script>

2.9 v-bind

v-bind:动态绑定属性，将data中的数据，动态绑定掉标签中的属性中去。v-bind:属性名=“data”

v-bind简写： :attributeName=“data”

<div id="app">
    <a v-bind:href="baiduUrl"> <img v-bind:src="baiduIco"></a>
</div>
<script type="text/javascript">
    const app = new Vue(
        el: "#app",
        data: 
         baiduIco:`https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png`,
         baiduUrl:`https://www.baidu.com/`
        
    );
</script>

v-bind:动态绑定Class属性【对象语法】：原有的class属性不会被覆盖，而是将动态绑定的class属性添加到原有的class中去

<style>
    .active
        color: red;
    
    .background-green
        background: #5cb85c;
    
</style>
<div id="app">
<!--  v-bind:class="类名1:boolean,类名2:boolean"  -->
<b class="background-green" v-bind:class="active:isActive">message</b>
 <button v-on:click="conversion">点击换色</button>
</div>
<script type="text/javascript">
    const app = new Vue(
        el: "#app",
        data: 
            message: "hello world",
            isActive:true
        ,
        methods:
            // 取反操作
            conversion:function () 
                this.isActive=!this.isActive;
            
        
    );
</script>

--------------------------------------------- 绑定方法的一个用法--------------------------------------------------
<style>
    .active
        color: red;
    
    .background-green
        background: #5cb85c;
    
</style>
<div id="app">
    <!--  v-bind:class="functionName()"  -->
    <b class="background-green" v-bind:class="getClass()">messageVue 自定义指令 directive
 Vue 自定义指令 directive
 Vue2.X源码学习笔记选项合并
 JavaScript DOM编程艺术学习笔记
 VUE核心学习笔记
 VUE核心学习笔记