Vue学习

最新推荐文章于 2023-08-21 09:46:56 发布

Cindy的雨伞

最新推荐文章于 2023-08-21 09:46:56 发布

阅读量190

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_51518228/article/details/121819070

版权

VUE 简介

什么是VUE?

VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。

什么场景使用VUE？

绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如: 美团，饿了么，淘宝，知乎，大众点评，微博…

官方js文件下载

cn.vuejs.org

业务及代码实现

构建HTML页面，呈现如下效果，并在图中点击加，减按钮时实现中间数字的变化（要求基于vue技术进行实现）。请添加图片描述
第一步：定义HTML页面并引入vue.js文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="/js/vue.js"></script>
</head>
<body>
</body>
</html>

第二步：在html页面中的body内部添加如下元素。

 <div id="app">
    <button @click="minus">-</button>
    <span>{{n}}</span>
    <button @click="add">+</button>
 </div>

说明：
1)在界面中要添加vue对象要监控元素,习惯上都用 id=“app”
2)找到界面中将来可能发生变化的位置，用{{变量名}}特殊语法标记出来
3)找到界面中可以点击的位置绑定事件处理函数。

第三步：在html页面中的body底端部分构建JS代码实现
在JS中创建一个Vue类型的对象来监视页面中的内容。

<script>
    new Vue({
      el:"#app",
      data:{
        n:0 //起始值为0
      },
      methods:{
        add(){
          this.n++ //访问data中变量必须用this
        },
        minus(){
          if(this.n>0){ this.n-- }
        }
      }
    })
  </script>

其中：
1)el(element缩写)属性:“选择器”，为Vue对象要监视的范围。
2)页面所有变量，都必须保存在data属性中，且以对象属性形式保存。
3)页面所有事件处理函数，都必须保存在methods属性中，且以对象方法形式保存。

02-VUE中的MVVM设计分析

MVVM设计概述

MVVM是一种设计思想，对早期的web前端开发做了增强，将前端代码按其职责的不同分成了三部分：

界面(View)部分：由html+css构成，并允许在html,css中直接使用变量，表达式，语句等。
模型部分(Model)：一般为一个JSON格式的对象，用于存储view中需要的数据和函数。
视图模型(ViewModel):专门负责自动维护模型对象中的变量与界面中的变量同步。

因为有了ViewModel的存在，数据可以自动同步到界面上，几乎避免了大量重复的编码！
VUE中的MVVM实现
设计分析
MVVM在VUE前端框架中的设计，如图所示：
请添加图片描述

03-VUE中的插值( Interpolation)语法

语法
这种语法是为了在html中添加变量，借助变量方式与js程序中的变量值进行同步，进而简化代码编写。其基本语法为：<HTML元素>{{变量或js表达式}}</HTML元素>
在{undefined{}}内部可以写:变量、算术计算、三目、访问数组元素、创建对象、调用函数等，总之只要有返回的合法的js变量和表达式都行。但是不可以写程序结构(分支和循环)以及没有返回值的js表达式。

实践分析

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>用户名:{{username}}</h3>
    <h3>性别:{{gender==1?"男":"女"}}</h3>
    <h3>小计:¥{{(price*count).toFixed(2)}}</h3>
    <h3>下单时间: {{new Date(orderTime).toLocaleString()}}</h3>
    <h3>今天星期{{week[new Date().getDay()]}}</h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        uname:"dingding",
        gender:1,
        price:12.5,
        count:5,
        orderTime:1600228004389,
        week:["日","一","二","三","四","五","六"]
      }
    })
  </script>
</body>
</html>

04-VUE 常用指令最佳实践

Vue中的常用指令

v-bind

在html中假如希望元素的属性值随程序内容的发生而变化，可以借助v-bind或:代替，其基本语法如：<元素 v-bind:属性名="变量或js表达式">
也可以采用其简化形式，其基本语法如：<元素 :属性名="变量或js表达式">
案例分析：

	<div id="app">
		<font :color="color">hello</font>
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				color:"red"
			}
		});
	</script>

v-show

v-show为一个专门控制元素的显示隐藏的特殊指令，其基本语法为：

<元素 v-show=“bool类型的变量或返回bool类型的js表达式”>

