如果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文件

template里只能有一个根标签
vue文件-独立模块-作用域互不影响
style配合scoped属性, 保证样式只针对当前template内标签生效
vue文件配合webpack, 把他们打包起来插入到index.html

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

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

App.vue下留一个基础的框

//基础代码
<template><div></div>
</template><script>
export default {}
</script><style></style>

三.Vue语法

1.插值表达式

语法

{{表达式}}

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

2.变量声明

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

3.MVVM模式

MVVM是一种软件架构模式

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

V: view视图 (页面标签)

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

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

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

4.v-bind动态属性

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

语法:

<!-- v-bind:属性名='vue变量' -->
<!-- 简写: -->
<!-- :属性名='vue变量' -->
<!-- 例如: -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

5.v-on事件绑定

直接给标签绑定事件

语法:

<!-- v-on:事件名='methods中的函数' -->
<!-- v-on:事件名='methods中的函数(实参)' -->
<!-- 简写:@:事件名='methods中的函数' -->
<!-- 例如 -->
<button v-on:click="addFn">增加1个</button>

6.定义函数方法

<script>export default {data(){return{count:0 }     },methods: {addFn(){ //在vue中调用任意变量需要通过thisthis.count++},}}
</script>

7.v-on事件对象

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

语法:

无传参, 通过形参直接接收
传参, 通过$event指代事件对象传给事件处理函数

//例如
<template><div><a @click="one" href="http://www.baidu.com">阻止百度</a><hr><a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a></div>
</template><script>
export default {methods: {one(e){e.preventDefault()},two(num, e){e.preventDefault()}}
}
</script>

总结:一一对应

8.v-on修饰符

语法:

// @事件名.修饰符 = 'methods 里的函数'
// .stop 阻止事件冒泡
// .prevent 阻止默认行为
//例<button @click.stop="btn">.stop阻止事件冒泡</button><a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>

9.v-on按键修饰符

语法:

// @keyup.enter  -  监测回车按键
// @keyup.esc      -  监测返回按键
// 例如:
<input type="text" @keydown.enter="enterFn">
<input type="text" @keydown.esc="escFn">

10.v-model双向绑定

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

// v-model='vue数据变量'

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

<template><div><div><!-- (重要)遇到复选框, v-model的变量值非数组 - 关联的是复选框的checked属性数组   - 关联的是复选框的value属性--><span>爱好: </span><input type="checkbox" v-model="hobby" value="抽烟">抽烟<input type="checkbox" v-model="hobby" value="喝酒">喝酒<input type="checkbox" v-model="hobby" value="烫头">烫头</div><div><span>性别: </span><input type="radio" value="男" name="sex" v-model="gender">男<input type="radio" value="女" name="sex" v-model="gender">女</div><div><span>自我介绍</span><textarea v-model="intro"></textarea></div></div>
</template><script>
export default {data() {return {hobby: [], sex: "",intro: "",};// 总结:// 特别注意: v-model, 在input[checkbox]的多选框状态// 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用// 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值}
};
</script>

12.v-model修饰符

语法:

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

13.v-html设置内容

// v-html = 'vue数据变量'
// 例如:
<template><div><p v-html="str"></p></div>
</template>

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

14.v-show 与 v-if

控制标签显示或隐藏

语法:

// v-show = 'vue变量' 使用display:none隐藏
// v-if = 'vue变量'   直接从DOM树上移除
// v-else = 'vue变量' 一般配合v-if一起使用
// 例如:<div><h1 v-show="isOk">v-show的盒子</h1><h1 v-if="isOk">v-if的盒子</h1><div><p v-if="age > 18">我成年了</p><p v-else>还得多吃饭</p></div></div>

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

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

// v-for="(值变量, 索引变量) in 目标结构" :key='index'
// v-for="值变量 in 目标结构" :key='index'
// 例如:<ul><li v-for="(item, index) in arr" :key="item">{{ index }} - {{ item }}</li></ul>

注意:

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

同级标签的key值不能重复

Vue脚手架搭建与一些简单小指令相关推荐

vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...
Vue 脚手架搭建目录及文件详解
vue脚手架搭建在各大前端网站都有详解,这里就不多作介绍,此文章主要介绍脚手架搭建后的目录结构,以及配置文件的详解. 1. 目录结构目录结构如下: 我们来介绍一下这些目录: 一级目录 build: ...
前端开发人员必学的VUE脚手架搭建
提示:vue脚手架的作用是用来自动一键生成vue+webpack的项目模版,包括依赖库,免去你手动安装各种插件,寻找各种cdn并一个个引入的麻烦. 文章目录一.cmd命令操作符如何打开? 1.win ...
Vue脚手架搭建及vue项目创建【详细教程】
目录 Vue脚手架环境安装 Vue项目创建 Vue项目目录结构项目运行流程组件结构 Vue脚手架 Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具 ...
Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
vue脚手架搭建项目的兼容性配置
使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm insta ...
Vue脚手架搭建简单步骤
1.安装node.js 2.在命令行中运行命令 npm install -g cnpm --registry=http://registry.npm.taobao.org 3.在命令行中运行命令 np ...
Vue+SpringBoot搭建增删改查小demo
后端实现(SpringBoot) 1.新建一个springboot项目,添加依赖如下: <dependency><groupId>org.springframework.boo ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...

Vue脚手架搭建与一些简单小指令