Vue学习笔记

最新推荐文章于 2024-11-10 15:10:09 发布

Hatsune Miku

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量147

点赞数

分类专栏：笔记 JavaScript Vue 文章标签： vue.js 学习前端前端框架

本文链接：https://blog.csdn.net/qq_34493555/article/details/127395942

版权

笔记同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

Vue笔记

**作者：马叉虫 **

第一集 vue课程介绍

1、Vue基本语法

2、组件化开发

3、Vue CLI详解 (脚手架)

4、Vue-router (路由)

5、Vuex详解

6、网络封装

7、项目实战

8、项目部署

第二集 vue的认识和介绍

第五集 Vue的列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue列表</title>
</head>
<body>
    <div id="app">
        {{message}}
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Vue列表',
            movies:['哈哈哈','对对对','急急急','京津冀']
        }
    })
</script>
</body>
</html>

第六集案例计数器

新的属性：methods，该属性用于在Vue对象中定义方法。

新的指令: @click,该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(通常是在methods中定义的方法)

请添加图片描述

写法一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue列表</title>
</head>
<body>
    <div id="app">
        <h2>当前计数：{{sz}}</h2>
        <button v-on:click="sz++">+</button>
        <button v-on:click="sz--">-</button>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            sz: 0,
        }
    })
</script>
</body>
</html>

函数写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue列表</title>
</head>
<body>
    <div id="app">
        <h2>当前计数：{{sz}}</h2>
        <button v-on:click="add">+</button>
        <!--<button v-on:click="sub">-</button>-->
        <button @click="sub">-</button>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    /*
    写法二
    const obj={
    	sz=0;
    }
     */
    const app = new Vue({
        el: '#app',
        //写法二data : obj,
        data: {
            sz: 0,
        },
        methods:{
            add:function (){
                console.log('add被执行');
                this.sz++;      //直接写sz找不到，直接写会找全局的sz。this.sz表示当前对象的sz
            },
            sub:function (){
                console.log('sub被执行');
                this.sz--;
            }
        }
    })
</script>
</body>
</html>

v-on:click=可简写为@click=

第七集 Vue的mvvm (模型视图视图模型（View ViewModel Model）)

请添加图片描述

ViewModel可以把Model数据绑定到View,也可以把View的事件、操作回调到Model。

View层

```
视图层
```

在我们前端开发中，通常就是DOM层

主要的作用是给用户展示各种信息

Model层
- 数据层
- 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
- 在我们计数器的案例中，就是后面抽取出来的obj,当然，里面的数据可能没有这么简单。
VueModel层
- 视图模型层
- 视图模型层是View和Model沟通的桥梁。
- 一方面他实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
- 另一方面它实现了DOM Listener,也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时,可以监听到，并在需要的情况下改变对应的Data。

计数器的MVVM

请添加图片描述

我们的计数器中就有严格的MVVM思想

```
View依然是我们的DOM
```
```
Model就是我们抽离出来的obj
```

ViewModel就是我们创建的Vue对象

它们之间如何工作呢？

首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。

其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。

有了Vue帮助我们完成VueModel层的任务，在后续开发，我们就可以专注于数据的处理，以及DOM的编写工作了。

第八集 Vue的options选项

类型:string或者HTMLElment

作用：决定之后Vue实例会管理哪一个DOM。

data

类型：Object或者Function

作用：Vue实例对应的数据对象

methods

类型：[key:string]:Function

作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

方法metthod

函数function

第九集 Vue的生命周期

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

生命周期钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{t1}}<br>
    {{t2}}
</div>
<script>
    let v1 = {
        t1:'hahaha',
        t2:'dddddd'
    }

    new Vue({
        el:'#app',
        data:v1,

        beforeCreate(){
            alert("vue 对象即将创建时执行")
        },

        created(){
            alert("vue 对象已经创建后执行")
        },

        beforeMount(){
            alert("vue 数据绑定之前时执行")
        },

        mounted(){
            alert("vue 数据绑定后执行")
        },

        beforeUpdate(){
            alert("vue 数据更新之前时执行")
        },

        updated(){
            alert("vue 数据更新后执行")
        },

        beforeDestroy(){
            alert("vue 对象销毁之前时执行")
        },

        destroy(){
            alert("vue 对象销毁后执行")
        },
    })
</script>
</body>
</html>

第十二集 mustache(胡子)语法

语法:{{名称}}

胡子语法拼接:{{名称1 + 名称2}}

还可以使用计算操作如: {{xx * 2}}

第十三集其他指令使用

v-once:在某些情况下，我们可能不希望界面随意的跟随改变。

用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h5>{{message}}</h5>
        <h5 v-once>{{message}}</h5>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data: {
                message: '哈哈哈哈'
            }
        })
    </script>
</body>
</html>

使用v-once的地方即使message发生改变也会保持之前的值不变

v-html: 把字符串当成html代码输出

用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
</head>
<body>
<div id="app">
    <h5>{{url}}</h5>
    <h5 v-html="url"></h5>
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            url:'<a href="http://www.baidu.com">百度</a>'
        }
    })
</script>
</body>
</html>

页面:

<a href="http://www.baidu.com">百度</a>
百度

v-text: 作用和Mustache比较相似,都是用于将数据显示在界面中

用法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
</head>
<body>
 <div id="app">
     <h5>{{message}},你好</h5>
     <h5 v-text="message">,你好</h5>
 </div>
 <script src="./vue.js"></script>
 <script>
     const app = new Vue({
         el:'#app',
         data:{
             message:'大傻逼'
         }
     })
 </script>
</body>
</html>

界面:

大傻逼，你好
大傻逼

v-pre:用于跳过这个元素和他的子元素的编译过程，用于显示原本的Mustache语法。

用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-pre</title>
</head>
<body>
    <div id="app">
        <h5>{{message}}</h5>
        <h5 v-pre>{{message}}</h5>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'哈哈哈哈哈'
            }
        })
    </script>
</body>
</html>

界面:

哈哈哈哈哈
{{message}}

v-cloak:在某些情况下，我们的浏览器可能会因为顺序执行而直接显示出未编译的Mustache标签，v-cloak可以解决这个问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        {{message}}
    </div>
    <script src="./vue.js"></script>
    <script>
        setTimeout(function (){
            const app = new Vue({
                el:'#app',
                data:{
                    message:'哈哈哈哈'
                }
            })
        },1000)

    </script>
</body>
</html>

界面:

哈哈哈哈

第十四集 v-bind的基本使用

v-bind：绑定指令

使用v-bind绑定来改变html标签的属性

用法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <img v-bind:src="imgurl">
    <img :src="imgurl"><!-- 语法糖 -->
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            imgurl:'./img/mvvm.png'
        }
    })
</script>
</body>
</html>

第十五集 v-bind动态绑定class(对象语法)

使用v-bind改变class

用法实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            color:red;
        }

        .b{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 v-bind:class="{a:isA,b:isB}">{{cs}}</h2>
        <button v-on:click="bh">变换</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                cs:'哈哈哈哈',
                isA:false,
                isB:true
            },
            methods:{
                bh:function (){
                    this.isA=true,
                    this.isB=false
                }
            }
        })
    </script>
</body>
</html>