当Vue对象扫描到v-show时，就会立刻执行""中的变量或js表达式,
如果变量或js表达式的值为true，则什么也不干，元素保持原样显示。如果变量或js表达式的值为false，则new Vue()自动为当前元素添加display:none。

示例关键代码如下：

  <style>
    .pop{
      width:300px; height:150px;
      background-color:lightGreen;
    }
    .pop>.close{
      float:right;
      padding:5px 10px;
      cursor:pointer;
    }
  </style>

 <div id="app">
    <button @click="show">show</button>
    <div v-show="display" class="pop">
      <span class="close" @click="hide">×</span>
    </div>
 </div>

  <script>
        //2. 创建new Vue对象
        new Vue({
          el:"#app",
          data:{
            display:false
          },
          methods:{
            show(){
              this.display=true;
            },
            hide(){
              this.display=false;
            }
          }
        })
    </script>

v-if 和 v-else

v-if 和 v-else 是在html实现分支控制，二选一的一种实现方式，在使用时，v-if和v-else对应的的两个元素必须紧挨着写！中间不能插入其他元素，其基本语法为：

<元素1 v-if="boolean类型的变量或js表达式">
<元素2 v-else>

<div id="app">
    <!--第一个div是已登录时显示的内容-->
    <div v-if="isLogin"><h3>Welcome, dingding | <a href="javascript:;" @click="logout">注销</a></h3></div>
    <!--第二个div是未登录时显示的内容-->
    <div v-else><a href="javascript:;" @click="login">登录</a> | <a href="javascript:;">注册</a></div>
  </div>

 <script>
    new Vue({
      el:"#app",
      data:{
        isLogin:false //开局用户默认是未登录的
      },
      methods:{
        login(){
          this.isLogin=true;
        },
        logout(){
          this.isLogin=false;
        }
      }
    })
  </script>

v-else-if

v-else-if专门和v-if搭配使用，控制多个元素多选一显示的特殊的指令。其基本语法为：

<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
<元素3 v-else-if="条件3">
... ...
<元素n v-else>

注意，v-if和v-else-if和v-else之间必须连着写，不能插入其他元素。

示例关键代码如下：

<div id="app">
    <span v-if="score>=90">优秀</span>
    <span v-else-if="score>=80">良好</span>
    <span v-else-if="score>=70">及格</span>
    <span v-else>及格</span>
 </div>

  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        score:95
      }
    })
    //在控制台中: vm.socre=85
  </script>

v-for

v-for是一个专门用于根据数组内容反复生成多个相同结构的元素的特殊指令。其语法为：

<要反复生成的元素 v-for="(当前元素值, 当前位置) of 数组">

示例关键代码如下：

<div id="app">
    <!--需求: 根据tasks数组中的任务列表反复生成多个li-->
    <ul>
      <li v-for="(t,i) of tasks" :key="i">
      {{i+1}} - {{t}}
      </li>
    </ul>
  </div>

 <script>
    var vm=new Vue({
      el:"#app",
      data:{
        //用一个数组保存待办事项列表
        tasks:["吃饭", "睡觉"]
      }
    })
  </script>

v-for还可以遍历对象属性，例如：

<div id="app">
    <!--需求: 遍历lilei对象，在页面显示李磊对象的详细信息-->
    <ul>
      <li v-for="(value,key) of lilei" :key="key">
        {{key}} : {{value}}
      </li>
    </ul>
  </div>

  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        lilei:{
          name:"Li Lei",
          age:11
        }
      }
    })
  </script>

v-for 还可以进行计数，例如：

  <div id="app">
    <ul>
      <li v-for="i of pageCount" :key="i">{{i}}</li>
    </ul>
  </div>

  <script>
    new Vue({
      el:"#app",
      data:{
        pageCount:5 //共5页
      }
    })
  </script>

v-on

v-on 是一个专门绑定事件处理函数的指令，其基本语法为：

<元素 v-on:事件名="事件处理函数名()">

凡是在页面中定义的事件处理函数，都要在new Vue()中的methods成员内添加对应的函数实体。

示例关键代码如下：

<div id="app">
<!--点哪个div，哪个div就可以喊自己疼！-->
<div id="d1" @click="say('html')">d1</div>
<div id="d2" @click="say('css')">d2</div>
</div>

 <script>
    new Vue({
      el:"#app",
      methods:{
        say(name){
          console.log(`hello ${name}!`)
        }
      }
    })
  <script>

