526互联

VUE

发布时间 2023-05-31 19:02:27作者: YxinHaaa

一、Vue 程序初体验

学习源:动力节点老杜课程

1.1 下载并安装 vue.js

第一步：打开 Vue2 官网，点击下图所示的“起步”：

https://v2.cn.vuejs.org/

image-20230531090014401

第二步：继续点击下图所示的“安装”

image-20230531090101947

第三步：在“安装”页面向下滚动，直到看到下图所示位置：

image-20230531090139962

第五步：安装 Vue： 使用 script 标签引入 vue.js 文件。就像这样：

1.2 第一个 Vue 程序

第一个 Vue 程序如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="div_1"></div>
		<script>
			var vue1 = new Vue({
				template:"<h1>hello Vue</h1>"
			})
			vue1.$mount("#div_1")
		</script>
	</body>
</html>

效果

image-20230531090700565

对第一个程序进行解释说明：

  1. 当使用 script 引入 vue.js 之后，Vue 会被注册为一个全局变量。就像引入 jQuery 之后，jQuery 也会被注册为一 个全局变量一样。
  2. 我们必须 new 一个 Vue 实例，因为通过源码可以看到 this 的存在

image-20230531090845004

  1. Vue 的构造方法参数是一个 options 配置对象。配置对象中有大量 Vue 预定义的配置。每一个配置项都是 key:value 结构。一个 key:value 就是一个 Vue 的配置项。
  2. template 配置项：value 是一个模板字符串。在这里编写符合 Vue 语法规则的代码（Vue 有一套自己规定的语 法规则）。写在这里的字符串会被 Vue 编译器进行编译，将其转换成浏览器能够识别的 HTML 代码。template 称之为模板。
  3. Vue 实例的$mount 方法：这个方法完成挂载动作，将 Vue 实例挂载到指定位置。也就是说将 Vue 编译后的 HTML 代码渲染到页面的指定位置。注意：指定位置的元素被替换。
  4. ‘#app’的语法类似于 CSS 中的 id 选择器语法。表示将 Vue 实例挂载到 id=’app’的元素位置。当然，如果编写 原生 JS 也是可以的：vm.$mount(document.getElementById(‘app’))
  5. ‘#app’是 id 选择器，也可以使用其它选择器，例如类选择器：’.app’。类选择器可以匹配多个元素（位置）， 这个时候 Vue 只会选择第一个位置进行挂载（从上到下第一个）。

1.3 Vue 的 data 配置项

观察第一个 Vue 程序，你会发现要完成这种功能，我们完全没有必要使用 Vue，直接在 body 标签中编写以下代 码即可：

<!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>没必要使用 Vue</title>
 	</head>
 	<body>
 		<h1>Hello Vue!</h1>
	</body>
</html>

那我们为什么还要使用 Vue 呢？在 Vue 中有一个 data 配置项，它可以帮助我们动态的渲染页面。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="div_1"></div>
		<script>
            /*
            模板语句的数据来源:
                1.谁可以给模板语句提供数据支持呢? data选项.
                2.data选项的类型是什么? object  Function(对象或者函数)
                3.data配置项的专业叫法: Vue 实例的数据对象。(data实际上是给整个Vue实例提供数据来源的。)
                4，如果data是对象的话，对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
                5. data数据如何插入到模板语句当中?
               		 {{}} 这是Vue框架自己搞的一套语法，别的框架看不懂的，浏览器也是不能够识别的。
               		 Vue框架自己是能够看懂的。这种语法在Vue框架中被称为: 模板语法中的插值语法。(有的人把他叫做胡子语法。)					怎么用?
                		{{data的key}}
            */
			new Vue({
				template:"<h1>{{message}}</h1>",
				data:{
					message:'hello Vue!!'
				}
			}).$mount("#div_1")
		</script>
	</body>
</html>

运行结果如下：

image-20230531092035627

