Vue2Vue3学习笔记

Posted 2022-03-05 江州益彤

====

一、创建新项目

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（表单标签）双向数据绑定

2.2.3、v-on:click（v-on:等价于@）监听 DOM 事件

改变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、事件修饰符
修饰符是由点开头的指令后缀来表示的。
.stop(常用)
.prevent(常用)
.capture
.self
.once(常用)
.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>

2、按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.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>

data() 
  return 
    awesome: 2,
  ;
,

注意：用 key 管理可复用的元素

2.2.5、条件渲染v-show

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
注意，v-show 不支持 元素，也不支持 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、显示过滤后的结果

1）使用监听器

2）使用计算属性

4、显示过滤/排序后的结果

2.2.7、v-text

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>msg</span><!-- 插值语法更灵活 -->

三、计算属性和监听器

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: '初始时'
    
  ,
  /*计算属性*/
  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()
        console.log(this.numbers.a);
        console.log(this.numbers.b);
      
    
  ,

</script>

3.3、计算属性和监听器的区别

当计算属性和监听器都能实现的时候，选择计算属性方式，有一部计算的时候选择监听器方式

四、Class 与 Style 绑定

4.1、绑定 html Class

<div v-bind:class=" active: isActive "></div>

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、
<