尚硅谷_前端技术_Vue全家桶

Vue 技术栈(全家桶)

尚硅谷前端研究院

第 1 章：Vue 核心

1.1Vue 简介

1. 官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

2. 介绍与描述

动态构建用户界面的**渐进式 **JavaScript 框架
作者: 尤雨溪

3. Vue 的特点

遵循 **MVVM **模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注UI, 也可以引入其它第三方库开发项目

4. 与其它 JS 框架的关联

借鉴Angular 的模板和数据绑定技术
借鉴React 的组件化和**虚拟DOM **技术

5. Vue 周边库

vue-cli: vue 脚手架
vue-resource
axios
vue-router: 路由
vuex: 状态管理
element-ui: 基于vue 的UI 组件库(PC 端) …

1.2 初识 Vue

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
root容器里的代码被称为【Vue模板】；
Vue实例和容器是一一对应的；
真实开发中只有一个Vue实例，并且会配合着组件一起使用；
{ {xxx}} 中的 xxx 要写js表达式，且xxx可以自动读取到data中的所有属性；
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式和 js代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’ : ‘b’
2.js代码(语句)
(1). if(){}
(2). for(){}

<body>
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h1>Hello，{
   
    
    {
   
    
    name.toUpperCase()}}</h1>
	</div>

	<script type="text/javascript" >
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//创建Vue实例
		new Vue({
   
    
    
      
      //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
			el:'#demo', 
      
      //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
			data:{
   
    
     
				name:'atguigu',
				address:'北京'
			}
		})
	</script>
</body>

1.3模板语法

1. 模板的理解

html 中包含了一些JS 语法代码，语法分为两种，分别为：

插值语法（双大括号表达式）{ { }}
指令（以v-开头）

2. 插值语法

功能: 用于解析标签体内容
语法:{ {xxx}}，xxxx 会作为js 表达式解析,且可以直接读取到data中的所有属性。

3. 指令语法

功能: 解析标签属性、解析标签体内容、绑定事件…
举例：v-bind:href = 'xxxx' 或简写为 :href="xxx" xxxx 会作为js 表达式被解析,且可以直接读取到data中的所有属性。
说明：Vue 中有很多的指令，此处只是用v-bind 举个例子

<body>
    <div class="root">
        <h1>插值语法</h1>
        <h2>你好，{
   
    
    {
   
    
    name}}</h2>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="school.url" v-bind:x="hello">点我去{
   
    
    {
   
    
    school.name}}学习</a>
        <!-- v-bind: 简写 : -->
        <a :href="school.url" :x="hello">点我去尚硅谷学习</a>
    </div>
    <script>
        Vue.config.productionTip = false
        const x = new Vue({
   
    
    
            el:'.root',
            data:{
   
    
    
                name:"vue",
                school:{
   
    
    
                    name: "尚硅谷",
                    url: "http://www.atguigu.com"
                },
                hello:"hi"
            }
        })
    </script>
</body>

4. el 与data 的两种写法

1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是window。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>你好，{
  
   
   {name}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//el的两种写法
		/* const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'尚硅谷'
			}
		})
		console.log(v)
    setTimeout(function(){
       X.$mount(".root")  //第二种写法
    },2000) */

		//data的两种写法
		new Vue({
     
      
      
			el:'#root',
      
			//data的第一种写法：对象式
			/* data:{
				name:'尚硅谷'
			} */

			//data的第二种写法：函数式
			data(){
     
      
      
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
     
      
      
					name:'尚硅谷'
				}
			}
		})
	</script>
</html>

1.4 数据绑定

1. 单向数据绑定

语法：v-bind:href ="xxx" 或简写为 :href
特点：数据只能从data 流向页面

2. 双向数据绑定

语法：v-mode:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从data 流向页面，还能从页面流向 data

备注：

双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<body>
  <div id="root">
    
    单向数据绑定：<input type="text" v-bind:value="name">
    <br>
    双向数据绑定：<input type="text" v-model:value="name">
    
    <!-- 简写 -->
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>
    
    <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
    <!-- <h2 v-model:x="name">你好啊</h2> -->
  </div>
  <script>
    new Vue({
     
      
      
      el: "#root",
      data: {
     
      
      
        name: "尚硅谷"
      }
    })
  </script>
</body>

1.5 MVVM 模型

