Vue基础-day01

Vue是什么？是一个渐进式的Javascript框架。

vue的特点：渐进式，声明式渲染，数据驱动视图 (响应式)，极少的去写DOM操作相关代码，双向绑定，组件系统，不兼容IE8及以下浏览器。

Vue-cli作用？@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目，脚手架是为了保证各施工过程顺利进行而搭设的工作平台。

@vue/cli的好处：开箱即用，0配置webpack，babel支持，css, less支持，开发服务器支持。

库:  封装的属性或方法 (例jquery.js)

框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用

vue传统开发模式：基于html/css/js文件开发vue。

vue工程化开发方式：在webpack环境中开发vue，这是最推荐, 企业常用的方式。

@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    # 项目包版本锁定和缓存地址

{ { 表达式 } }	插值表达式
v-bind:原生属性名="vue变量"	给标签属性设置vue变量的值
简写--   :原生属性名="vue变量"
定义变量：搭配data(){ } 并return{ vue变量 }
v-on	给标签绑定点击事件
简写：@事件名=“要执行的少量代码”
v-on:事件名=“要执行的少量代码”
v-on:事件名=“methods中的函数名”
v-on:事件名=“methods中的函数名(实参)”
定义函数：搭配methods:{ fn(){ 内容 }}
fn(e){ e.preventDefault() }	接收事件对象，无传值
fn(aa,e){ e.preventDefault() }	接收事件对象，有传值,手动添加$event
v-on事件修饰符
v-on:事件名.stop=“methods中的函数名”	.stop阻止事件冒泡行为
v-on:事件名.prevent=“methods中的函数名”	.prevent阻止默认行为
v-on:事件名.once=“methods中的函数名”	.once程序运行期间，只触发一次事件处理函数
	按键的修饰符
@keyup.enter	监测回车按键
@keyup.esc	监测返回按键
@keydown.enter	监测回车按键
@keydown.esc	监测返回按键
v-model=“vue数据变量”	表单value属性和vue数据变量，双向绑定在一起
v-model修饰符
v-model.number=“vue数据变量”	把字符串数字转换成数值数字--修饰符
v-model.trim=“vue数据变量”	去掉两边的空格空白字符--修饰符
v-model.lazy=“vue数据变量”	失去焦点，并内容改变时进行同步--修饰符