Part1-vue基本语法

一、Vue特点

总代来说，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>

    • 方式二：下载和引入

    // 开发环境 https://vuejs.org/js/vue.js
// 生产环境 https://vuejs.org/js/vue.min.js

    • 方式三：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. 先看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"
	}
}

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>

4、双向绑定案例

需求：输入框输入数据，会显示到 span 元素上，分别通过 js 和 vue 实现

<!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>

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>

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）

四、模板语法（掌握）

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>

注意：

这里有同学会想，我是否随便写个名为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>

五、作业

请参考网址：

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

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

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

上一页Vue2全家桶下一页Part2-常用指令

最后更新于