v-html

如果{{}}绑定的是一段HTML片段时，是不会交给浏览器解析的。而是原样显示HTML片段的内容——和DOM中的textContent是一样的,假如希望html可被解析可以使用v-html代替{{}}。其基本语法结构为：

 <元素 v-html="变量"> 这个位置显示变量内容 </元素>

示例关键代码如下：

 <div id="app">
    <h3>{{msg}}</h3>
    <h3 v-html="msg"></h3>
  </div>

  <script>
    new Vue({
      el:"#app",
      data:{
        msg:`来自&lt;&lt;<a href="javascript:;">新华社</a>&gt;&gt;的消息`
      }
    })
  </script>

v-text

v-text是可代替{{}}绑定元素内容的特殊指令,用于设置元素内部的文本内容，而且可以防止因网络延迟短暂显示{{}}的现象。其语法为：

<元素 v-text="变量或js表达式"> </元素>

示例关键代码如下：

  <div id="app">
            <!--js的天下         -->
    <h3 v-text=`用户名:${uname}`></h3>
            <!--js的天下         -->
    <h3 v-text=`积分:${score}`></h3>
  </div>

  <script>
    setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:1000
        }
      })
    },6000)
  </script>

v-model

v-model 是用于实现双向绑定的指令，既能将程序中的变化，自动更新到页面上(model->view)，又能将页面上发生的变化，更新回程序中的变量中(view->model),其基本语法为：

<表单元素 v-model:value="变量">

示例关键代码如下：

 <div id="app">
    <!--单向绑定: (Model->View 不能View->Model)-->
    <!-- <input :value="keyword"> -->
    <!--双向绑定: (Model->View 又能View->Model)-->
    <input v-model:value="keyword">
    <button @click="doUpdate">更新</button>
  </div>

  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        keyword:"ABC" //开局用户没有输入任何关键词
      },
      methods:{
        doUpdate(){
          console.log(`查找 ${this.keyword} 相关的内容...`)
        }
      }
    })
  <script>

单选操作的双向绑定：

单选操作的value因为是写死的固定的备选值！用户在不同radio之前切换选中状态时，其实改变的是radio的checked属性值。所以，想用双向绑定获得当前选中的radio的值，应该绑定checked属性:<input type="radio" value="固定值" v-model:checked="变量"
示例代码如下：

<div id="app">
    性别:
    <label><input type="radio" name="sex" value="1" v-model:checked="sex">男</label>
    <label><input type="radio" name="sex" value="0" v-model:checked="sex">女</label>
    <h3>您选的性别是:{{sex==1?"男":"女"}}</h3>
 </div>

 <script>
    new Vue({
      el:"#app",
      data:{
        sex:1
      }
    })
 </script>

select元素的双向绑定

一个select下包含多个option元素。所有备选值value，都分布在每个option上。但是每个备选值value也是写死的。用户每次选择不同的option时，其实select元素会将选中的option的value值，修改到select的value属性上。其语法为：

<select v-model:value="变量">
 <option value="值1">xxx</option>

 ... ...

 ... ...
</select>

示例代码如下：

 <div id="app">
    <select v-model:value="src">
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="hangzhou">杭州</option>
    </select><br/>
    <img :src="src">
  </div>

  <script>
    new Vue({
      el:"#app",
      data:{
        src:"beijing"
      }
    })
  </script>

05-VUE 组件技术应用实践

概述
组件是拥有专属的HTML+JS+CSS+数据的可重用性元素，用于定义独立的页面功能区域，当想要扩展HTML的功能时,就可以
使用vue定义一些组件，组件可分为两大类，例如：

1,全局组件: Vue.component(组件名, 组件的功能)
2,局部组件: 在Vue对象里, 再加一个属性components

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 组件Component</title>
		<!-- 1.导入vue.js -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 2.数据渲染区 -->
		<div id="app">
			<!-- 5.使用组件 -->
			<htitle></htitle>
			
		</div>
		
		<div id="d1">
			<htitle></htitle>
			<btn></btn>
		</div>
		<script>
			//4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了HTML的标签
			//Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效果
			Vue.component('htitle',{
				template : '<h1>你好 Vue组件</h1>' //组件的显示效果
			}) 
			//3. 创建Vue对象
			new Vue({
				el:'#app'
			})
			new Vue({
				el:'#d1'    ,
				// 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用)
				components: {
					'btn':{//组件名
						template : '<h1>你好 Button组件</h1>' //组件的显示效果
					}
				}
			})
			
		</script>
	</body>
