vue概念
渐进式js框架，拥有一套自己规则的语法
vue的学习方式
- 传统开发模式：基于html文件开发Vue
- 工程化开发方式：在webpack环境中开发Vue，这是最推荐
@vue/cli脚手架
- 脚手架是为了保证各施工过程顺利进行而搭设的工作平台
- @vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目
安装
- 全局安装@vue/cli模块包
npm install -g @vue/cli
- 查看是否成功
vue -V
- 创建项目
vue create vuecli-demo
- cd进入项目下, 启动内置的webpack本地热更新开发服务器 – 浏览项目页面
cd vuecli-demo
npm run serve
| 脚手架主要文件和作用 | |
|---|---|
| node_modules | 都是下载的第三方包 |
| public/index.html | 浏览器运行的网页 |
| src/main.js | webpack打包的入口 |
| src/App.vue | vue页面入口 |
| package.json | 依赖包列表文件 |
| main.js和App.vue,以及index.html作用和关系 | |
|---|---|
| main.js | 项目打包主入口-vue初始化 |
| App.vue | vue页面入口 |
| index.html | 浏览器运行的文件 |
| main.js=>App.vue=>index.html |
修改端口号
webpack.config.js
module.exports={
devServer:{
port:3000,
open:true
}
}
eslint检查代码
eslint是代码检查工具, 违反规定就报错
module.exports={
lintOnSave:false
}
单vue文件讲解
- Vue推荐采用.vue文件来开发项目
- template里只能有一个根标签
- vue文件-独立模块-作用域互不影响
- style配合scoped属性, 保证样式只针对当前template内标签生效
- vue文件配合webpack, 把他们打包起来插入到index.html
清理欢迎界面
- assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)
- src/App.vue默认有很多内容, 可以全部删除留下template和script和style的框
vue指令
插值表达式
在dom标签中, 直接插入vue数据变量（可以动态显示dom中的内容）
- 又叫: 声明式渲染/文本插值 语法: {{ 表达式 }}
- 表达式和语句的区别 语句：if语句，for语句
- msg和obj是vue数据变量 要在js中data函数里声明
MVVM设计模式
1.设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结
2.MVVM(模型, 视图, 视图模型双向关联的一种设计模式)
v-bind
给标签属性设置Vue变量的值
语法：v-bind:属性名="vue变量" 简写：:属性名="vue变量"
<a v-bind:href="url"></a>
<img :src="imgSrc">
v-on
绑定事件
给标签绑定事件
语法：
- v-on:事件名=“要执行的少量代码"
- v-on:事件名=“methods中的函数名"
- v-on:事件名=“methods中的函数名(实参)"
- @事件名=“methods中的函数” (简写)
<button v-on:click="变量名=变量名+1">按钮1</button>
<button v-on:click="变量名">按钮2</button>
<button v-on:click="变量名(传参)">按钮3</button>
事件对象
Vue事件处理函数中, 拿到事件对象
语法：
- 无传参, 通过形参直接接收
- 传参, 通过$event指代事件对象传给事件处理函数
<a @click="one" href="http://xxxxxxxx">阻止</a>
<a @click="two(10,Sevent)" href="http://xxxxxxxx">阻止</a>
修饰符
在事件后面.修饰符名 - 给事件带来更强大的功能
-
语法：
@事件名.修饰符="methods里函数"
-
修饰符列表 .stop - 阻止事件冒泡 .prevent - 阻止默认行为 .once - 程序运行期间, 只触发一次事件处理函数
-
按键修饰符
@keydown.enter - 监测回车按键 @keydown.esc - 监测返回按键
v-model
value属性和Vue数据变量, 双向绑定到一起
-
语法: v-model="Vue数据变量"
-
双向数据绑定
- 变量变化 -> 视图自动同步
- 视图变化 -> 变量自动同步
- 下拉菜单v-model写在select, value在option上
- v-model用在复选框时,v-model的vue变量是 非数组 – 关联的是checked属性 数组 – 关联的是value属性
- vue变量初始值会影响, 因为双向数据绑定-互相影响
model修饰符
| 语法: | v-model.修饰符="Vue数据变量" |
|---|---|
| .number | 以parseFloat转成数字类型 |
| .trim | 去除首尾空白字符 |
| .lazy | 在change时触发而非input时 |
v-for
功能：列表渲染, 所在标签结构, 按照数据数量, 循环生成
注意：
- 想循环就把v-for写谁身上
- v-for=“(值变量, 索引变量) in 目标结构”-一定注意in两边必须有空格
- v-for可以遍历数组 / 对象 / 固定数字
- v-for的值变量和索引变量不能用到v-for范围以外
- 语法: v-for="值变量 in 目标结构" v-for="(值变量, 索引变量) in 目标结构"
- 目标结构: 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
- 注意: v-for的临时变量名不能用到v-for范围外
<ul>
<li v-for="item in arr":key="item"></li>
<li v-for="(item,index) in arr":key="item"></li>
</ul>
v-text和v-html
更新DOM对象的innerText/innerHTML
- 语法: v-text="Vue数据变量" v-html="Vue数据变量"
- 注意: 会覆盖插值表达式
v-text把值当成普通字符串显示 v-html把值当成标签进行解析显示
<p v-text="str"></p>
<p v-html="<h1>str</h1>"></p>
v-show和v-if
控制标签的隐藏或出现
- 语法: v-show="Vue变量" v-if="Vue变量"
- 原理 v-show 用的display:none隐藏 (频繁切换使用) v-if 直接从DOM树上移除
- 高级 v-else的使用
v-show是用css方式隐藏标签 v-if直接从DOM树上移除 v-if 可以配合v-else或者v-else-if使用
<h1 v-show="isok">盒子</h1>
<h1 v-if="isok">盒子</h1>
isok:true
\
