vue基本指令与脚手架基本配置
脚手架(@vue/cli)创建项目启动服务
1、创建项目
vue create 项目名字
2、启动项目
进入项目根目录，运行以下命令
yarn serve
3、脚手架目录代码分析
├── 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 # 依赖包列表
|—— vue.config.js # 覆盖 webpack 的配置,文件自己添加
├── README.md # 项目说明
└── yarn.lock # 项目包版本锁定和缓存地址
4、主要文件及含义
node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件
vue.config.js # 覆盖 webpack 的配置,文件自己添加
5、脚手架自定义配置
src并列新建vue.config.js
/* 覆盖webpack的配置 */
module.exports = {
devServer: { // 自定义服务配置
open: true, // 自动打开浏览器
port: 3000
}
}
6、关闭代码检查工具
module.exports = {
// ...其他配置
lintOnSave: false
}
7、打包压缩配置
module.exports = {
// ...其他配置
mode: 'development' // 开发环境, 不压缩, 不混淆 打包速度非常快,不设置默认压缩
}
Vue 指令
1、插值表达式
语法：{{ 表达式 }}
<h1>{{ msg }}</h1>
2. v-bind 属性动态赋值
语法：v-bind: 属性名 = '变量'
简写：:属性名 = 'vue 变量'
<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">
3. v-on 事件指令
语法：v-on: 事件名 = ‘少量代码/函数/函数(实参)’
简写：@事件名 = ‘少量代码/函数/函数(实参)’
<button v-on:click="count = count + 1">增加1</button>
<button @click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>
4、 v-on 事件对象
无传参：通过形参直接接收
有传参：通过固定值 $event 指代事件对象传给事件处理函数
<a @click="two(10, $event)" href="//www.baidu.com">阻止去百度</a>
two(num, e){ // num = 10 ; e = 事件对象 a
e.preventDefault()
}
5、 v-on 修饰符
语法：@事件名.修饰符 = ‘methods 里的函数’
.stop - 阻止自身而引起事件冒泡
.prevent - 阻止默认行为
.once - 程序运行期间, 只触发一次事件处理函数
.capture - 有3个div事件冒泡会3-2-1，如果给div2加上关键字顺序为2-3-1
.self 忽略其他元素冒泡或者捕获事件，只局限于自身
-------------------------------------
<button @click.stop="btn">.stop阻止事件冒泡</button>
<a href="//www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
<button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
6、 v-on 按键修饰符·
语法：@keyup.按键名字 /按键数字编码
<input type="text" @keydown.enter="enterFn"> // 按下了回车键
更多按键参考 [vue 官网](//cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81)
###### 7、系统修饰符
使用以下修饰符，对应按键处于按下状态才会触发鼠标或者键盘监听
修饰符：.ctrl .alt .shift .meta
<button @click.shift='btnf'></button> // 只有当按下 shift 键才可以触发点击事件
8、v-model 表单指令
双向数据绑定：
数据变化 => 视图自动同步
视图变化 => 数据自动同步
演示：
<input type="text" v-model="username" />
<select v-model="from"> // 下拉框绑定在select上
<option disabled value="">请选择</option> //disabled 禁用选项
<option value="天津市">天津</option>
</select>
<input type="checkbox" v-model="hobby" value="抽烟">抽烟 //复选框变量 hobby 是数组
9、v-model 表单修饰符
.number 以 parseFloat 转成数字类型
.trim 去除首尾空白字符
.lazy 光标离开表单输送
演示：
<input type="text" v-model.number="age">
10、v-text和v-html插值
注意：会覆盖插值表达式
语法：
v-text = ‘vue 数据变量’
v-html = ‘vue 数据变量’
<p v-text="str"> <span>我是一个span标签</span> </p>
<p v-html="str"> 我是一个span标签 </p>
str: "<span>我是一个span标签</span>"
11、v-show 和 v-if 隐藏移除
语法：
v-show = ‘vue 变量’ //变量 true 为隐藏 false 为显示
v-if = ‘vue 变量’ //变量 true 为隐藏 false 为显示
原理：
v-show 用的是display:none 隐藏(频繁切换使用)
v-if 直接从 DOM 树上移除
高级：
v-else 使用
<p v-if="age > 18">我成年了</p>
<p v-else>还得多吃饭</p> // 显示
age:15
12、v-for 循环指令
语法：
v-for = ‘(值，索引) in 目标结果’
v-for = ‘值 in 目标结构’
目标结构：
可以遍历数组、对象、数字、字符串、(可遍历结构)
演示：
// 遍历数组 item 值，index 索引
<li v-for="(item, index) in arr" :key="item">
//遍历对象 value 值，key 属性名
<div v-for="(value, key) in arr" :key="value">
遍历整数，假设 arr:5 ,那么{{i}} 为 1，2，3，4，5
<div v-for="i in arr" :key="i">{{ i }}</div>
**PS: **谁循环，v-for 语句写在谁身上
