一、创建新项目
1.1、命令行创建
1、vue 2
vue init webpack vue2
进入项目文件夹：cd vue2
执行：npm run dev
打开浏览器输入：http://localhost:8080/
2、vue3
创建新项目：vue create test-app
进入项目文件夹：cd test-app
执行：npm run serve
打开浏览器输入：http://localhost:8080/
1.2、GUI面板创建
vue ui
二、模板语法
2.1、插值语法
{{ message }}
2.2、指令，指令带有前缀 v-
2.2.1、v-bind（v-bind:等价于：）单向动态绑定标签属性
<!--
简写
<span :title="message">
-->
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
2.2.2、v-model（表单标签）双向数据绑定
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
2.2.3、v-on:（v-on:等价于@）监听 DOM 事件
v-on:click
改变data中的值
调用方法
<button v-on:click="doSomething($event,88)">按钮</button>
doSomething(event:any,num:number){
//获取按钮对象event.target，再获取按钮里面的内容event.target.innerText
alert(event.target.innerText + num);
}
1、事件修饰符
修饰符是由点开头的指令后缀来表示的。
.prevent：阻止默认事件（常用）；
.stop：阻止事件冒泡（常用）；
.once：事件只触发一次（常用）；
.capture：使用事件的捕获模式；
.self：只有event.target是当前操作的元素时才触发事件；
.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
<!-- 阻止单击事件继续传播，防止事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联，多个修饰符 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只触发一次 -->
<button v-on:click.once="doSomething()">按钮</button>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
常用事件：
@click：鼠标点击事件
@scrool：滚动条事件
@wheel：鼠标滚轮事件
2、按键修饰符
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
自定义事件
2.2.4、条件渲染v-if
<div v-if="awesome === 1"> A</div>
<div v-else-if="awesome === 2">B</div>
<div v-else-if="awesome === 3">C</div>
<div v-else>Not A/B/C</div>
<!-- v-if与template的配合使用 -->
<template v-if="awesome === 1">
<h2>你好</h2>
<h2>尚硅谷</h2>
<h2>北京</h2>
</template>
data() {
return {
awesome: 2,
};
},
2.2.5、条件渲染v-show
<h1 v-show="ok">Hello!</h1>
<!-- v-show不能和template的配合使用 -->
<template v-if="awesome === 1">
<h2>你好</h2>
<h2>尚硅谷</h2>
<h2>北京</h2>
</template>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
注意，v-show 不支持 <template> 元素，也不支持 v-else
2.2.6、列表渲染v-for
1、遍历数组
<ul v-if="todos.length" >
<li v-for="(todo,index) in todos" :key="index">
{{ todo.id }}--{{ todo.name }}--{{index}}
</li>
</ul>
<p v-else>No todos left!</p>
data() {
return {
todos: [
{id:"001",name:"aaa"},
{id:"002",name:"bbb"},
{id:"003",name:"ccc"}
],
};
},
2、遍历对象
参考官网
3、遍历字符串
<!-- 遍历字符串 -->
<h2>测试遍历字符串（用得少）</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>
4、遍历指定次数
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
5、显示过滤后的结果
1）使用监听器
2）使用计算属性
4、显示过滤/排序后的结果
2.2.7、v-text
1、
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span><!-- 插值语法更灵活 -->
2、
2.2.8、v-html
2.2.9、v-cloak
2.2.10、v-once
2.2.11、v-pre
2.3、自定义指令
方式1：函数式
（例子，聚焦input）
方式2：完整式
（例子，聚焦input）
总结
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
自定义指令总结：
一、定义语法：
(1).局部指令：
new Vue({
directives:{指令名:配置对象}
或
directives{指令名:回调函数}
})
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>{{name}}</h2>
<h2>当前的n值是：<span v-text="n"></span> </h2>
<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定义全局指令
/* Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}) */
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
directives:{
//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
/* 'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
big(element,binding){
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}
}
})
</script>
</html>
三、计算属性和监听器
3.1、计算属性
实例：姓名例子
1、使用插值语法
<div>
姓：<input type="text" v-model="firstname"><br>
名：<input type="text" v-model="lastname"><br>
姓名：{{doSoming()}}<!-- 新知识：插值语法中也可以调用方法-->
</div>
methods:{
doSoming(){
return this.firstname+"-"+this.lastname;
}
}
2、计算属性
get有什么作用:
当有人读取fullNamel时，get就会被调用，且返回值就作为fullName的值
get什么时候调用:
1）.初次读取fullName时。
2）.所依赖的数据发生变化时。
姓：<input type="text" v-model="firstname"><br>
名：<input type="text" v-model="lastname"><br>
姓名：{{fullname}}
computed:{
fullname:{
//读取fullNamel时，get被调用
get() {
this.firstname+"-"+this.lastname;
}
//fullname值被改变时，set被调用
set(value) {
console.log("fullname值被改变");
}
}
/*计算属性的简写方式
fullname(){
//这里只是执行get(),不考虑set
return this.firstname+"-"+this.lastname;
}
*/
},
3.2、属性监视（不能写箭头函数）
<template>
<div class="hello">
<input v-model="question">
<p>{{ answer }}</p>
<p>{{ question }}</p>
<input v-model="numbers.a">
<input v-model="numbers.b">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
question: '',
answer: '初始时'，
numbers:{
a:1,
b:1,
c:{
d:{
e:100
}
}
}
}
},
/*计算属性*/
computed:{
fullname(){
//这里只是执行get(),不考虑set
return this.question;
},
/*监听*/
watch: {
//1、简写方式1
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
console.log("新值："+newQuestion + "旧值："+oldQuestion);
this.answer = "`question` 发生改变";
},
//简写方式2
//监听计算属性
fullname(newQuestion, oldQuestion) {
console.log("新值："+newQuestion + "旧值："+oldQuestion);
console.log("监听计算属性");
},
//2、原始方式
//监视多级结构中所有属性的变化
numbers:{
immediate:true,//初始化时让handler调用一下，一般用不到
deep:true,//深度监视，数据复杂才需要，一般用不到
handler(newValue, oldValue){//numbers改变时调用
console.log(this.numbers.a);
console.log(this.numbers.b);
}
}
//3、监视多级结构中某个属性的变化
'numbers.a':{//只检测a的变化
handler(){
console.log('a被改变了')
}
}
},
}
</script>
3.3、计算属性和监听器的区别
当计算属性和监听器都能实现的时候，选择计算属性方式，有异步计算的时候选择监听器方式
四、Class 与 Style 绑定
4.1、绑定 HTML Class
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。
4.2、绑定内联样式
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
五、表单输入绑定
5.1、文本，v-model绑定的就是标签value属性对应的值不需要明写
5.2、单选按钮，v-model绑定的就是标签value属性对应的值需要明写value属性
<input type="radio" id="one" value="One" v-model="picked">
data: {
picked: ''
}
5.3、复选框，v-model绑定的就是标签value属性对应的值需要明写value属性
1、单个复选框，绑定到布尔值
2、多个复选框，绑定到同一个数组：
5.4、选择框
六、过滤器
用于一些常见的文本格式化
用在两个地方：双花括号插值和 v-bind 表达式，由“管道”符号指示
特点：
过滤器可以串联
可以接收参数
包含：全局过滤器，局部过滤器
七、生命周期
八、vue/cli脚手架
8.1、整体架构介绍
8.2、ref属性
8.3、props配置，让组件接收外部传过来的数据
8.4、mixin混入
1、准备混入，即多个组件的公共的方法
2、引入方式一：在组件中引入使用混合
3、引入方式二：全局引入使用混合
8.5、插件
九、TodoList案例——组件化开发
使用props传值只能读值，不能改值
说明：let a = 1;a=2;改值
let a={b:1,c:2};a.b=6;这不算改值
9.1、子组件向父组件传递数据
1、父组件将父组件的方法传递给子组件
2、子组件调用父组件的方法通过参数传递数据给父组件
9.2、父组件向子组件传递数据
1、父组件准备数据，并传递数据
2、子组件通过props接收数据
9.3、祖给组件传递数据
弹窗提示
事件
十、组件的自定义事件
10.1、子组件传递数据给父组件
1、父组件方式一
父组件方式二：更灵活
可以动态获取子组件传递的不定项值
2、子组件
10.2、自定义事件的解绑
10.3、销毁自定义事件
十一、全局事件总线：任意组件间的通信
1、安装全局事件总线
2、绑定事件获取数据
3、触发事件传递数据
十二、消息订阅与发布
这里选择npm i pubsub-js
1、消息的发布方发布消息
2、消息的接收方订阅消息
十三、nextTick
这里是点击编辑后，焦点自动移到输入框
十四、配置代理axios
1、安装npm i axios
2、引入 import axios from ‘axios’
3、使用
出现跨域问题
解决方式一：不完美，只能配置一个代理
解决方式二：完美，可以配置多个代理
十五、引入第三方样式
十六、插槽
16.1、不使用插槽语法
1、
2、
16.2、使用默认插槽
16.3、具名插槽
16.4、作用域插槽
设置插槽
使用插槽，获取值
还可以这样写
或者这样写
十七、Vuex
Vue2是能使用Vuex3
Vue3使用Vuex4
1、vue2安装Vuex：npm i vuex@3
2、使用
十八、路由
18.1、简单使用
1、安装
vue2安装npm i vue-router@3
vue3安装npm i vue-router
2、创建路由器
3、引入
4、简单使用
18.2、注意点
18.3、嵌套路由
18.4、路由传参
18.4.1、通过route的query传递参数
获取
18.4.1、通过route的params传递参数
18.5、命名路由——简化路由的跳转
简化
18.6、路由的props配置
接收数据
18.7、router-link的replace属性
18.8、编程式路由导航
上面使用的都是声明式路由导航，如图
使用编程式路由导航
18.8.1、push()和replace()API
18.8.2、back()和forward()API
18.8.3、go()API可前进和后退，正负值控制
18.9、缓存路由组件keep-alive
18.10、路由守卫
18.10.1、全局前置路由守卫beforeEach
18.10.2、全局后置路由守卫afterEach
18.10.3、独享路由守卫beforeEnter
18.10.4、组件内路由守卫
1、beforeRouteEnter
2、beforeRouteLeave
18.11、路由器的两种模式
18.11.1、hash模式，兼容性好
18.11.1、history模式，兼容性略差
总结
十九、上线流程
npm run build
二十、ElementUi的使用
按需引入
1、npm install babel-plugin-component -D
2、
3、
4、使用
二十一、vue3
创建vue3的两种方式
1、vue create vue3
2、vite
npm init vite-app vue3
cd vue3
npm install
npm run dev
21.1、结构分析
等价写法
21.2、组合式 API
21.2.1、setup
setup的两个注意点
1、props
2、context上下文
1、attrs
2、emit
3、slots
21.2.2、ref函数——定义响应式数据
21.2.3、reactive函数——定义响应式数据
21.2.4、ref和reactive对比
21.2.5、vue3和vue2的响应式原理
vue2的响应式原理
vue3的响应式原理
21.3、computed计算属性
21.4、watch数据监视
21.4.1、watch监视ref数据
21.4.2、watch监视reactive数据
21.5、watchEffect
21.6、vue3生命周期
第一种使用方法：和setup平级
第二种使用方法：写在setup里面——通过组合式api方式
21.7、自定义hook函数
使用
21.8、toRef与toRefs
21.8.1、toRef拆散原数据，单个使用，同时单个数据还是和原数据绑定
21.8.2、toRefs整体拆散原数据，同时单个数据还是和原数据绑定
21.9、shallowReactive和shallowRef
21.10、readonly与shallowReadonly
21.10.1、readonly
21.10.2、shallowReadonly
21.11、toRaw和markRaw
21.11.1、toRaw
21.11.2、markRaw
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
