0.0 课程介绍
-
Vue介绍 【了解】
-
Vue项目的搭建 【掌握】
-
项目目录详解【掌握】
-
Vue组件化【掌握】
-
Vue的表达式 【重点】
-
Vue的指令【重点】
1.0 什么是Vue?【了解】
Vue是一个构建用户界面（UI）的JS库。
1.1Vue的特点
-
小 20k 【大概11000多行】
-
性能强 虚拟dom
-
双向绑定
-
生态丰富
1.2 Vue历史 [了解]
1.0 -> 2015.10
2.0 -> 2016.10 安装 — Vue.js
3.0 -> 2020.09 Vue.js - 渐进式 JavaScript 框架 | Vue.js
2023年5月20日 ：3.3.4
2.0 Vue的环境搭建【掌握】
2.1 CDN使用
-
直接使用网络资源
-
将vuejs下载到本地
2.2 脚手架安装
先安装Vue脚手架
vue --version // 查看脚手架的版本 安装： npm i @vue/cli -g 或 yarn add global @vue/cli
#注意 如果你的yarn无法使用，可能是没有安装yarn npm i yarn -g,或者是没有配置环境变量
先 yarn global bin 找到你的yarn安装位置
我的电脑-> 右键属性 -> 高级系统配置 ->环境变量 -> path、
2.3 使用脚手架创建Vue的项目
vue create 项目名 // vue-demo demo
一顿操作：
见图形笔记
#如果你想删除你保存预设方案，去我的电脑->用户 ->你的电脑名 ->删掉 vuerc
C:\Users\你的电脑名
3.0 组件化【掌握】
3.1 什么是组件化？
相当于将一个大的页面拆分成多个大组件，通过小组件组合成大组件，这个用组件拼接成页面的思维就叫组件化
特点：
-
可复用
-
易维护
-
可组合
3.2 单文件组件
一个.vue文件就是一个单文件组件
<template> // 你的html
<div>
不仅可以写样式，还可以写很多vue提供的语法及指令
...
</div>
</template>
<script> // 你的js
// 你在此处暴露了什么出去？ VueComponent类
export default {
// 你的VUE配置选项
data(){ // 专门放你的数据
return {
xx
}
},
methods:{ // 专门放你的方法们
fn（）{ },
foo（）{ },
}
}
</script>
<style lang="less" scoped> // 写你的css
</style>
注意： 推荐插件
vuter: 语法提示
Vue VSCode Snippets ： 快捷键
path: 路径提示
4.0 Mustache胡须表达式【重点】
{{ 表达式 }}
`${ 表达式 }`
看是不是表达式？
100 // 是
let arr = [10,20,30]
arr.map(v=>v+100).join('-') // 是
true?'不是'：'是' // 是
if(true){ a = 10 } // 不是
for(let i=0;i<10;i++){ a+=i } // 不是
arr.forEach(i=>{ i+10 }) // 不是
什么是表达式？
1、能够得到唯一结果的一句运算
2、可以放在赋值表达式右侧
5.0 指令 【重点】
vue的指令是什么？
帮助我们操作dom，提高效率
vue的指令就是一个以v-开头的自定义属性
<div id="dxx" class="xxx" age="10" v-xx="表达式">
5.1 v-text 和 v-html
作用：帮助我们渲染dom节点
v-text: 底层是 textContent ,渲染数据，不能识别标签
v-html: 底层是 innerHTML ,渲染数据， 能够识别标签
5.2 v-if 和 v-show
作用： 帮助我们根据条件渲染页面节点
v-show: 底层是通过控制display的属性来进行显示隐藏
v-if: 底层是通过删除页面或重新渲染节点来实现显示隐藏
5.3 v-if 和 v-else-if 和 v-else
作用： 帮助我们根据条件渲染页面节点，跟我们js中的if...else if...else是一样的用法，如果从上到下开始判断，当满足条件就不渲染后面的内容
5.4 v-for 循环
作用 : 帮助我们循环渲染页面
// 数组
let arr = [1,2,3]
<div v-for="（item，index） in arr"> // item 是你的每一项 index是你的索引
{{ item }} -- {{ index }}
</div>
// 对象
let obj = {name:'张无忌',age:18,like:'金花宝宝'}
<div v-for="（value,key,index） in obj">
{{ value }} -- {{ key }} -- {{index}}
</div>
5.5 v-model
作用：实现数据的双向绑定，只用使用v-model 与data里的数据就不分彼此 表单之王
<input v-model="data的数据" />
5.6 v-on 事件
作用：绑定事件， 简写为@
常规写法： <button v-on:事件类型=“表达式”>xxx</button> <button v-on:事件类型=“处理函数”>xxx</button> <button v-on:事件类型=“处理函数（参数1，参数2,...）”>xxx</button> 简写： <button @事件类型=“表达式”>xxx</button> <button @事件类型=“处理函数”>xxx</button> <button @事件类型=“处理函数（参数1，参数2,...）”>xxx</button>