</html>

06-前端开发框架VUE技术应用总结

VUE 基础

MVVM设计

MVVM: 界面View+模型Model+视图模型ViewModel

VUE绑定原理设计

访问器属性+虚拟DOM树
变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素

虚拟DOM树分析

虚拟DOM树优点:
(1). 小: 只包含可能变化的元素。
(2). 遍历查找快
(3). 修改效率高: 只修改受影响的元素。
(4). 避免重复编码: 已封装DOM增删改查代码

VUE编程步骤实践

Vue功能3步:
(1). 先创建增强版的界面:
a. 整个界面必须包含在一个唯一的父元素下:
通常是

b. 可能变化的元素内容用{{自定义变量名}}标记
c. 触发事件的元素用@click="自定义处理函数名"标记
(2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域
(3). 在new Vue()对象内定义模型对象data和methods
a.界面所需的所有变量都放在data中
b.界面所需的所有事件处理函数都放在methods中

绑定与指令应用

(1). 如果元素的内容需要随变量自动变化: {undefined{}}
(2). 如果元素的属性值需要随变量自动变化: :
(3). 控制一个元素显示隐藏: v-show //使用display:none隐藏元素
(4). 控制两个元素二选一显示: v-if v-else //使用删除元素方式隐藏元素
(5). 多个元素多选一显示: v-if v-else-if v-else
(6). 只要反复生成多个相同结构的元素组成列表时: v-for :key=“唯一标识”
强调: 为什么必须加:key=“i”？给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。
(7). 只要绑定事件: @ $event
(8). 防止用户短暂看到{undefined{}}: v-cloak和v-text
(9). 只要绑定原始HTML代码片段内容: v-html
(10). 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once
优化: 减少虚拟DOM树中元素个数。
(11). 保护内容中的{undefined{}}不被编译: v-pre
(12). 今后只要想获得表单元素的值或状态: v-model

绑定样式分析(了解):

(1). 需要精确修改某一个css属性，就绑定style:
a. <元素 style=“固定样式” :style="{css属性:变量名, …}"

data:{
   变量名:css属性值
	... : ...
}

b. <元素 style=“固定样式” :style=“变量名”

data:{
   变量名:{
	css属性名: 属性值,
	... : ...
   }
  }

(2). 只要批量修改一个元素的多个css属性就绑定class
a. <元素 class=“固定class” :class="{class名:变量名, …}"

data:{
   变量名:true或false,
   ... : ...
}

b. <元素 class=“固定class” :class=“变量名”

data:{
      变量名:{
	    class名:true或false,
    ... : ...
   }
}

计算属性应用实践

今后只要根据其他变量的值动态计算出一个属性值就用计算属性:
<元素>{undefined{计算属性}}</元素>

new Vue({
  el:"#app",
  data:{...},
  methods:{...},
  computed:{
    计算属性名(){
      计算过程
      return 计算结果
    }
  }
})

生命周期函数应用

vue生命周期4个阶段 8个钩子函数
(1). 创建(create)

created(){ ... }
beforeMount(){ ... }

(2). 挂载(mount)

mounted(){ ... 经常在这里发送ajax请求 ... }
beforeUpdate(){ ... }

(3). 更新(update)

updated(){ ... }
beforeDestroy(){ ... }

(4). 销毁(destroy)

destroyed(){ ... }

Axios方式的Ajax请求

只要在vue中发送ajax请求，就用axios
axios.defaults.baseURL=“服务器端接口的公共基础地址部分”

Get请求

GET请求：

axios.get(
  "服务器端接口地址的相对路径",
  {
    params:{ 参数名: 参数值, ...  }
  }
).then(result=>{
  ... result.data...
})

Post请求

POST请求：

axios.post(
  "服务器端接口地址的相对路径",
  "参数名1=参数值1&参数名2=参数值2&..."
).then(result=>{
  ... result.data...
})

强调: 在vue内使用axios，then中必须用箭头函数，保持then内this与外部this一致，都指向当前new Vue()对象

VUE 组件化开发

组件设计

只要希望重用一块独立的功能区域就用组件:
(1). 定义组件
Vue.component(组件标签名,{undefined
template:HTML内容片段,
data(){ return { 变量 } },
//其余和new Vue()完全相同
})
(2). 在HTML中使用自定义组件
<组件标签名/>或双标记也行
(3). 原理: new Vue()扫描到自定义组件标签，
a.组件的template中的HTML内容代替页面中<组件标签>位置。
b. 并为这个小区域专门创建一个缩微版的vue类型对象。
1). 调用组件的data()函数为当前组件副本创建一个专属数据对象副本。
2). 引入组件对象中的methods等其他内容到当前组件对象副本中

