如果Vue是一条大路,我就是一辆汽车,我跑啊跑,我多快乐!

如果Vue是一条大河,我就是一条小鱼,我游啊游,我多快乐!

如果Vue是一棵大树,我就是一片落叶,我飘啊飘,我多快乐!

Vue是前端开发中很重要的工具,这篇文章带你了解一些Vue常用的方法.

一.什么是vue

vue 是一种渐进式的Javascript框架

框架:拥有自己一套语法,有自己的规则

二.创建vue脚手架

脚手架是为了保证施工过程顺利进行而搭设的工作平台

1.脚手架-准备

安装@vue/cli全局模块包

npm i @vue/cli -g

安装可能会出一些小问题

比如卡住了,直接ctrl+c关闭进程,然后再次重新安装就好.

查询是否安装成功

vue -V

出现版本号,代表安装成功

2.脚手架-创建项目/启动服务

2.1创建项目

vue create 项目名

注意:项目名中不能带大写字母,中文或特殊符号

2.2选择模板

 一般选择Vue2那个

选择使用npm还是yarn,喜欢哪个使用哪个

等待下载

使用以下代码打开webpack热更新开发服务器

npm run serve

打开浏览器,输入cmd中的网址

3.脚手架-代码与结构图解

 4.脚手架-自定义配置

在项目文件夹中创建vue.config.js,配置如下代码

module.exports = {devServer:{open:ture//自动打开浏览器port:3000//自定端口}
}

5.脚手架-eslint了解

eslint是一个插件,运行时检查你的代码风格

当你的代码不够严谨时,服务器端与浏览器端均会报错

不喜欢可以暂时关闭,在vue.config.js中配置

module.exports = {lintOnSave:false//关闭eslint检查
}

6.脚手架-单vue文件

1. template里只能有一个根标签

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

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

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

 7.脚手架-清理欢迎界面

将assets下的图片和commponents下的文件删除

App.vue下留一个基础的框

//基础代码


三.Vue语法

1.插值表达式

语法

{{表达式}}

作用:将vue变量直接显示在标签内

2.变量声明

3.MVVM模式

MVVM是一种软件架构模式

M:model数据模型 (data里定义)

V: view视图 (页面标签)

VM: viewModel试图模型(vue.js源码)

MVVM通过数据双向绑定让数据自动的双向同步,无需再操作dom

使用这个思想,我们只需要着重思考如何通过数据驱动视图即可

4.v-bind动态属性

作用:给标签属性赋Vue变量

语法:


我是a标签



5.v-on事件绑定

直接给标签绑定事件

语法:


增加1个

6.定义函数方法

7.v-on事件对象

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

语法:

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

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

//例如


总结:一一对应

8.v-on修饰符

语法:

// @事件名.修饰符 = &＃39;methods 里的函数&＃39;
// .stop 阻止事件冒泡
// .prevent 阻止默认行为
//例.stop阻止事件冒泡.prevent阻止默认行为

9.v-on按键修饰符

语法:

// @keyup.enter - 监测回车按键
// @keyup.esc - 监测返回按键
// 例如:



10.v-model双向绑定

作用:把表单值与vue变量双向绑定

// v-model=&＃39;vue数据变量&＃39;


11.v-model在表单标签中的使用

12.v-model修饰符

语法:

// v-model.修饰符=&＃39;vue数据变量&＃39;
// .number 以parseFloat转成数字类型
// .trim 去除首尾空白字符
// .lazy 在change时触发而非inupt时

13.v-html设置内容

// v-html = &＃39;vue数据变量&＃39;
// 例如:


注意:v-html会覆盖表达式

14.v-show 与 v-if 

控制标签显示或隐藏

语法:

// v-show = &＃39;vue变量&＃39; 使用display:none隐藏
// v-if = &＃39;vue变量&＃39; 直接从DOM树上移除
// v-else = &＃39;vue变量&＃39; 一般配合v-if一起使用
// 例如:

15.v-for 数据循环生成标签

作用: 用数据循环生成标签

// v-for="(值变量, 索引变量) in 目标结构" :key=&＃39;index&＃39;
// v-for="值变量 in 目标结构" :key=&＃39;index&＃39;
// 例如:

• {{ index }} - {{ item }}

注意:

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

同级标签的key值不能重复