Vue 简介与快速上手

最新推荐文章于 2024-09-30 14:28:41 发布

im-xia

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量666

点赞数 29

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/x_023/article/details/136435882

版权

Vue

渐进式 JavaScript 框架，即 Vue 不会一次性提供它的全部特性，最初只提供基础特性，需要其他特性时先引入再使用
基于 MVVM 响应式编程模型，避免直接操作 DOM 。一句话总结就是页面输入改变数据，数据改变影响页面数据展示与渲染
核心功能
- 基础功能：页面渲染、表单处理提交、帮我们管理 DOM (虚拟 DOM )节点
- 组件化开发：增强代码的复用能力，复杂系统代码维护更简单
- 前端路由：更流畅的的用户体验、灵活的在页面切换已渲染组件的显示，不需与后端做多余的交互
- 状态集中管理：在 MVVM 响应式模型的基础上实现多组件之间的状态数据同步与管理
- 前端工程化：结合 webpack 等前端打包工具，管理多种静态资源，代码，测试，发布等，整合前端大型项目

使用

安装 node.js (需要其中的 npm 功能，npm 可类比为前端的 maven ) (这里安装的 nodejs 是 12.22.12 版本)
- 通过 node -v 和 npm -version 命令检测是否安装成功
安装完成后设置 npm 镜像

npm config set registry https://registry.npm.taobao.org

npm config ls // 验证是否设置成功

npm config get registry

创建一个新项目并执行以下命令

// 初始化项目
npm init -y
    
// 安装 vue2.6.12
npm install vue@2.6.12

创建 hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>Hello World {{ name }}</h1>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            name: "呦呦呦"
        }
    })
</script>
</body>
</html>

通过浏览器打开，显示 Hello World 呦呦呦
其他基本元素使用

<div id="app">
    <input type="text" v-model="num">
    <button v-on:click="num++">登录</button>
    <button @click="logout()">登出</button>
    <h1>Hello World {{ name }}，当前登录 {{ num }} 次，登录时间：{{ nowDate() }}</h1>
</div>

<script>
    let vm = new Vue({ // 每个 Vue 应用都是通过 Vue 函数创建一个 Vue 实例开始的
        el: "#app", // 挂载的模板
        data: { // 绑定的数据，当数据属性的值改变时，视图也会重新渲染
            name: "哈哈哈",
            num: 1
        },
        methods: { // 绑定的方法，可以实现更复杂的操作
            nowDate() {
                return new Date().toLocaleDateString();
            },
            logout() {
                this.num--;
            }
        }
    })
</script>

其他基本指令

v-text 和 v-html

<div id="app">
    <div v-text="message"></div> // 将值作为文本显示（较{{}}在网速较慢的情况下不会出现暂显情况）
    <div v-html="message"></div> // 将值编译后再显示
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "<a href='a'>Hello</a>"
        }
    })
</script>

v-bind ：实现对属性的值的绑定

//  不使用 v-bind
<div id="app">
    <div title="你放在我头上了！！！" style="fontSize: 50px">
        对v-bind的简单使用
    </div>
</div>

//  使用 v-bind （v-bind 可以省略，只留下一个:）
<div id="app">
    <div v-bind:title="title" :style="{fontSize: bigFont}">
        对v-bind的简单使用
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            bigFont : "50px",
            title: "你放在我头上了！！！",
        }
    })
</script>

v-on ：用于绑定事件，语法 v-on:事件名，可简写为 @click
v-for

<div id="app">
    <ul>
        <li v-for="(item, index) in music">{{ item }}---{{ index + 1 }}</li>
    </ul>
    <ul>
        <li v-for="(item, index) in person">{{ item }}---{{ index }}</li>
    </ul>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            music: [
                '青花瓷',
                '离歌',
                '毒苹果',
            ],
            person: {
                'name': '张怡啼',
                'age': '19',
                'phoneNumber': '15648763647'
            }
        }
    })
</script>
// 输出
青花瓷---1
离歌---2
毒苹果---3

张怡啼---name
19---age
15648763647---phoneNumber

v-if 和 v-show

<div v-if="initalIf">元素是否存在</div>
<div v-show="initalIf">元素是否不被隐藏</div>

v-else 和 v-else-if

