vue基础命令

1.创建项目 vue  create 项目名

2.进入项目cd  项目名

3.启动项目 yarn serve

主要文件及含义

node_modules下都是下载的第三方包

public/index.html – 浏览器运行的网页

src/main.js – webpack打包的入口文件

src/App.vue – vue项目入口页面

package.json – 依赖包列表文件

@vue/cli 自定义配置

项目根目录下的vue.config.js配置文件

devServer:{

    port:3000,  //端口

    open:true,  //自动打开浏览器

    host:"localhost"  //设置本地主机地址

  }

eslint是代码检查工具，违反规定就报错

在vue.config.js中设置lintOnSave为false重启服务器即可 暂时关闭

@vue/cli 单vue文件

Vue推荐采用.vue文件来开发项目

template里只能有一个根标签

vue文件-独立模块-作用域互不影响

style配合scoped属性, 保证样式只针对当前template内标签生效

vue文件配合webpack, 把他们打包起来插入到index.html

@vue/cli 欢迎界面清理

assets下图片和components下的文件,删除

App.vue文件里代码只留个框即可

脚手架环境

@vue/cli是：全局模块包，安装后得到vue的命令

创建脚手架项目：vue create 项目名  得到一套标准文件夹+文件+webpack环境

启动脚手架项目：yarn server启动, 内置了webpack-dev-server, 得到一个地址和端口浏览器webpack打包后网页

脚手架的好处：开箱即用, 配置好的一套环境, 快速开发自己项目

脚手架项目入口：main.js  - webpack打包入口

                                App.vue    - Vue页面入口

                                index.html - 网页入口

单vue文件的好处：独立作用域,作用域互不影响，style配合scoped样式针对当前标签生效 互不影响

插值表达式

语法: {{ 表达式 }} 插值表达式中不能写语句 ：不能写分支，循环

双大括号，可以把Vue变量直接显示在标签内

Vue中变量声明在：data必须是一个函数 在函数里面 需要一个return 对象

MVVM设计模式

安装：vue-devtools

讲解

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)

   MVVM，一种软件架构模式，决定了写代码的思想和层次

• • M： model数据模型 (data里定义)
  • V： view视图 （页面标签）
  • VM： ViewModel视图模型 (vue.js源码)
• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
  • V （修改视图） -> M（数据自动同步）
  • M（修改数据） -> V （视图自动同步）

设计模式是对代码分层，引入一种架构的概念

MVVM是（模型，视图，视图模型双向关联的一种设计模式）

vue指令

1:vue指令-v-bind  属性动态赋值

语法：v-bind:属性名="vue变量"

简写：:属性名="vue变量"

2:vue指令-v-on 给标签绑定事件

语法:v-on:事件名="methods中的函数"

        v-on:事件名="methods中的函数(实参)”

简写：@事件名="methods里的函数名"

函数时定义在跟data 平级处  methods:{

函数名(){}

}

3: vue事件处理函数中, 拿到事件对象

语法:

无传参, 通过形参直接接收

传参, 通过$event指代事件对象传给事件处理函数

4: vue指令-v-on修饰符

语法:

@事件名.修饰符="methods里函数"

   .stop       - 阻止事件冒泡

   .prevent   - 阻止默认行为

5: vue指令-v-on按键修饰符

语法:

@keyup.enter  -  只有按下回车才能触发这个键盘事件函数  或者 @keydown.enter

@keyup.esc      -  只有按下取消键才能触发这个键盘事件函数 或者  @keydown.esc

6: vue指令 v-model双向绑定1

语法: v-model="vue数据变量"

双向数据绑定

数据变化 -> 视图自动同步

视图变化 -> 数据自动同步

最后演示: 用户名绑定 - Vue内部是MVVM设计模式

​

7: Vue指令-v-model修饰符

语法:

v-model.修饰符="vue数据变量"

.number   以parseFloat转成数字类型

.trim          去除首尾空白字符

.lazy           在change时触发而非inupt时

8: Vue指令-v-html 设置内容

语法:

v-html="vue数据变量"

注意: 会覆盖插值表达式

v-html作用:可以设置标签显示的内容

和插值表达式区别是:插值表达式把值当成普通字符串显示，v-html把值当成标签进行解析显示

9.Vue指令-v-show和v-if

语法:

v-show="vue变量"            

v-if="vue变量"

原理

v-show 用的display:none隐藏   (频繁切换使用)

v-if  直接从DOM树上移除

高级

V-if 可以配合 v-else使用

10. Vue指令-v-for 用数据循环生成标签

语法

v-for="(值变量, 索引变量) in 目标结构"

v-for="值变量 in 目标结构"

目标结构:

可以遍历数组 / 对象 / 数字 / 字符串

注意:

  v-for的临时变量名不能用到v-for范围外

  同级标签的key值不能重复

v-for循环列表：先准备目标数据结构 可以遍历数组/对象/固定数字/字符串 谁想循环就把v-for写谁身上

v-for注意事项：值变量和索引变量不能用到v-for范围以外  v-for="(值变量, 索引变量) in Vue变量" - 一定要注意in两边必须有空格

v-for更新的机制: 数组变更方法, 就会导致v-for更新, 页面更新. 数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()

这些方法会触发数组改变, v-for会监测到并更新页面:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

这些方法不会触发v-for更新

slice()

filter()

concat()

Vue基础_v-for就地更新:v-for 的默认行为会尝试原地修改元素而不是移动它们。

v-for更新时, 是尝试复用标签就地更新内容

npm和yarn命令

1 npm	2 yarn
3 快速初始化:  npm init -y	4 快速初始化:  yarn init -y
5 项目依赖包:   npm i  xxx	6 项目依赖包:   yarn add xxx
7 项目开发依赖包:   npm i  xxx -D	8 项目开发依赖包:  yarn add  xxx -D
9 全局包: npm i  -g xxx	10 全局包: yarn global add  xxx
11 删除包: npm uni xxx	12 删除包: yarn remove xxx
13 脚本运行:  npm run  xxx	14 脚本运行: yarn  xxx
15

案例折叠面板