# day01-vue基本语法

# 一、Vue简介(了解)

# 1、Vue是什么?

# (vue会比jquery) 通过选择器$().show() hide()

vue是不会直接操作DOM结构

jquery ajax

vue 并没有ajax (axios)

vue和jquery能不能在同一个项目里面共存?

  1. 真正项目不建议vue(操作数据)和jquery(DOM)一起使用
  2. 但是也有一些项目会使用这两个(vue、jquery)
  • Vue (读音 /vjuː/,类似于 view),不要读错。

  • Vue是一个渐进式的框架,什么是渐进式的呢?

    • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。
    • 或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。
    • 比如Core+Vue-router(前端路由)+Vuex(状态管理)+axios(网路请求库),也可以满足你各种各样的需求。
  • Vue有很多特点和Web开发中常见的高级功能

    • 解耦视图和数据(操作数据,不会直接操作DOM)
    • 可复用的组件
    • 前端路由技术
    • 状态管理
    • 虚拟DOM

这些特点,你不需要一个个去记住,我们在后面的学习和开发中都会慢慢体会到的,一些技术点我也会在后面进行讲解。

  • 学习Vuejs的前提?
    • 从零学习Vue开发,并不需要你具备其他类似于Angular、React,甚至是jQuery的经验。
    • 但是你需要具备一定的HTML、CSS、JavaScript基础。

# 1.2 小结

总代来说,vue有两个最重要的核心概念:

1、双向数据绑定

2、组件化开发

# 二、Vue 安装使用(理解)

# 1、项目里引入Vue的方式

使用一个框架,我们第一步要做什么呢?安装下载它

  • 安装Vue的方式有很多:

    • 方式一:直接CDN引入
    <!-- 开发环境版本,包含了有帮助的命令行警告 --> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    1
    2
    3
    4
    • 方式二:下载和引入
    // 开发环境 https://vuejs.org/js/vue.js
    // 生产环境 https://vuejs.org/js/vue.min.js
    
    1
    2
    • 方式三:NPM(包管理器)安装

      后续通过Vue-Cli4(vue官方的脚手架)方式引入,我们使用该方式

# 2、Vue体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
</body>
</html>
<script src="./lib/vue.js"></script>
<script>
    // 实例化
    new Vue({
        el: "#app",
        data: {
            msg: "你好,叩丁狼"
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

上面的代码做了什么事情?

  1. 先看js代码,会发现创建了一个Vue对象

  2. 创建Vue对象的时候,传入了一个options:{}

    2.1 {}中的el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里挂载到了id为app的元素上。

    2.2 {}中包含了data属性:该属性中通常会存储一些数据,好像上面例子中的aa就是直接定义出来的数据

我们已经知道了vue的基本模板为了便捷开发,我们在vscode添加vue的基本模板:

文件 -> 首选项 -> 用户代码片段,在输入框内输入html.json,用下面的代码覆盖掉原来的即可,下次新建html文件直接输入hv,然后按下回车即可

{
	"html:5": {
		"prefix": "hv",
		"body": [
			"<!DOCTYPE html>",
			"<html>",
			"<head>",
				"\t<meta charset=\"UTF-8\">",
				"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
				"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
				"\t<title></title>",
			"</head>",
			"<body>",
				"<div id=\"app\"></div>",
			"</body>",
			"</html>",
			"<script src=\"./lib/vue.js\"></script>",
			"<script>",
				"new Vue({",
					"\tel: \"#app\",",
					"\tdata: {",
						"\t",
					"\t}",
				"})",
			"</script>"
		],
		"description": "HTML5"
	}
}
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

# 3、数据的对象格式

<div id="app">
    <ul>
        <li>员工姓名:{{employee.name}}</li>
        <li>员工性别:{{employee.gender}}</li>
        <li>员工年龄:{{employee.age}}</li>
    </ul>
</div>

<script src="./lib/vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        employee: {
            name: "张三",
            gender: "男",
            age: 34
        }
    }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 4、双向绑定案例

需求:输入框输入数据,会显示到 span 元素上,分别通过 jsvue 实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
<div id="app">
    <input type="text" v-model="word">
    <h2>{{word}}</h2>
</div>
</body>
</html>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        word: "你好世界"
    }
})
</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

