前端环境的准备-Vue框架介绍-Vue快速入门

Vue框架快速入门

前端环境的准备-Vue框架介绍-Vue快速入门

前端环境的准备-Vue框架介绍-Vue快速入门

官网链接：https://cn.vuejs.org/

1. 前端环境的准备

1 编码工具：VSCode
2 依赖管理：NPM
3 项目构建：VueCli

2. Vue框架介绍

Vue(读音/vju:/，类似于view)是一套用于构建用户界面的渐进式框架。
Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。
其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。

Vue.js是一款流行的JavaScript前端框架，目的是简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

MVVM模式：

MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定。
Vue提供了MVVM风格的双向数据绑定，核心是MVVM中的VM，也就是
ViewModel,ViewModel负责连接View和Model，保证视图和数据的一致性。

3. Vue快速入门

创建一个新文件夹拖拽到VSCode里，就会打开一个新的项目并存放在新文件夹中
Ctrl+N 新建文本文件
Ctrl+S 保存文件并给文件命名和指定文件格式
HTML输入英文！回车，生成HTML代码

3.1 基本用法.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>Documenttitle>
    
    <script src="https://unpkg.com/vue@3">script>
head>
<body> 
    
    <div id="app">
        {{message}}
    div>

    
    <script>
    const hello = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                message: 'Hello Vue!'
            }
        }
    }
    const app = Vue.createApp(hello)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

3.2 内容渲染指令.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>Documenttitle>
    
    <script src="https://unpkg.com/vue@3">script>
head>
<body> 
    
    <div id="app">
        <p>姓名：{{username}}p>
        <p>性别：{{gender}}p>
        <p>{{desc}}p>
        <p v-html="desc">p>  //指令将字符串以HTML格式渲染
    div>

    
    <script>
    const vm = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                username:'zhangsan',
                gender:'男',
                desc: '百度'
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在这里插入图片描述

3.3 属性绑定指令.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>Documenttitle>
    
    <script src="https://unpkg.com/vue@3">script>
head>
<body> 
    
    <div id="app">
        <a :href="link">百度a>
        <input type="text" :placeholder="inputValue">
        <img :src="imgSrc" :style="{widh:w}" alt="">
    div>

    
    <script>
    const vm = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                link:"http://www.baidu.com",
                inputValue:'请输入内容',
                imgSrc: './images/demo.jpg',
                w:'500px'
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在这里插入图片描述

3.4 使用JavaScript表达式

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>Documenttitle>
    
    <script src="https://unpkg.com/vue@3">script>
head>
<body> 
    
    <div id="app">
        <p>{{number + 1}}p>
        <p>{{OK ? 'True' : 'False'}}p>
        <p>{{message.split('').reverse().join('')}}p>
        <p :id="'list-' + id">xxxp>
        <p>{{user.name}}p> 
    div>

    
    <script>
    const vm = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                number: 9,
                ok: false,
                message: 'ABC',
                id: 3,
                user: {
                    name: 'zs',
                }
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

在这里插入图片描述

3.5 事件绑定指令

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>Documenttitle>
    
    <script src="https://unpkg.com/vue@3">script>
head>
<body> 
    
    <div id="app">
        <h3>count 的值为：{{count}}h3>
        <button v-on:click="addCount">+1button>   
        <button @click="count+=1">+1button>    
    div>

    
    <script>
    const vm = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                count: 0,
            }
        },
        methods:{
            //点击按钮，让count自增+1
            addCount() {
                this.count +=1
            },
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在这里插入图片描述

3.6 条件渲染指令

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>Documenttitle>
    
    <script src="https://unpkg.com/vue@3">script>
head>
<body> 
    
    <div id="app">
        <button @click="flag =!flag">Toggle Flagbutton>
        <p v-if="flag"> 请求成功 ---- 被v-if控制p>  
        <p v-show="flag">请求成功----被v-show控制p> 
    div>

    
    <script>
    const vm = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                flag: false,
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在这里插入图片描述

3.7 v-else和v-else-if 指令

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>Documenttitle>
    
    <script src="https://unpkg.com/vue@3">script>
head>
<body> 
    
    <div id="app">
        <p v-if="num>0.5"> 随机数大于0.5p>
        <p v-else>随机数小于等于0.5p>
        <hr/>
        <p v-if="type === 'A'">优秀p>
        <p v-else-if="type === 'B'">良好p>
        <p v-else-if="type === 'C'">一般p>
        <p v-else>差p>
        <div v-show="a">
            测试
        div>
        <button @click="a=!a">点击button>
    div>

    
    <script>
    const vm = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                num: Math.random(),
                type: 'A', 
                a: true,
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

在这里插入图片描述

3.8 列表渲染指令

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>Documenttitle>
    
    <script src="https://unpkg.com/vue@3">script>
head>
<body> 
    
    <div id="app">
        <ul>
            <li v-for="(user,i) in userList">索引是:{{i}}, 姓名是：{{user.name}}li>
        ul>
    div>

    
    <script>
    const vm = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                userList:[ 
                    {id: 1, name:'zhangsan'},
                    {id: 2, name:'lisi'},
                    {id: 3, name:'wangwu'},
                ]
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这里插入图片描述

3.9 v-for中的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>Documenttitle>
    
    <script src="https://unpkg.com/vue@3">script>
head>
<body> 
    
    <div id="app">
        
        <div>
            
            <input type="text" v-model="name">
            <button @click="addNewUser">添加button> 
        div>
        
        <ul>
            <li v-for="(user, index) in userlist" :key="user.id" >
                <input type="checkbox" />
                姓名：{{user.name}}
            li>
        ul>
    div>

    
    <script>
    const vm = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                userlist:[ 
                    {id: 1, name:'zhangsan'},
                    {id: 2, name:'lisi'},
                    {id: 3, name:'wangwu'}
                ],
                //输入的姓名
                name: '',
                //下一个可用的id值
                nextId: 3
            }
        },
        methods: {
            addNewUser(){
                this.userlist.unshift({id: this.nextId, name: this.name})
                this.name = ''
                this.nextId++
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

在这里插入图片描述

相关阅读:
华钜同创：亚马逊开店有哪些注意事项
 二十、泛型（8）
PHP笔记-解决网站CDN加速后图片出现跨越问题
 facedector-Demo
数据链路层（3.1）
【Redis】Redis 的学习教程（九）之发布 Pub、订阅 Sub
Beanshell的未授权利用
 docker修改挂载目录
 iNFTnews | 创造者经济的未来在Web3世界中该去向何处？
使用Kali进行实验---主机发现
原文地址：https://blog.csdn.net/qq_45896330/article/details/126688484