Vue3+pinia 第一章邂逅Vue.js开发

最新推荐文章于 2023-12-26 01:33:18 发布

Xiaouuuuua

最新推荐文章于 2023-12-26 01:33:18 发布

阅读量60

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_48069349/article/details/132489733

版权

一. 邂逅Vue.js开发

1.1. Vue介绍

Vue的介绍

谁是最好的前端框架？

Vue在前端的地位

目前前端最流行的是三大框架：Vue、React、Angular。
- react
- angular
直接学习Vue3

如何来使用vue呢？

1.2. Vue下载和使用

CDN引入

<script src="https://unpkg.com/vue@next"></script>

下载引入
初体验一下Vue开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  //使用vue
  const app = Vue.createApp({
      template:`<h2>Hello World</h2>`
  });
  //挂载
  app.mount("#app")
</script>
</body>
</html>

1.3. Vue的三个案例

1.3.1. 动态数据展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  //使用vue
  const app = Vue.createApp({
      template:`<h2>{{title}},{{messgae}}</h2>`,
      data: function (){
          return{
              title:"Hello World",
              messgae:"你好，Vue3"
          }
      }
  });
  //挂载
  app.mount("#app")
</script>
</body>
</html>

1.3.2. 动态展示列表

v-for

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


<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        template : `
        <h2>电影列表</h2>
        <ul>
        <li v-for="item in movies">{{item}}</li>
        </ul>
        `,
        data: function(){
            return{
                message:"你好",
                movies:["大话西游","星际穿越","盗梦空间","少年派"]
            }
        }
    });
    app.mount("#app")
</script>
</body>
</html>

1.3.3. 计数器案例

counter

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        template: `<h2>当前计数: {{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
        `,
        data: function(){
            return {
                counter: 0
            }

        },
        methods : {
            increment: function (){
                console.log("+1被点击了")
                this.counter++;
            },
            decrement : function (){
                console.log("-1被点击了")
                this.counter--;
            }
        }
    });
    app.mount("#app")
</script>
</body>
</html>

increment 递增
decrement 递减

1.4. 命令式和声明式编程的区别

原生实现计时器

1.5. MVC和MVVM的模型区别

1.6. options api的data详解

data必须是一个函数, 函数会返回一个对象
data返回的对象, 会被Vue进行劫持(放到响应式系统中), 所以data的数据发生改变时, 界面会重新渲染

1.7. options api的methods详解

对象 -> 很多函数
里面函数不能是箭头函数:
- this

问题一：不能使用箭头函数

this到底指向什么

事实上Vue的源码当中就是对methods中的所有函数进行了遍历，并且通过bind绑定了this：

Xiaouuuuua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3+pinia 第一章邂逅Vue.js开发

Vue的介绍谁是最好的前端框架？Vue在前端的地位目前前端最流行的是三大框架：Vue、React、Angular。reactangular直接学习Vue3如何来使用vue呢？
复制链接

扫一扫