cometang前端技术博客
cometang
2022-05-29
目录

vue基础详解

# vue 基础详解

  • vue项目搭建
  • .vue 单文件组件
  • mustach 表达式
  • 组件创建及使用
  • vue指令
  • methods 方法
  • filters 过滤器
  • computed 计算属性
  • watch 监听侦听器
  • vue-router vue 路由
  • vue 组件生命周期
  • 组件通信
  • slot 插槽
  • element UI 框架使用

# 前言

vuejs 是一个构建数据驱动的渐进式MVVM框架

数据驱动：不用操作dom（vue）

渐进式： 渐进式开发---模块的使用（在项目开发的过程之中不断的引入三方包完善项目的开发）

响应的数据绑定: 数据一旦发生改变，页面自动重新渲染（替代了 dom操作）

MVVM : model(数据) view(视图) ViewModel（数据和视图进行绑定）===双向绑定

优点：

  • 体积小 33k

  • 基于虚拟DOM 比较 不同的dom节点 直接更新的是 一部分不同的dom节点 性能高

  • 双向数据绑定 -节约渲染dom的代码

  • 生态丰富、学习成本低

vue 全家桶技术栈

vue（底层）  vue-cli(脚手架  vue+webpack)   vue-router(路由，管页面跳转) 
vuex(状态管理，跨页面传值)   axios(接口对接)
1
2

# 1.vue项目创建

# 1.1.直接引入

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
1

# 1.2.通过vue-cli 脚手架创建

npm install -g @vue/cli   #vue脚手架 全局安装
1

或

yarn global add @vue/cli
1
vue --version    #检查版本是否安装成功
1

# 1.3.vue create 项目名称

vue create 项目名称  #创建项目
1

手动选择配置--vue version ----babel ----css 预处理

img

vue 版本 配置 babel 配置 css预处理配置

img

启动项目

yarn serve
1

# 1.4.vue项目目录结构

img

# 1.5.vue 代码插件

- 代码高亮  vetur 
- 代码补全   Vue VSCode Snippets
1
2

# 2.单文件组件 .vue

一个 .vue 文件 就是一个 组件

一个页面可以是 一个vue文件组成，也可以是多个vue文件共同组成

组件特点：带有独立功能 的小模块 ，低耦合

组件的优点：可重用 可组合 易维护


<template>
  <!--   template  节点 有且只有一个 节点 div  -->
  <div>
    <div class="box">asdasdsad</div>
    <div>aaaa</div>
    asndjasbdjasbdjasda
  </div>
</template>


<script>
// 导出对象
export default {};
</script>