基本步骤

a. 拿到页面先划分功能区域
1). 从上到下，按功能不同划分区域
2). 按是否重用划分
b. 为每个组件创建独立的.js文件，其中包含一个组件对象及其内容
c. 将所有组件引入唯一完整的html页面中，并在

中添加父组件标签。

运行分析

a. new Vue()扫描

，发现父组件标签，创建并替换父组件
b. 父组件扫描自己内部的template内容，创建并替换子组件

组件类型

a. 根组件: new Vue()
b. 全局组件: Vue.component(…)
c. 子组件: 3步
1). var 子组件对象名={undefined
内容必须符合组件的要求
}
子组件对象名必须是驼峰命名
2). 父组件对象中:{undefined
… …
components{ 子组件对象名, … ,… }
}
子组件对象名必须是驼峰命名
3). 父组件template中用<子组件标签名/>引入子组件内容
components会将子组件对象名的驼峰命名自动翻译为-分隔
所以, 使用子组件标签时，要用-分隔多个单词

组件间传参

a. 父组件给子组件
<子组件 :自定义属性名=“父组件变量”>
b. 子组件取:
props:[“自定义属性名”]
结果: 在子组件内，props中的"自定义属性名"与子组件自己data中的变量用法完全相同！

单页应用实践(SPA)

基本步骤

第一步：先创建唯一完整的HTML页面

1). 包含vue基本的页面结构

  <div id="app"> new Vue({el:"#app"})

2). 引入所有必要的文件和组件

vue-router.js, 其它页面或组件文件, router.js路由器对象所在文件

3).
中用为今后页面组件预留空位。
第二步：再为每个页面组件创建独立的文件。每个页面组件其实都是一个子组件
第三步：创建router.js文件，例如：

1）创建路由字典对象

 var routes=[
    {path:"/", component:首页组件对象名},
    {path:"/相对路径" , component: 其它页面组件对象名},
    {path:"*", component: 404页面组件对象 }
  ]

2). 创建路由器对象，并将路由字典对象转入路由器对象中

 var router=new VueRouter({ routes })

3). 将router对象加入到new Vue()中

new Vue({ el:"#app", router })

页头等全局组件：

a. 创建独立的文件保存页头组件的内容
b. 使用Vue.component(“my-header”,{ … })将页头创建为全局组件
c. 在唯一完整的HTML页面中引入页头组件文件
d. 使用页头组件标签: 2种:
1). 如果所有页面都有统一的页头:
就放在唯一完整的html页面中外部上方
2). 如果有的页面有页头，有的页面没有页头:
就只放在需要页头的组件中的template中

路由跳转

a. html中: 文本
b. js中: this.$router.push("/相对路径")

路由传参

a. 修改路由字典:

 {path:"/相对路径/:自定义参数名", component:页面组件对象, props:true}

b. 跳转时:

  <router-link to="/相对路径/参数值"
  或
  this.$router.push("/相对路径/参数值")

c. 下一个页面接:

 1). props:[ '自定义参数名' ]
 2). 可将"自定义参数名"用作绑定或程序中都行

安装vue脚手架

(1). 设置npm默认使用国内淘宝镜像仓库:

npm config set registry http://registry.npm.taobao.org
  备选: npm i -g cnpm --registry=http://registry.npm.taobao.org

(2). 安装可反复生成项目脚手架代码的工具:

npm  i   -g  @vue/cli
  备选: cnpm i -g @vue/cli

(3). 启动vue脚手架项目