M：模型(Model) ：对应data 中的数据
V：视图 (View ) ：模板代码
VM：视图模型(ViewModel) ： Vue 实例对象

data 中所有属性，最后都出现在了vm身上。
vm 身上所有属性及 vue 原型上所有属性，在Vue模板中都可以直接使用。

1.6 数据代理

1. Object.defineProperty

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
语法: Object.defineProperty(obj,prop,descriptor)
参数：

obj：要在其上定义属性的对象。
prop：要定义或修改的属性的名称。
descriptor：将被定义或修改的属性描述符。

设置项

value：属性值
enumerable:true 控制属性是否可以枚举，默认值是 false
writable:true 控制属性是否可以被修改，默认值是 false
configurable:true 控制属性是否可以被删除，默认值是 false

let number = 35
let person ={
   
    
    
  name:"孙悟空",
  gender:"男"
}

//通过该方法添加的属性，默认不可枚举，修改，删除
Object.defineProperty(person,"age",{
   
    
    
  // value:45,
  // enumerable:true,  //控制属性是否可以枚举，默认值是 false
  // writable:true,  //控制属性是否可以被修改，默认值是 false
  // configurable:true,  //控制属性是否可以被删除，默认值是 false
  
  //有人读取person 的age 属性时，get函数（getter）就会被调用，且返回值就是age的值
  //现用现取，如果number 的值改变 ，age 属性是改变后的值
  get(){
   
    
    
    console.log("有人读取了age属性")
    return number
  },
  //有人修改person 的age 属性时，set函数（setter）就会被调用，且会收到修改的具体值
  set(value){
   
    
    
    console.log("有人修改了age属性")
    number = value 
  }
})
console.log(person)
console.log(Object.keys(person))

2. 什么是数据代理？

通过一个对象代理对另一个对象中属性的操作（读/写）

let obj = {
   
    
    X : 100}
let obj2 = {
   
    
    Y :200}
Object.defineProperty(obj2,"X",{
   
    
    

  get(){
   
    
    
    //将obj 的 X 值设置到 obj2 的X值上
    return obj.X
  },
  set(value){
   
    
    
    //使obj的X值等于，修改后的obj2的 X 值 
    obj.X=value
  }
})

console.log(obj2.X) //100
obj2.X = 300
console.log(obj.X) //300

3. vue中的数据代理

1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

1.7 事件处理

1. 绑定监听

<div id="root">
  <h2>欢迎来到{
   
    
    {
   
    
    name}}学习</h2>
  <!-- <button v-on:click="showInfo">点我提示信息</button> -->
  <button @click="showInfo1">点我提示信息1（不传参）</button>
  <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  const vm = new Vue({
   
    
    
    el:'#root',
    data:{
   
    
    
      name:'尚硅谷',
    },
    methods:{
   
    
    
      showInfo1(event){
   
    
    
        // console.log(event.target.innerText)
        // console.log(this) //此处的this是vm
        alert('同学你好！')
      },
      showInfo2(event,number){
   
    
    
        console.log(event,number)
        // console.log(event.target.innerText)
        // console.log(this) //此处的this是vm
        alert('同学你好！！')
      }
    }
  })
</script>

2. 事件修饰符

.prevent : 阻止事件的默认行为 event.preventDefault() （常用）
.stop : 停止事件冒泡 event.stopPropagation() （常用）
.once：事件只触发一次（常用）；
.capture：使用事件的捕获模式；
.self：只有event.target是当前操作的元素时才触发事件；
.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

  <div id="root">
    <h2>欢迎来到{
  
   
   {name}}学习</h2>
    <!-- 阻止默认事件（常用） -->
    <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
    
    <!-- 阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
      <button @click.stop="showInfo">点我提示信息</button>
      
      <!-- 修饰符可以连续写 -->
      <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
    </div>
    
    <!-- 事件只触发一次（常用） -->
    <button @click.once="showInfo">点我提示信息</button>
    
    <!-- 使用事件的捕获模式 -->
    <div class="box1" @click.capture="showMsg(1)">
      div1
      <div class="box2" @click="showMsg(2)">
        div2
      </div>
    </div>
    
    <!-- 只有event.target是当前操作的元素时才触发事件； -->
    <div class="demo1" @click.self="showInfo">
      <button @click="showInfo">点我提示信息</button>
    </div>
    
    <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
    <ul @wheel.passive="demo" class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>