<div v-if="number == 1">A</div>
<div v-else-if="number == 2">B</div>
<div v-else>C</div>

组件

全局组件

<div id="app">
    <assembly-whole></assembly-whole> // 引用模板
</div>

<script>
    Vue.component("assembly-whole", { // 命名不要使用驼峰命名
        template: '<div @click="numAw++">{{ numAw }}</div>', // 模板，必须的
        data() { // 数据一定要使用函数格式声明
            return {
                numAw: 10,
            }
        },
    })

    let vm = new Vue({
        el: "#app",
        data: {
            numVm: 50,
        }
    })
</script>

// 父 Vue 实例给全局组件（子 Vue 实例）传值
<div id="app">
    <assembly-whole :num="numVm"></assembly-whole>
</div>
<div id="app2">
    <assembly-whole :num="numVm"></assembly-whole>
</div>

<script>
    Vue.component("assembly-whole", { // 命名不要使用驼峰命名
        template: '<div @click="num++">{{ num }}</div>', // 模板，必须的
        // data() { // 数据一定要使用函数格式声明
        //     return {
        //         numAw: 10,
        //     }
        // },
        props: ["num"],
    })

    let vm = new Vue({
        el: "#app",
        data: {
            numVm: 50,
        }
    })

    let vm2 = new Vue({
        el: "#app2",
        data: {
            numVm: 100,
        }
    })
</script>

局部组件

<div id="app">
    <assembly-part></assembly-part>
</div>
<div id="app2">
    <assembly-part></assembly-part> // 挂载到其他 Vue 实例中的元素是不能正常使用的
</div>

<script>

    let vm = new Vue({
        el: "#app",
        data: {
            numVm: 50,
        },
        components: {
            "assembly-part": {
                template: '<div @click="numAp++">{{ numAp }}</div>',
                data() {
                    return {
                        numAp: 10,
                    }
                },
            }
        }
    })

    let vm2 = new Vue({
        el: "#app2",
        data: {
            numVm: 100,
        }
    })
</script>

路由

// 首先安装 vue-router：npm install vue-router@3.5.2
<head>
    <meta charset="UTF-8">
    <title>Route</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
</head>


<body>
<div id="app">
    <div>
        <router-link to="/index">首页</router-link>
        <router-link to="/product">商品</router-link>
        <router-view></router-view> // 路由到的组件显示的位置
    </div>
</div>
</body>


<script>
    let index = Vue.component("index", {
        template: '<div>你好，欢迎来到大米商城</div>'
    })
    let product = Vue.component("product", {
        template: '<ul>\n' +
            '    <li>1.大米12</li>\n' +
            '    <li>2.大米13</li>\n' +
            '    <li>3.大米13Pro</li>\n' +
            '</ul>'
    })
    new Vue({
        el: "#app",
        router: new VueRouter({
            routes: [
                {
                    path: "/index",
                    component: index,
                },
                {
                    path: "/product",
                    component: product,
                }
            ]
        })
    })
</script>

Axios 访问后台端口

<head>
    <meta charset="UTF-8">
    <title>Axios</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/axios/dist/axios.js"></script>
</head>


<body>
<div id="app">
    <ul>
        <li v-for="(item) in users">
            <ul>
                <li v-for="(itemin) in item">{{ itemin }}</li>
            </ul>
        </li>
    </ul>
</div>
</body>


<script>
    new Vue({
        el: "#app",
        data: {
            users: [],
        },
        methods: {
            getAllUsers() {
                axios.get('http://localhost:8080/user/getAllUser')
                    .then(response => {
                        this.users = response.data.data;
                    })
            }
        },
        mounted() { // 钩子函数
            this.getAllUsers();
        }
    })
</script>

脚手架搭建项目

脚手架安装（全局命令行安装即可）

// 脚手架安装
npm install -g @vue/cli
// init 工具安装
npm i -g @vue/cli-init

搭建项目

命令行 vue init webpack 项目名
项目生成之后打开项目，通过 npm run dev 命令即可运行
需要使用 axios 的话需要进行以下操作

// 命令行安装 axios
npm install axios
npm install vue-axios
// 修改 main.js 文件，在 import 下添加如下代码
import axios from 'axios'
import VueAxios from "vue-axios";

Vue.use(VueAxios, axios)