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

848698119

已于 2022-10-02 11:51:45 修改

阅读量2.9k

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-09-05 22:38:41 首次发布

本文链接：https://blog.csdn.net/qq_45896330/article/details/126688484

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>Document</title>
    <!-- 1.导入vue 的script脚本文件 -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body> 
    <!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
    <div id="app">
        {{message}}
    </div>

    <!-- 3.创建vue的实例对象 -->
    <script>
    const hello = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                message: 'Hello Vue!'
            }
        }
    }
    const app = Vue.createApp(hello)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    </script>
</body>
</html>

在这里插入图片描述

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>Document</title>
    <!-- 1.导入vue 的script脚本文件 -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body> 
    <!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
    <div id="app">
        <p>姓名：{{username}}</p>
        <p>性别：{{gender}}</p>
        <p>{{desc}}</p>
        <p v-html="desc"></p>  //指令将字符串以HTML格式渲染
    </div>

    <!-- 3.创建vue的实例对象 -->
    <script>
    const vm = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                username:'zhangsan',
                gender:'男',
                desc: '<a href="http://www.baidu.com">百度</a>'
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    </script>
</body>
</html>

在这里插入图片描述

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>Document</title>
    <!-- 1.导入vue 的script脚本文件 -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body> 
    <!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
    <div id="app">
        <a :href="link">百度</a>
        <input type="text" :placeholder="inputValue">
        <img :src="imgSrc" :style="{widh:w}" alt="">
    </div>

    <!-- 3.创建vue的实例对象 -->
    <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>

在这里插入图片描述

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>Document</title>
    <!-- 1.导入vue 的script脚本文件 -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body> 
    <!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
    <div id="app">
        <p>{{number + 1}}</p>
        <p>{{OK ? 'True' : 'False'}}</p>
        <p>{{message.split('').reverse().join('')}}</p>
        <p :id="'list-' + id">xxx</p>
        <p>{{user.name}}</p> 
    </div>

    <!-- 3.创建vue的实例对象 -->
    <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>

在这里插入图片描述

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>Document</title>
    <!-- 1.导入vue 的script脚本文件 -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body> 
    <!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
    <div id="app">
        <h3>count 的值为：{{count}}</h3>
        <button v-on:click="addCount">+1</button>   <!-- 方式1 -->
        <button @click="count+=1">+1</button>    <!-- 方式2 -->
    </div>

    <!-- 3.创建vue的实例对象 -->
    <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>

在这里插入图片描述

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>Document</title>
    <!-- 1.导入vue 的script脚本文件 -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body> 
    <!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
    <div id="app">
        <button @click="flag =!flag">Toggle Flag</button>
        <p v-if="flag"> 请求成功 ---- 被v-if控制</p>  <!--为false不创建 -->
        <p v-show="flag">请求成功----被v-show控制</p> <!--false也会创建 css把值隐藏了（标签频繁的被切换使用v-show性能更高一些）-->
    </div>

    <!-- 3.创建vue的实例对象 -->
    <script>
    const vm = {
        //指定数据源，既MVVM中的Model
        data() {
            return {
                flag: false,
            }
        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')  //指定当前vue实例要控制页面的哪个区域
    </script>
</body>
</html>

在这里插入图片描述

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>Document</title>
    <!-- 1.导入vue 的script脚本文件 -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body> 
    <!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
    <div id="app">
        <p v-if="num>0.5"> 随机数大于0.5</p>
        <p v-else>随机数小于等于0.5</p>
        <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>

    <!-- 3.创建vue的实例对象 -->
    <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>

在这里插入图片描述

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>Document</title>
    <!-- 1.导入vue 的script脚本文件 -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body> 
    <!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
    <div id="app">
        <ul>
            <li v-for="(user,i) in userList">索引是:{{i}}, 姓名是：{{user.name}}</li>
        </ul>
    </div>

    <!-- 3.创建vue的实例对象 -->
    <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>

在这里插入图片描述

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>Document</title>
    <!-- 1.导入vue 的script脚本文件 -->
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body> 
    <!-- 2.声明要被vue所控制的DOM区域,既MVVM中的View -->
    <div id="app">
        <!-- 添加用户的区域 -->
        <div>
            <!-- v-model页面上的值发生变化时也会影响内部的值（双向绑定） -->
            <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>

    <!-- 3.创建vue的实例对象 -->
    <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>

在这里插入图片描述

848698119

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端环境的准备-Vue框架介绍-Vue快速入门

官网链接：https://cn.vuejs.org/MVVM模式：创建一个新文件夹拖拽到VSCode里，就会打开一个新的项目并存放在新文件夹中新建文本文件保存文件并给文件命名和指定文件格式HTML输入，生成HTML代码
复制链接

扫一扫