Vue.js入门
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)扩展程序的安装
![](https://i-blog.csdnimg.cn/blog_migrate/a02b5fa1318033f65b545bc79c7e7496.png)
(2)扩展程序的使用
![](https://i-blog.csdnimg.cn/blog_migrate/beb4e2e81e8a2ad8e241946a4975c656.png)
7.6、双向数据绑定
数据会绑定到组件,组件的改变也会影响数据定义
<p>
<!-- 指令 -->
<input type="text" v-model="course">
</p>
7.7、事件处理
(1)定义事件
// 定义方法
methods: {
toPay(){
console.log('去支付')
}
}
(2)调用事件
<p>
<!-- 事件 -->
<button @click="toPay()">去支付</button>
</p>