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 目标结构'

目标结构：
可以遍历数组、对象、数字、字符串、(可遍历结构)