npm run serve

(4). 打开浏览器，地址栏输入:

 http://localhost:8080

脚手架文件夹结构:

(1). 唯一完整的HTML页面: 一分为三:
a. public文件夹
1). 图片img文件夹放在public文件夹下
2). 第三方css的压缩版和第三方js的压缩版都放在public文件夹下
3). 唯一完整的HTML文件index.html中，head中引入第三方的css和js

b. src/App.vue
1). 下只包含公共的页头组件和
2).

1). import引入App.vue，router，axios，以及其他全局组件
2). 将全局组件对象转为真正的全局组件: Vue.component( “组件标签名”, 全局组件对象 )
3). 配置axios并放入原型对象中:
axios.defaults.baseURL=“服务器端基础路径”
Vue.prototype.axios=axios;

(2). 为每个页面创建.vue组件文件，都放在src/views文件夹下。每个.vue文件中:

a. 标签内，包含这个页面的HTML内容
b. 中的js内容，和前四天将的是完全一样的写法，绑定，指令，函数，生命周期，axios请求等都一样。前四天怎么用，这里就怎么用。

(3). 路由字典和路由器对象，在src/router/index.js文件中

a. 仅import首页组件对象，不要过早引入其它页面组件
b. 路由字典中首页组件: { path:"/", component:首页组件对象}
c. 其余页面组件都做成懒加载:
{undefined
path: ‘/相对路径’,
component: () => import(/* webpackChunkName: “组件名” */ ‘…/views/其它页面组件.vue’)
}

(4). 全局组件都放在src/components文件夹下，每个全局组件.vue文件中。

全局组件必须在main.js引入，并用Vue.component()转化,为真正的全局组件，才能在其它组件的HTML中使用。

(5). 运行时, 路由器router对象监视浏览器地址栏路径变化，

查找对应的页面组件内容，先代替App.vue中的，然后main.js再将包含要加载的页面内容的App.vue组件内容，替换到唯一完整的index.html中空

位置。

懒加载应用实践

异步延迟加载:

src/router/index.js
//不要import Details from “…/views/Details”
const routes=[
…
{
path:"/details/:lid",
component: () => import(
/* webpackChunkName: “details” */
‘…/views/Details.vue’
),
props:true
]

彻底懒加载:

项目根目录创建vue.config.js

module.exports={
  chainWebpack:config=>{
    config.plugins.delete("prefetch")
    //删除index.html开头的带有prefetch属性的link，不要异步下载暂时不需要的页面组件文件
  },
}

http-proxy方式跨域:

vue.config.js设置

module.exports={
  ... ,
  devServer: {
    proxy: {
      '/': {
        target: `服务器端接口地址公共基础路径`,
        changeOrigin: true
      }
    }
  }
}

main.js

axios.defaults.baseURL="服务器端公共基础路径"
(3).引用 this.axios.get(“/接口地址相对路径”).then(result=>{…})

避免组件间样式冲突

(1)方案1

<style scoped>

(2)方案2

<template>
   <组件父元素 class="组件名">
  </template>
  <style>
   .组件名>子元素选择器{ ... }
  </style>

watch+事件修饰符+防抖:
(1). 希望变量一变化就自动执行一项操作时:

data(){
     return { 变量: 值 }
  },
watch:{
    变量(){
        要执行的操作
}
}

(2). 事件修饰符:

@事件.13 按回车时才执行
@事件.stop 阻止冒泡
@事件.prevent 阻止默认行为

(3). 防抖:

data(){
  return {
    ... ,
    timer:null
  }
},
methods:{
  查找方法(){
    if(this.timer!=null){
      clearTimeout(this.timer)
    }
    this.timer=setTimeout(()=>{
      正式的查找操作
    },等待时间)
  }
}

插槽技术应用
(1). 只要多个组件拥有相同的结构，只是局部的内容不同，都可用插槽实现
(2). 如何:
a. 先额外创建一个带插槽的外壳组件,保存其它多个组件相同部分的HTML+CSS+JS。但是，外壳组件中将来可能变化的位置，用标记
b. 再定义其它使用外壳组件的组件:
1). 引入带插槽的外壳组件:

  import 外壳组件名 from "./外壳组件.vue"
  export default {
    components:{ 外壳组件名 },
      ... 
  }

