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="http://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="http://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 官网](https://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 语句写在谁身上