对以上程序进行解释说明：

  1. data 是 Vue 实例的数据对象。并且这个对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。
  2. {{message}}是 Vue 框架自己搞的一个语法，叫做插值语法（或者叫做胡子语法），可以从 data 中根据 key 来 获取 value，并且将 value 插入到对应的位置。
  3. data 可以是以下几种情况，但不限于这几种情况：
   data:{
   	name:'zs',
   	age:28
   }
    //取值：
   {{name}}
   {{age}}
   
   data:{
   	 user:{
   		name:'zs',
   		age:22
   	}
   }
   //取值：
   {{user.name}}
   {{user.age}}
   
   data:{
    colors:['red','green','blue']
   }
   //取值:
   {{colors[0]}}
   {{colors[1]}}
   {{colors[2]}}
  1. 以上程序执行原理：Vue 编译器对 template 进行编译，遇到胡子{{}}时从 data 中取数据，然后将取到的数据插 到对应的位置。生成一段 HTML 代码，最终将 HTML 渲染到挂载位置，呈现。
  2. 当 data 发生改变时，template 模板会被重新编译，重新渲染
   <!DOCTYPE html>
   <html>
   	<head>
   		<meta charset="utf-8" />
   		<title></title>
   		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   	</head>
   	<body>
   		<div id="div_1"></div>
   		<script>
   			new Vue({
   				template:`<h1>
   				{{name}}上映时间{{sTime}} 男角：{{lead.name}} 年龄：{{lead.age}}
   				女角：{{actors[0].name}} 年龄：{{actors[0].age}}
   				女角：{{actors[1].name}} 年龄：{{actors[1].age}} </h1>`,
   				data:{
   					name:'狂飙',
   					sTime:'2023年1月1日',
   					lead:{
   						name:'高启强',
   						age:'33'
   					},
   					actors:[
   						{
   							name:'高启兰',
   							age:25
   						},
   						{
   							name:'陈淑婷',
   							age:27
   						}
   					]
   				}
   			}).$mount("#div_1")
   		</script>
   	</body>
   </html>

image-20230531100422824

1.4 Vue 的 template 配置

(1) template 只能有一个根元素。 请看如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="div_1"></div>
		<script>
			new Vue({
				template:`<h1>{{name}}</h1><h1>上映时间<{{sTime}} </h1>`,
				data:{
					name:'狂飙',
					sTime:'2023年1月1日'
				}
			}).$mount("#div_1")
		</script>
	</body>
</html>

执行结果如下：image-20230531103908644

控制台错误信息：组件模板应该只能包括一个根元素。 所以如果使用 template 的话，根元素只能有一个。 代码修改如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="div_1"></div>
		<script>
			new Vue({
				template:'<div><h1>{{name}}</h1><h1>{{sTime}}</h1></div>',
				data:{
					name:'狂飙',
					sTime:'2023年1月1日'
				}
			}).$mount("#div_1")
		</script>
	</body>
</html>

运行结果如下：

image-20230531104106384

（2) template 编译后进行渲染时会将挂载位置的元素替换。

(3) template 后面的代码如果需要换行的话，建议将代码写到``符号当中，不建议使用 + 进行字符串的拼接。 代码修改如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="div_1"></div>
		<script>
			new Vue({
				template:`<div><h1>{{name}}</h1>
				<h1>{{sTime}}</h1></div>
				`,
				data:{
					name:'狂飙',
					sTime:'2023年1月1日'
				}
			}).$mount("#div_1")
		</script>
	</body>
</html>

运行结果如下：

image-20230531104321483

(4) template 配置项可以省略，将其直接编写到 HTML 代码当中。 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="div_1">
			<div>
				<h1>{{name}}</h1>
				<h1>{{sTime}}</h1>
			</div>
		</div>
		<script>
			new Vue({
				data: {
					name: '狂飙',
					sTime: '2023年1月1日'
				}
			}).$mount("#div_1")
		</script>
	</body>
</html>

运行结果如下：

image-20230531104501036

需要注意两点：

第一：这种方式不会产生像 template 那种的元素替换。

第二：虽然是直接写到 HTML 代码当中的，但以上程序中第 3~6 行已经不是 HTML 代码了，它是具有 Vue 语法 特色的模板语句。这段内容在 data 发生改变后都是要重新编译的。

(5) 将 Vue 实例挂载时，也可以不用$mount 方法，可以使用 Vue 的 el 配置项。 代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="div_1">
			<div>
				<h1>{{name}}</h1>
				<h1>{{sTime}}</h1>
			</div>
		</div>
		<script>
			new Vue({
				data: {
					name: '狂飙',
					sTime: '2023年1月1日'
				},
				el:"#div_1"
			})
		</script>
	</body>
</html>

执行结果如下：

image-20230531104705007

el 是 element 单词的缩写，翻译为“元素”，el 配置项主要是用来指定 Vue 实例关联的容器。也就是说 Vue 所管 理的容器是哪个。

