vue 基础

小野口苗

已于 2022-03-05 15:30:25 修改

阅读量178

点赞数

文章标签： vue.js javascript 前端

于 2022-02-24 19:21:45 首次发布

本文链接：https://blog.csdn.net/wr_qianduan/article/details/123118642

版权

本文详细介绍了Vue.js的基础知识，包括Vue的渐进式特性、@vue/cli的使用、项目结构和代码执行流程。重点讲解了Vue文件的组成部分、MVVM设计模式，以及一系列核心指令如v-bind、v-on、v-model、v-text和v-html的使用。此外，还涵盖了组件的创建、通信方式（props、$emit和EventBus）以及Vue的生命周期。

摘要由CSDN通过智能技术生成

1.vue 介绍

1.1 什么是vue

vue是一个渐进式的javascript框架
渐进式
框架(拥有自己的规则和元素)和库(封装的属性或方法)

1.2 Vue学习的方式

传统的开发通过html页面引入vue
webpack工程化下开发

2.@ vue-cli脚手架

2.1 配置环境

安装 sudo  yarn global add @vue/cli

或: npm install -g @vue/cli
创建项目 vue create 项目名字(禁止中文)

选择模板: (第一次需要设置)
   启动项目 vue serve

(打开目录下终端 command + . 打开浏览器地址 ,,可以自定义配置: /* 覆盖 webpack的配置 */
module.exports = {
devServer: { // 自定义服务配置
open: true, // 自动打开浏览器
port: 3000
}
})
   目录结构： src文件夹下App.vue

2.2  eslint

在 vue.config.js 文件夹设置

3. 项目入口, 以及代码执行顺序和引入关系

4. vue文件

template
       必须，提供组件的结构 html
       注意：必须要一个根元素 div
script
       书写js代码逻辑
  style
       处理样式，默认支持css
       通过lang="less|scss" 可以使用less或者sass
           需要安装依赖包