Vue的简单学习

Vue.js入门

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

Vue.js 是一个前端框架，帮助我们快速构建前端项目。

使用 vue 有两种方式，一个是传统的在 html 文件中引入 js 脚本文件的方式，另一个是脚手架的方式。

我们的项目，使用的是脚手架的方式。

1.1、安装脚手架

配置淘宝镜像

# 经过下面的配置，所有的 npm install 都会经过淘宝的镜像地址下载

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

全局安装脚手架

npm install -g @vue/cli

1.2、创建一个项目

先进入项目目录（ Ctrl + ~ ），然后创建一个项目

vue create vue-demo

创建过程中，会让你选择（一般来说选择vue2，但Vue 2 将于 2023 年 12 月 31 日停止维护。）

1.3、运行项目

npm run serve

指定运行端口

npm run serve -- --port 8888 

7.4、数据绑定

修改 src/App.vue

<!--定义页面结构-->
<template>
    <div>
        <h1>Vue案例</h1>
        <!-- 插值 -->
        <p>{{course}}</p>
    </div>
</template>
<!--定义页面脚本-->
<script>
    export default {
    // 定义数据
    data () {
        return {
            course: '微信支付'
        }
    }
}
</script>

7.5、安装Vue调试工具

在 Chrome 的扩展程序中安装： Vue.jsDevtools.zip

（1）扩展程序的安装

（2）扩展程序的使用

7.6、双向数据绑定

数据会绑定到组件，组件的改变也会影响数据定义

<p>
    <!-- 指令 -->
    <input type="text" v-model="course">
</p>

7.7、事件处理

（1）定义事件

// 定义方法
methods: {
    toPay(){
        console.log('去支付')
    }
}

（2）调用事件

<p>
    <!-- 事件 -->
    <button @click="toPay()">去支付</button>
</p>