3. 按键修饰符

keycode : 操作的是某个keycode 值的键
keyName : 操作的某个按键名的键(少部分)

Vue中常用的按键别名：

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<div id="root">
  <h2>欢迎来到{
  
   
   {name}}学习</h2>
  <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
</div>

1.8 计算属性与监视

1. 计算属性-computed

定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
在computed 对象中定义计算属性。
在页面中使用{ {方法名}}来显示计算的结果。
get函数什么时候执行？

1).初次读取时会执行一次。
2).当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：

1).计算属性最终会出现在vm上，直接读取使用即可。
2).如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

	<body>
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{
  
   
   {fullName}}</span> <br/><br/>
		</div>
	</body>
	<script type="text/javascript">
		const vm = new Vue({
     
      
      
			el:'#root',
			data:{
     
      
      
				firstName:'迪丽',
				lastName:'热巴',
			},
			computed:{
     
      
      
				fullName:{
     
      
      
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
     
      
      
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
     
      
      
						console.log('set',value)
						const arr = value.split('-')  //将接收的值以 '-'拆分为数组
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>

简写（只需要读取，不需要修改的时候才可以这么写）

<script>
  let vm = new Vue({
   
    
    
    el:"#root",
    data:{
   
    
    
      firstName:"迪丽",
      lastName:"热巴"
    },
    computed:{
   
    
    
      fullName(){
   
    
    
        return this.firstName +'-'+ this.lastName
      }
    }
  })
</script>

2. 监视属性-watch

通过通过vm 对象的$watch()或watch 配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
immediate:true 初始化时让 handler 调用一下

body>
    <div id="root">
        <h1>今天天气很{
   
    
    {
   
    
    info}}</h1>
        <button @click="changeWeather">点击切换天气</button>
    </div>
    <script>
        const vm = new Vue({
   
    
    
            el:"#root",
            data:{
   
    
    
                isHot:true
            },
            computed:{
   
    
    
                info(){
   
    
    
                    return this.isHot? '炎热' :'寒冷'
                }
            },
            methods:{
   
    
    
                changeWeather(){
   
    
    
                    this.isHot =!this.isHot
                }
            },
            // 监视属性 写法一
            watch:{
   
    
    
                isHot:{
   
    
    
                    immediate:true, //初始化时让 handler 调用一下
                    // 当 isHot 发生改变时调用
                    handler(newValue,oldValue){
   
    
    
                        console.log("isHot被修改了", newValue,oldValue); // true false
                    }
                },
                info: {
   
    
    
                    // immediate: true, 
                    // 当 info 发生改变时调用
                    handler(newValue, oldValue) {
   
    
    
                        console.log("info被修改了", newValue, oldValue); // 炎热 寒冷
                    }
                } 
            }
        })

        // 监视属性 写法二
        // vm.$watch('isHot',{
   
    
    
        //     immediate: true, //初始化时让 handler 调用一下
        //     // 当 isHot 发生改变时调用
        //     handler(newValue, oldValue) {
   
    
    
        //         console.log("isHot被修改了", newValue, oldValue); // true false
        //     }
        // })
    </script>
</body>

1）深度监视 deep:true

(1).Vue中的watch默认不监测对象内部值的改变（一层）。<br />   
(2).配置`deep:true`可以监测对象内部值改变（多层）。<br />

备注：<br />   
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！<br />    
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<body>
    <div id="root">
        <h1>a : {
   
    
    {
   
    
    numbers.a}}</h1>
        <button @click="numbers.a++">点击a的值 + 1</button>
    </div>
    <script>
        const vm = new Vue({
   
    
    
            el:"#root",
            data:{
   
    
    
                numbers:{
   
    
    
                    a:1,
                    b:2
                }
            },
            watch:{
   
    
    
                //监视多级结构中某个属性的变化
                // "numbers.a":{
   
    
    
                //     handler(){
   
    
    
                //         console.log("a被改变了");
                //     }
                // }

                //监视多级结构中所有属性的变化
                numbers:{
   
    
    
                    deep:true, //开启深度监视
                    handler(){
   
    
    
                        console.log("numbers 被改变了");
                    }
                }
            }
        })
    </script>
</body>

2）监视简写属性

不需要以下配置时才可以简写
immediate: true 初始化时让 handler 调用一下
deep:true 深度监视

语法：
watch:{ 要监视属性(){} }
vm.$watch( '要监视属性',function(){} ) (不可以使用箭头函数，会改变this值)

const vm = new Vue({
   
    
    
  el:"#root",
  data:{
   
    
    
    numbers:{
   
    
    
      a:1,
      b:2
    }
  },
  //写法1 简写
  watch:{
   
    
    
    "numbers.a"(newValue,oldValue){
   
    
    
      console.log("a被改变了");
    }
  }
})

//写法2 简写
vm.$watch("numbers.a",function(newValue, oldValue){
   
    
    
  console.log("a被改变了", newValue, oldValue)
})

3）watch 对比 computed

computed和watch之间的区别：
1. computed能完成的功能，watch都可以完成。
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1. 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

<div id="root">
  姓: <input type="text" v-model="firstName"> <br><br>
  名: <input type="text" v-model="lastName"> <br><br>
  全名 : <h1>{
   
    
    {
   
    
    fullName}}</h1>
</div>
<script>
  Vue.config.productionTip = false
 const vm = new Vue({
   
    
    
  el:"#root",
  data:{
   
    
    
    firstName:"迪丽",
    lastName:"热巴",
    fullName:"迪丽-热巴"
  },
  // 计算属性 （不能开启异步任务计算属性）
  // computed:{
   
    
    
  //     fullName(){
   
    
    
  //         return this.firstName +'-'+ this.lastName
  //     }
  // },

  // 监视属性 （可以开启异步任务）
  watch:{
   
    
    
    firstName(value){
   
    
    
      setTimeout(()=>{
   
    
    
        this.fullName = value + '-' + this.lastName
      },1000)
    },
    lastName(value){
   
    
    
      this.fullName = this.firstName +'-'+value
    }
  }
})
</script>

1.9 class 与 style 绑定

1. 理解

在应用界面中, 某个(些)元素的样式是变化的
class/style 绑定就是专门用来实现动态样式效果的技术

2. class 样式绑定

:class='xxx' xxx 可以是字符串，对象，数组
表达式是字符串: 'classA'

字符串写法适用于：类名不确定，要动态获取。

    <style>
        .basic{
   
    
    
            width: 200px;
            height: 100px;
        }
        .normal{
   
    
    
            background-color: aquamarine;
        }
        .happy{
   
    
    
            background-color: red;
        }
        .sad{
   
    
    
            background-color: #f0f0ff;
        }
    </style>

<body>
    <div id="root">
        <div class="basic" :class="mood" @click="changeMood">{
   
    
    {
   
    
    name}}</div>
    </div>  
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
   
    
    
        el: "#root",
        data: {
   
    
    
            name: "迪丽热巴",
            mood: "normal"
        },
        methods: {
   
    
    
            changeMood() {
   
    
    
                const arr = ["happy", "sad", "normal"]
                this.mood = arr[Math.floor(Math.random() * 3)]
            }
        }
    })
</script>

表达式是对象: {classA:isA, classB: isB}

适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用

<body>
    <div id="root">
        <div class="basic" :class="classObj" @click="changeMood">{
   
    
    {
   
    
    name}}</div>
    </div>  
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
   
    
    
        el: "#root",
        data: {
   
    
    
            name: "迪丽热巴",
            classObj:{
   
    
    
                sad: false,
                red: false
            }
        },
        methods: {
   
    
    
            changeMood(){
   
    
    
                this.classObj.sad = !this.classObj.sad
            }
        },
    })
</script>

表达式是数组: [‘classA’, ‘classB’]

适用于：要绑定的样式个数不确定、名字也不确定

<body>
    <div id="root">
        <div class="basic" :class="classArr" @click="changeMood">{
   
    
    {
   
    
    name}}</div>
    </div>  
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
   
    
    
        el: "#root",
        data: {
   
    
    
            name: "迪丽热巴",
            classArr:["normal","happy","sad"],
        },
        methods: {
   
    
    
            changeMood(){
   
    
    
                this.classArr.push("red")
            }
        },
    })
</script>

3. style 样式绑定

:style="{ color: activeColor, fontSize: fontSize + 'px' }"

其中activeColor/fontSize 是data 属性

:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。

<body>
    <div id="root">
        //对象写法
        <div class="basic" :style