Vue脚手架、基础API

Vue基础概念

vue是一个渐进式的javascript框架

vue开发的两种方式：1.传统的在html页面引入vue
2.webpack工程化开发

vue文件的三个根标签：1.template 提供组件的html结构（vue文件中必须有一个template，template中必须有且只能有一个根元素）
2.script 写js代码
3.style 写css样式（通过lang="less/sass"可以使用less或者sass，但需要安装依赖包）

vue-cli脚手架

因为webpack配置起来很麻烦，所以vue官方提供了vue-cli用于创建一个vue项目

vue/cli的好处
1.0配置的webpack
2.支持babel、css、less、开发服务器等

vue-cli安装
yarn global add @vue/cli或npm i @vue/cli -g
安装脚手架之后可以得到一个vue命令，使用vue create 项目名称初始化一个vue项目；（注意：项目名不能带大写字母, 中文和特殊符号）
进入脚手架项目目录下，使用yarn serve 或 npm run serve 启动服务器

@vue/cli 目录和代码分析

 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自定义配置
在src文件夹并列处创建vue.config.js；
在vue.config.js里写自定义的配置

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

eslint
vue自带的一个代码检查工具，可以在vue.config.js中使用lintOnSave: false关闭

.vue文件

vue推荐使用.vue文件来开发项目
vue文件是独立的模块，作用域相互不影响
style配合scoped属性，可以保证样式只对当前文件template内的标签生效
vue文件配合webpack，把所有代码打包插入index.html

vue基础API

插值表达式
语法：{{ 表达式 }}
在DOM中使用插值表达式，表达式中的变量必须在data里声明

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {  // key相当于变量名
      msg: "hello, vue",
      obj: {
        name: "小vue",
        age: 5
      }
    }
  }
}
</script>

<style>
</style>

MVVM设计模式
设计模式：是一套被反复使用的、多数人知晓的、经过分类编目的代码设计经验的总结；
MVVM是一种软件的架构模式
M：model数据模型 （在data里定义）
V：view视图 （html页面）
VM：ViewModel视图模型 （vue.js源码）

MVVM通过数据双向绑定让数据自动双向同步，不需要再操作DOM

在vue中，不推荐手动操作DOM，而是通过操作数据驱动视图的改变

vue指令 v-bind
vue指令实质上就是特殊的html标签属性，特点：都是v-开头
语法：v-bind:属性名="vue变量"
简写：:属性名="vue变量"
v-bind的作用：在属性名前加上v-bind后，属性值里写的就是变量，可以把vue变量的值赋予DOM属性，影响标签的显示

v-on
作用：给标签绑定事件
语法：v-on:事件名="要执行的代码（少量）/methods中的函数（可以传参）"
简写：@事件名="要执行的代码（少量）/methods中的函数（可以传参）"

vue事件处理函数中，拿到事件对象的方法：1.无传参，直接在函数中通过形参接收；
2.有传参，通过$event传给事件处理函数（注意：$event写在传参的最后一个位置）

v-on修饰符：
.stop ：阻止事件冒泡
.prevent ：阻止浏览器默认行为
.once ：只触发一次事件处理函数

<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
    <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
  </div>
</template>

v-on按键修饰符：
keyup.enter 监测回车键
keyup.esc 监测esc键
更多修饰符

vue指令 v-model
作用：将value属性和vue数据变量双向绑定（input标签使用）
语法：v-model="vue数据变量"
注意：下拉菜单将v-model绑定在select标签上；
复选框使用时，v-model的变量是数组的话绑定的是复选框的value属性，非数组绑定复选框的checked属性

v-model修饰符：
.number – 以parseFloat转换为数字类型
.trim – 去除首尾空白字符
.lazy – 在change时触发而非input时

v-text和v-html
语法：v-text="vue数据变量"
v-html="vue数据变量"
注意：会覆盖插值表达式

v-show和v-if
语法：v-show="vue变量"
v-if="vue变量"
v-else-if="vue变量"
v-else
v-show使用display:none隐藏标签；v-if直接删除标签；

v-for
语法：v-for="(值，索引) in 目标结构"索引可省略
目标结构：可以遍历的数组、对象、数字、字符串等
注意：v-for的临时变量名不能在使用v-for的标签之外使用；
v-for需要配合 :key使用，不然会报错