Vue.js带你入门

Vue

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

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

库：是方法和集合的集合

Vue脚手架

脚手架启动：

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

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

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

5. 选择包管理器

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

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

   cd vuecil-demo
   
   yarn serve
   # 或 npm run serve
   

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

文件夹和文件的含义

 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

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

2. 语法：

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

v-on和修饰符

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

2. 语法：

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

3. v-on.修饰符 = “methods中的函数名”

.修饰符：

​ .prevent 阻止默认行为

​ .stop 阻止冒泡