Vue.js带你入门

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

Vue

含义：Vue是一个渐进式（按需，逐渐集成功能）Javascript框架

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

库：是方法和集合的集合

Vue脚手架

脚手架启动：

0. 打开cmd运行yarn，下载全局安装@vue/cli模块包yarn global add @vue/cli
1. 查看Vue命令版本vue -V出现版本号，则代表安装成功
2. 创建项目：vue create vuecli-deno

注意：项目名不能带大写字母，中文和特殊符号

3. 选择模板，使用上下箭头选择，回车确认，弄错了ctrl+c退出重来

4. 选择包管理器

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

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

    cd vuecil-demo
    ​
    yarn serve
    # 或 npm run serve
   

7. 显示绿色，则代表成功，可以复制路径，到浏览器中打开

文件夹和文件的含义

  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中

注意：template里面只能有一个根标签

vue设计模式（MVVM）

MVVM是：模型、视图、视图模型，双向关联的设计模式

优势：减少DOM操作，提高开发效率

vue指令

v-bind

0. 作用：动态绑定标签属性

1. 语法：

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

v-on和修饰符

0. 作用：给标签绑定事件

1. 语法：

    v-on:事件名 = "methods中的函数名"
    v-on:事件名 = "methods中的函数名（实参）"
    简写：
    @事件名 = "methods中的函数名"
    ​
   

2. v-on.修饰符 = "methods中的函数名"

.修饰符：

.prevent 阻止默认行为

.stop 阻止冒泡