<style  lang="less">
.box {
  color: #f60;
  font-size: 50px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 3.data() 函数与mastach 语法

vue 中data函数 返回了一个数据对象给vue组件

在组件的html代码部分 可以通过 mastach 语法 {{}} 获得该数据

mastach 表达式语法：
{{ js表达式  }}
1
2
<template>
  <div>
    <!-- mustach 表达式  在vue文件中 html代码里面 获取 data的数据 -->
    <p >  姓名： {{ name }} </p>
    <p>年龄： {{ age }}</p>
    <p>爱好： {{ like[0] }} {{ like[1] }} {{ like[2] }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "张麻子",
      age: 40,
      like: ["吃饭", "睡觉", "打豆豆"],
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 4.vue 中的js代码配置项


<script>
export defalut {
    //数据
	data(){
		return {}
	},
    //组件   
    components:{
        
    },    
	//方法
    methods:{

	},
    //计算属性
    computed:{
        
    },
    //监听
    watch:{
        
    },
    //过滤器
    filters:{
            
    },
    //组件生命周期钩子函数-八个    

}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 5.组件的创建和注册 components

  • 创建组件 .vue文件
  • 父组件导入子组件
  • 注册组件
  • 使用组件

# 5.1.创建组件的要求

组件名： 大驼峰   #约定
1

# 5.2.父组件导入子组件

import  子组件名  from '组件路径'
1

# 5.3.父组件注册子组件

components:{
       子组件名,
 },
1
2
3

# 5.4.组件的使用

<template>
	<div>
        <子组件名></子组件名>
    </div>
</template>
1
2
3
4
5

# 6.vue指令 14个

指令：vue中用来快速生成页面dom 的命令，从此之后告别 手动的渲染页面

/**指令语法**/
<标签 v-*="表达式"></标签>
1
2

v-text v-html

v-show v-if v-else-if v-else

v-for

v-on @

v-model

v-bind :

v-slot

v-pre

v-cloak

v-once

# 6.1.v-text 和 v-html 节点渲染

v-text : 给当前的dom节点 渲染 一段 静态文本 -----innerText

v-html:给当前的dom节点 渲染 一段 html代码的文本 ----innerHTML

区别：

mustach 更适合 零散的变量的字符拼接输出

v-text 更适合完整字符串的输出

v-html 更适合 带有html标签的字符串的输

 <!-- mustach {{}} -->
    <p>
      {{ str }}
    </p>
    指令v-text
    <p v-text="str"></p>
    指令： v-html
    <p v-html="str"></p>
1
2
3
4
5
6
7
8

# 6.2.v-show 和 v-if 显隐切换

v-show:对dom节点 的显示和隐藏

v-if:对节点增加和删除

区别：

v-show：控制css属性 display 对dom进行显示和隐藏

v-if: 对DOM节点进行增加 删除操作

  <span v-show="flag"> 女</span>
   <span v-show="flag">男</span>
	<hr>
	 <span v-if="flag"> 女</span>
     <span v-if="flag">男</span>
<script>
export defalut{
	data(){
		flag:true
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# 6.3.v-if 和 v-else 和 v-else-if 判断

v-if 满足条件 新增 dom

v-else-if 不满足 v-if的条件 但是 满足了 v-else-if ="条件" 新增dom

v-else 前面的条件都不满足 新增 dom

区别：效果等同于 js 的 if else 分支语法特点

  
    <p v-if="flag === 0">女</p>
    <p v-else-if="flag === 1">男</p>
    <p v-else-if="flag === 2">公公</p>
    <p v-else>其他</p>
<script>
  data() {
    return {
      flag: 4, //0：女  1 ：男  2：公公   3:其他
    };
  },
 </script>
1
2
3
4
5
6
7
8
9
10
11
12

# 6.4.v-for 循环

v-for:循环数据 并渲染页面 v-for 循环必须搭配 :key="表达式" 动态属性进行使用

注意：如果同一个组件中存在多个 v-for 循环 需要特别注意 key的值

整个组件中 key 都必须保持唯一性，目的： 虚拟DOM发生更新的时候 所有的dom节点可以快速比较

# item   每次循环获取的数据值   
# index   索引（数组：数字索引）  对象（属性名）
# key  每次循环生成的dom 都需要有不同的地方  key 是一个唯一值
<div v-for="(item,index) in 对象/数组/数字" :key="index"></div>
#循环数字
<div v-for="item in 数字" :key="item"></div>
<div v-for="(item,index) of 对象/数组/数字" :key="index"></div>
#循环数字
<div v-for="item of 数字" :key="item"></div>
1
2
3
4
5
6
7
8
9
<!-- 遍历数字 并渲染页面 -->
    <p v-for="item of data" :key="item">菜单{{ item }}</p>
    <!-- 数组的遍历 -->
    <p v-for="(item, index) in arr" :key="index">
      我是老唐叫来的兄弟：我的名字：{{ item }}
    </p>
    <!-- 对象的遍历 -->
    <p v-for="(item, index) in user" :key="index">
      ---- {{ index }}: {{ item }}-----
    </p>

   <!-- 循环对象数组 -->
    <p v-for="(item, index) in arr1" :key="'0sdsadd' + index">
      我的名字是： {{ item.name }} 我的年龄是：{{ item.age }}
    </p>
<script>
export default {
  data() {
    return {
      data: 50,
      arr: ["张三", "李四", "王麻子", "李四"],
       arr1: [
        { name: "张三", age: 100 },
        { name: "张三1", age: 101 },
      ],
      user: {
        name: "张三",
        age: 18,
        like: "吃饭，睡觉 打豆豆",
      },
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 6.5.v-on 事件绑定 与methods 对象

给dom绑定事件

v-on: 可以简写为 @

函数的调用可以 传递自定义参数 与 $event 事件对象

<div v-on:事件类型="事件处理函数()"> 点我呀 </div>
1
export defalut{
	methods:{
		事件执行函数(){
			console.log('点你了...')
		}toe
	}
}
1
2
3
4
5
6
7

# 6.6.v-model 输入框数据绑定

实现页面的输入框（input select check radio ）与 data中的数据 进行双向绑定

双向绑定：一旦页面中的输入框发生数据的变化，会导致 data中的数据 跟着变化

<input  v-model="表达式" >
data(){
	return{
		xxx:"123"
	}
}
1
2
3
4
5
6
 	<input type="text" v-model="name" />
    <select v-model="data">
      <option value="张三">张三</option>
      <option value="李四">李四</option>
      <option value="王麻子">王麻子</option>
    </select>
    <p>
      {{ data }}
    </p>
    <p>
      {{ name }}
    </p>
<script>
export default {
  data() {
    return {
      name: "唐世杰",
      data: "",
    };
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 6.7.v-bind 属性绑定

绑定、操作dom 属性

v-bind: 可简写为 :

<标签  v-bind:属性名="表达式">
<标签 :属性名="表达式">
1
2
<标签 id="xx" class="xxx"  src="xxx"  placeholder="xxx"  type="xxxx" style="xxx" width="xx" controls  checked="true"    > </标签>
1

案例：

<div :style="styleSet"></div>
 <button @click="editStyle()">修改样式</button>
<script>
export default {
  data() {
    return {
      styleSet: {
        width: "500px",
        height: "300px",
        background: "#f60",
      },
    };
  },
  methods: {
    changeColor() {
      this.className = "box1";
    },
    editStyle() {
        //一旦数据与属性进行了绑定  修改样式时 直接修改data中的数据 就可以达到直接修改样式的目的
      this.styleSet.width = "250px";
      this.styleSet.background = "green";
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 6.8.v-pre

将 {{}} 直接以静态文本方式 输出到页面

 <span v-pre>{{javascript 从入门到放弃}} </span>
1

# 6.9.v-cloak

等待页面的数据载入完成之后 再解析 mustach语法

 <span v-pre>{{name}} </span>
1

# 6.10.v-once 渲染一次

 <span v-once>{{name}} </span>
1

# 7.methods 方法

  • 事件处理函数
  • 页面当中的表达式 都可以使用 函数
  • 函数与函数之间 调用 this.函数名()
  • vue 声明周期 钩子函数 中调用 this.函数名()
<标签 @事件类型="事件执行函数()">
 
  <p>
        {{  函数名()  }}    //表达式 可以写成函数的调用
   <p>
       
<script>
 export default{
    methods:{
        事件执行函数(){

        },
        函数名(){

        },
        a(){

        },
        b(){
         this.a()  
        }   
     }   
 }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 8.filters 过滤器

将原来的数据 进行处理并返回一个新数据

语法和 methods中方法 一样，filters中的函数 必须要有返回值

filters中 获取不到data() 中的数据

<div> {{ 参数|过滤器名 }}   </div>
1
filters:{
		过滤器名(data){
			//处理数据
			return 新数据
		}
	}
1
2
3
4
5
6

# 9.computed 计算属性

作用： 将比较复杂的计算交给计算属性处理 ，而不是交给 methods处理

语法规则 和methods 一模一样 ,必须要有返回数据

调用时不能加小括号

依赖缓存：如果参与计算的基础数据 没有发生变化，不会进行再次调用，

第一次 计算完成之后，只要参与计算的数据没有发生变化，后面的反复调用，不会执行函数体，直接用之前的数据输出

使用场景：需要反复输出的 复杂的运算

 
<p v-for="item in 100" :key="item">
      {{ resData }}
  </p>
data(){
    return {
        num:100,
    }
}
 computed: {
    resData() {
       //根据依赖缓存特点 只执行了一次函数体
      console.log('执行代码一次....');
      return this.num % 21;
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 10.watch 侦听器 监听器

监听数据的变化，如果数据发生改变 触发对应的方法

export defalut {
	data(){
        return{
                num:111
      	}
	},
	watch:{
		需要监听变量(newVal,oldVal){
				//newVal: 改变之后的数据 新数据
                //oldVal:改变之前的数据  老数据
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
 <input type="text" v-model="obj.num" />
  <input type="text" v-model="num" /> 
   data() {
    return {
      num: "",
      obj: {
        num: "",
      },
    };
  },    
  watch: {
    num(newVal, oldVal) {
      //逻辑处理
       if (newVal % 2 === 1) {
        console.log("这是一个奇数");
      } else {
        console.log("这是一个偶数");
       }
    },

    "obj.num"(newVal, oldVal) {
      console.log(newVal);
      console.log(oldVal);
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
编辑 (opens new window)
上次更新: 2022/06/10, 01:34:10
类的继承
vue组件与路由

← vue组件与路由→

最近更新
01
go语言基础
07-13
02
《react上手教程》- 基础语法
07-13
03
redux-redux toolkit-状态管理
03-18
更多文章>
Theme by Vdoing | Copyright © 2019-2023

cometang | 唐世杰 渝ICP备18015657号-2