2022-10-3 搭建前端环境和Vue.js入门

1.安装Node.js

Node.js是一个基于JavaScript引擎的服务器端环境，前端项目在开发环境下要基于Node.js来运行

2.Vue.js入门

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

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

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

2.1安装脚手架

配置淘宝镜像

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

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

全局安装脚手架

npm install -g @vue/cli

2.2创建一个项目

vue create vue-demo

2.3运行项目

npm run serve

指定运行端口

npm run serve -- --port 8888

3. 数据绑定

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

4.安装Vue调试工具

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

5.双向数据绑定

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

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

6.事件处理

（1）定义事件

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

（2）调用事件

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