# 5、简易实现双向数据绑定

<input type="text" id="ipt" value="" oninput="changeData(this.value)">
<h2 id="title"></h2>

<script>
    var data = {};
    var title = document.getElementById("title");
    var ipt = document.getElementById("ipt");


  	// 定义对象属性
    Object.defineProperty(data, "msg", {
        get: function(){
            return "你好世界"
        },
        set: function(newValue){	// 自动捕获被修改后最新的值
            title.innerHTML = newValue;
          	txt.value = newValue;
        }
    })
  
  	// 最初的赋值
  	title.innerHTML = data.msg;
  	ipt.value = data.msg;
  
  	// 拿到input的数据,修改msg,当msg修改时,会触发set方法
    function changeData(value){
        data.msg = value;
    }
</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

# 6、双向数据绑定原理(重点)

# 1、vue 双向数据绑定原理

vue 双向数据绑定原理是通过 数据劫持 结合 发布订阅模式 的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;

# 2、核心

关于VUE双向数据绑定,其核心是 Object.defineProperty()方法;

# 3、介绍一下Object.defineProperty()方法

  • Object.defineProperty(obj, prop, descriptor) ,这个语法内有三个参数,分别为 obj (要定义其上属性的对象) prop (要定义或修改的属性) descriptor (具体的改变方法)
  • 简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法;

# 三、Vue中的MVVM(掌握)

  1. View层:

    视图层,在前端里就是我们常说的DOM层,主要作用是给用户展示各种信息;

  2. Model层:

    数据层(逻辑层),数据可能是我们自定义的数据,或者是从网络请求下来的数据;

  3. ViewModel层:

    视图模型层,是View层和Model层沟通的桥梁;一方面它实现了数据绑定(Data Binding),将Model的改变实时反应到View中;另一方面它实现了DOM监听,当DOM发生改变可以对应改变数据(Data)

1568691099973

# 四、模板语法(掌握)

# 1、插值操作

# 如何将data中的定义的数据,展示到HTML中呢?

前面已经通过Mustache语法(也就是双大括号),Mustache:胡子/胡须 {{}} 插值语法

# v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

# v-html

v-html不仅可以渲染数据,而且可以解析标签。

# v-text

v-text和{{}}表达式渲染数据,不解析标签。

# v-cloak

cloak:斗篷,遮挡物;浏览器可能会直接显示未编译的Mustache标签,所以v-cloak可以避免这个问题

例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-html="htmlTxt"></div>
    <div v-text="textTxt"></div>
    <div v-pre>{{123}}</div>
    <div v-cloak>hello {{textTxt}}</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      htmlTxt: '<p><strong>我是html</strong></p>',
      textTxt: 'Vue'
    }
  })
</script>
</html>
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

注意:

这里有同学会想,我是否随便写个名为aaa的属性,也可以实现v-cloak的效果呢?

肯定不是的,aaa可以实现隐藏,但要显示就不行了。这里需要大家自己动手尝试,就知道结果了。

# 2、显示隐藏操作

# v-show、v-if

v-if 根据条件渲染或者销毁元素,而v-show只会控制元素的显示和隐藏,相当于改变display值

# v-on

为元素绑定事件可以直接在元素上 v-on:click="方法名称()" ,或者简写成 @click="方法名称()"

对应的方法要写在Vue对象中的 methods 中,在指令中想要访问data属性中的数据,可以通过this加上自己定义的属性名即可,this.自定义属性名称

选项卡例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
<div id="app">
    <button v-on:click="btnFn(1)">1</button>
    <button v-on:click="btnFn(2)">2</button>
    <button v-on:click="btnFn(3)">3</button>
    <hr>
    <h2 v-show="status == 1">1</h2>
    <h2 v-show="status == 2">2</h2>
    <h2 v-show="status == 3">3</h2>
</div>
</body>
</html>
<script src="./lib/vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        status: 1
    },
    methods: {
        btnFn(val){
            this.status = val;
        }
    }
})
</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

# 五、作业

请参考网址:

https://www.sina.com.cn/

完成该网站图示区域的tab栏。

图片与文字请自己在网站上获取

image-20210309101321974

支付宝打赏 微信打赏
Last Updated: 12/16/2021, 5:56:10 PM