0
点赞
收藏
分享

微信扫一扫

Vue.js带你入门

墨香子儿 2022-04-13 阅读 184

Vue

含义:Vue是一个渐进式(按需,逐渐集成功能)Javascript框架

框架:拥有自己的语法规则

库:是方法和集合的集合

Vue脚手架

脚手架启动:

  1. 打开cmd运行yarn,下载全局安装@vue/cli模块包yarn global add @vue/cli
  2. 查看Vue命令版本vue -V出现版本号,则代表安装成功
  3. 创建项目:vue create vuecli-deno
  1. 选择模板,使用上下箭头选择,回车确认,弄错了ctrl+c退出重来

在这里插入图片描述

  1. 选择包管理器

在这里插入图片描述

  1. 等待下载脚手架下载项目,需要的依赖包

在这里插入图片描述

  1. 然后进入文件夹,启动内置的webpack热更新开发服务器

    cd vuecil-demo
    
    yarn serve
    # 或 npm run serve
    
  2. 显示绿色,则代表成功,可以复制路径,到浏览器中打开

在这里插入图片描述

文件夹和文件的含义

 vuecil-demo         # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

脚手架-单vue文件

  • Vue推荐采用.vue文件来开发项目
  • template里只能有一个根标签
  • vue文件-独立模块-作用域互不影响
  • style配合scoped属性,保证样式只针对当前template内标签生效
  • vue文件配合webpack,把他们打包到index.html中

vue设计模式(MVVM)

MVVM是:模型、视图、视图模型,双向关联的设计模式

vue指令

v-bind

  1. 作用:动态绑定标签属性

  2. 语法:

    v-bind:属性名 = "变量名"
    简写:
    :属性名="变量名"
    

v-on和修饰符

  1. 作用:给标签绑定事件

  2. 语法:

    v-on:事件名 = "methods中的函数名"
    v-on:事件名 = "methods中的函数名(实参)"
    简写:
    @事件名 = "methods中的函数名"
    
    
  3. v-on.修饰符 = “methods中的函数名”

举报

相关推荐

0 条评论