1.5解决控制台提示信息

image-20230531111002418

提示当前开发环境：

  1. 引入文件为开发版js，引入生产版js即可解决
  2. 或者修改全局配置(有时有用)

Vue.config.produceionTip=false

  1. 在源码中搜索produceionTip设置为false（彻底解决）

提示404报错

image-20230531112833158

找不到图标错误

提示安装devtools

搜索极简插件 搜索vue devtools安装到浏览器

image-20230531130303984

二、Vue 核心技术

2.1 插值语法

主要研究：{{这里可以写什么}}
        1. 在data中声明的变量、函数等都可以。
        2. 常量都可以。
        3. 只要是合法的javascript表达式，都可以。
        4. 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 等。
            'Infinity,undefined,NaN,isFinite,isNaN,' 
            'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' 
            'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' 
            'require'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法之插值语法{{}}</title>
    <!-- 安装Vue -->
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 准备容器 -->
    <div id="app">
        <!-- 在data中声明的 -->
        <!-- 这里就可以看做在使用msg变量。 -->
        <h1>{{msg}}</h1>
        <h1>{{sayHello()}}</h1>
        <!-- <h1>{{i}}</h1> -->
        <!-- <h1>{{sum()}}</h1> -->

        <!-- 常量 -->
        <h1>{{100}}</h1>
        <h1>{{'hello vue!'}}</h1>
        <h1>{{3.14}}</h1>

        <!-- javascript表达式 -->
        <h1>{{1 + 1}}</h1>
        <h1>{{'hello' + 'vue'}}</h1>
        <h1>{{msg + 1}}</h1>
        <h1>{{'msg' + 1}}</h1>
        <h1>{{gender ? '男' : '女'}}</h1>
        <h1>{{number + 1}}</h1>
        <h1>{{'number' + 1}}</h1>
        <h1>{{msg.split('').reverse().join('')}}</h1>

        <!-- 错误的：不是表达式，这是语句。 -->
        <!-- <h1>{{var i = 100}}</h1> -->

        <!-- 在白名单里面的 -->
        <h1>{{Date}}</h1>
        <h1>{{Date.now()}}</h1>
        <h1>{{Math}}</h1>
        <h1>{{Math.ceil(3.14)}}</h1>

    </div>

    <!-- vue程序 -->
    <script>

        // 用户自定义的一个全局变量
        var i = 100
        // 用户自定义的一个全局函数
        function sum(){
            console.log('sum.....');
        }

        new Vue({
            el : '#app',
            data : {
                number : 1,
                gender : true,
                msg : 'abcdef',  // 为了方便沟通，以后我们把msg叫做变量。（这行代码就可以看做是变量的声明。）
                sayHello : function(){
                    console.log('hello vue!');
                }
            }
        })
    </script>
</body>
</html>

2.2 指令语法

Vue框架中所有指令的名字都以"v-"开始。

Vue框架中所有的指令都是以HTML标签的属性形式存在的，例如：

<span 指令是写在这里的></span>

注意：虽然指令是写在标签的属性位置上，但是这个指令需要让Vue框架进行编译，编译之后的内容浏览器是可以看懂的。

指令的语法规则：

<HTML标签 v-指令名:参数="表达式"></HTML标签>
表达式：之前在插值语法中{{这里可以写什么}},那么指令中的表达式就可以写什么。(可以访问data中的变量)
不是所有的指令都需要参数和表达式,例如：v-once
有的指令,不需要参数,需要表达式,例如：v-if="表达式"
有的指令,需要参数,需要表达式,例如：v-bind:参数="表达式"

2.2.1 v-once 指令

作用：只渲染元素一次，随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过，这可以用于优化更新性能。

2.2.2 v-if 指令

作用：表达式的执行结果需要是一个布尔类型的数据：true或者false

true: 这个指令所在的标签，会被渲染到浏览器当中。
false: 这个指令所在的标签，不会被渲染到浏览器当中。

2.2.3 v-band 指令

作用：可以让HTML标签的某个属性的值产生动态的效果.

语法：

<HTML标签 v-bind:参数="表达式"></HTML标签>

编译前：<HTML标签 v-bind:参数="表达式"></HTML标签>
编译后：<HTML标签 参数="表达式的执行结果"></HTML标签>

注意两项：

第一 :在编译的时候v-bind后面的"参数名"会被编译为HTML标签的"属性名"

第二 :表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化。