2). 在其它组件中:

  <template>
    <外壳组件 :外壳组件所需属性="变量">
      <当前组件自有的个性化内容>
    </外壳组件>
  </template>

(3). 具名插槽:
a. 如果一个外壳组件中，多个部位将来都会被更换，就可用具名插槽
b. 如何:
1). 外壳组件中:

  <template>
    ...公共部分...
    <slot name="插槽名1"></slot>
    ...公共部分...
    <slot name="插槽名2"></slot>
    ...公共部分...
  <template>

2). 其它使用外壳组件的组件:

 <template>
    <外壳组件...>
      <template  #插槽名1>
        第一部分要更换的内容
      </template>
      ...
      <template #插槽名2>
        第二部分要更换的内容
      </template>
    </外壳组件>
  </template>

Vuex 数据管理
应用场景
今后只要多个组件都需要共用一批数据时，都可用vuex

构成分析(3部分)
state部分：

  state:{ //保存共用的变量 
      变量:初始值,
	  ... : ...
    }

mutations部分：

 mutations:{ //保存专门修改变量的方法 
	  set变量名(state, 新值){
		state.变量名=新值
	  }
	  ... 
	}

actions部分：

  actions:{ //保存专门先发送ajax请求，再修改变量的方法 

  方法名(context, 发给服务器的参数值){
    axios.get或post(
	  "接口地址",
	  发给服务器端的参数值
	).then(result=>{
	  ...
	  context.commit("mutations中某个方法名", 新值)
	  ...
	})
}
}

组件中使用state中的变量

a. import { mapState } from “vuex”
b. export default {undefined
computed:{undefined
…mapState([ “state中某变量名”, … ]),
其它计算属性
}
}
c. 中可用state中某变量名用于绑定和指令
d. js中可this. state中某变量名来读取变量值

组件中修改state中的变量值
a. import { mapMutations } from “vuex”
b. export default {undefined
methods:{undefined
…mapMutations ([ “Mutations中某方法名”, … ]),
其它方法
}
}
c. js中可用this. Mutations中某方法名(实参值)修改state中变量值

组件中先发ajax请求再修改state中变量值
a. import { mapActions } from “vuex”
b. export default {undefined
methods:{undefined
…mapActions ([ “Actions中某方法名”, … ]),
其它方法
}
}
c. js中可用this. Actions中某方法名(实参值)发送ajax请求并修改state中变量值。

TypeScript 基本语法
变量:
var或let或const 变量名:数据类型=值;
函数:
(1).定义：

function 函数名(形参:数据类型, …):返回值类型{undefined
… …
}

(2). 不确定参数个数:

a. 单个参数不确定有没有

function 函数名(形参1:数据类型, 形参2?:数据类型)...
或
function 函数名(形参1: 数据类型, 形参2:数据类型=默认值)...

b. 多个参数不确定有没有

function 函数名(形参1:数据类型, ...形参2:数据类型[])...

(3). 重载:
a. 先定义空的函数声明，列举所有重载的可能:

function 函数名():返回值类型;
function 函数名(形参1: 数据类型):返回值类型;
function 函数名(形参1: 数据类型, 形参2:数据类型):返回值类型;

b. 正式实现功能的函数:

 function 函数名(){
      根据arguments中的元素个数，决定具体执行何种逻辑
    }

class 新规定
(1). class 类型名{ //必须提前声明属性，才能使用

属性1: 数据类型=初始值
    属性2: 数据类型=初始值
    ...
    //构造函数必须定义数据类型
    constructor(形参1:数据类型, 形参2:数据类型,...){
		this.属性1=形参1;
        this.属性2=形参2;
        ...
    }
    /*方法定义...*/
  }

(2). 访问修饰符: 今后，只要想控制一个class中属性的使用范围时。

 class 父{
       public 公有属性:数据类型=值
       protected 受保护的属性:数据类型=值
       private 私有属性:数据类型=值
       父的函数(){
         以上三种属性都能用
       }
    }
    class 子 extends 父{
       子的函数(){
          只能用父的公有属性和父的受保护的属性
          不能用父的私有属性
       }
    }
    除父子class以外的程序区域： 
    只能用父class的对象的公有属性
    ```
(3). 接口: 保证开发人员按照要求实现类的成员
a. 先定义接口:

interface I接口名{
属性名:数据类型
…
方法名(形参:数据类型, …):返回值类型;
}

b. 定义class实现接口的要求:

class 类型名 implements I接口名{
属性名:数据类型=值
…
方法名(形参:数据类型, …):返回值类型{
方法实现
}
}

模块化开发:
(1). 模块中只抛出一个东西:

export default 一个东西
import 别名 from “相对路径”

(2). 模块中同时抛出多个东西:
``
  export { 多个东西用逗号分隔 }
  import { 想要的个别东西用逗号分隔 }  from  "相对路径"
  ``
### Vue3 新特性介绍
原理
绑定原理:ES6 Proxy代理对象+虚拟DOM树

### ES6 Proxy代理对象:

新生成的代理对象 = new Proxy(要保护或监视的原对象, {
//当有人试图获取数组中任何一个元素值时自动触发
get(当前对象, 属性名) {
console.log(有人试图读取arr对象的${属性名}成员)
return 当前对象[属性名];
},
//当有人试图修改数组中任何一个元素值时自动触发
set(当前对象, 属性名, 新值) {
console.log(有人试图修改arr对象的${属性名}成员)
当前对象[属性名] = 新值;
return true; //必须: 返回修改成功！
}
});

//今后，都使用新代理对象，代替使用原对象。但是用法上和使用普通对象完全一样！

main.ts 中实践
a. 默认:

createApp(App).use(store).use(router).mount(’#app’)``
b. 全局组件:

import 组件对象  from “组件文件相对路径”
var app= createApp(App);
app.component('组件标签名', 组件对象名)
app..use(store).use(router).mount('#app’)

c. 全局指令:

app.directive ("my-focus",{
	mounted(DOM元素){
			DOM操作
	}	
})

d. axios: //axios对象是单例模式，整个项目中只有一个axios对象，哪里使用都一样。
import axios from “axios”
axios.defaults.baseURL=”服务器端接口基础路径”
//单例模式，不用放到原型对象中，也能在任意组件内引用——Vue2也可以这样用。

页面/组件
a. 里和

import { defineComponent, ref, reactive, toRefs, watch, computed, onMounted } from 'vue’;
import axios  from “axios” //axios对象是单例模式，整个项目中只有一个axios对象，哪里使用都一样。
import 子组件对象   from “子组件相对路径”

export default defineComponent({
  components:{ 子组件对象 },
  directives:{
    “自定义指令名”:{
       mounted(DOM元素){
         DOM操作
       }
     }
  },
  setup(){ //
    const data=reactive({
      界面所需变量
    });
    //专门解构原始类型的变量
    let { 原始类型的变量, … } = toRefs(data);
	//专门解构引用类型的变量
    let {引用类型的变量, ...} = data;

    const methods={
      界面所需方法(){ … 使用data中变量，不用加this！但要加.value才能用 }
      计算属性：computed(()=>{ //vue3中没有过滤器了，计算属性兼顾过滤器职能
         //计算过程
         return 返回值
      })
    }

    watch(要监控的变量, ,(newVal, oldVal)=>{
		console.log(`变量变了，新值为${newVal}, 旧值为${oldVal}`)
		//变量变化时要执行的操作
	})

    //声明周期必须自己先import，再在setup内部调用！
    onMounted(){ //原mounted生命周期钩子函数
        //axios请求不用加this.
		axios.get(…).then(result=>{ … })
    }

	return {
		…toRefs(data.value),
        …methods
    }
  },
})

新声明周期钩子函数

 beforeCreate -> setup()
  created -> setup()
  beforeMount -> onBeforeMount
  mounted -> onMounted
  beforeUpdate -> onBeforeUpdate
  updated -> onUpdated
  beforeDestroy -> onBeforeUnmount
  destroyed -> onUnmounted

Cindy的雨伞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习

VUE 简介什么是VUE?VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。什么场景使用VUE？绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如: 美团，饿了么，淘宝，知乎，大众点评，微博…官方js文件下载cn.vuejs.org业务及代码实现构建HTML页面，呈现如下效果，并在图中点击加，减按钮时实现中间数字的变化（要求基于vue技术进行实现）。第一步：定义HTML页面并引入vue.js文件。<!D
复制链接

扫一扫