Vue基础用法-指令(一)

vue 简介

1. 什么是 vue

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。

1. 构建用户界面

   • 用 vue 往 html 页面中填充数据，非常的方便

2. 框架

   • 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
   • 要学习 vue，就是在学习 vue 框架中规定的用法！
   • vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库

2. vue 的特性

vue 框架的特性，主要体现在如下两方面：
① 数据驱动视图
② 双向数据绑定

2.1 数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：

好处：当页面数据发生变化时，页面会自动重新渲染！
注意：数据驱动视图是单向的数据绑定。

2.2 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源
中。示意图如下：
好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！


2.3 MVVM
MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，
它把每个 HTML 页面都拆分成了这三个部分，如图所示：

在 MVVM 概念中：
Model 表示当前页面渲染时所依赖的数据源。
View 表示当前页面所渲染的 DOM 结构。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。

2.4 MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。
当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

3. vue 的版本

当前，vue 共有 3 个大版本，其中：
2.x 版本的 vue 是目前企业级项目开发中的主流版本
3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x 版本的 vue 几乎被淘汰，不再建议学习与使用
总结：
3.x 版本的 vue 是未来企业级项目开发的趋势；
2.x 版本的 vue 在未来（1 ~ 2年内）会被逐渐淘汰；

vue 的基本使用

1. 基本使用步骤

① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）

 <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
	  <div id="app">{{ username }}</div>
	
	  <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
	  <script src="./lib/vue-2.6.12.js"></script>
	  <!-- 2. 创建 Vue 的实例对象 -->
	  <script>
	    // 创建 Vue 的实例对象
	    const vm = new Vue({
	      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
	      el: '#app',
	      // data 对象就是要渲染到页面上的数据
	      data: {
	        username: 'zhangsan'
	      }
	    })
	  </script>

2. 基本代码与 MVVM 的对应关系

vue 的调试工具

1. 安装 vue-devtools 调试工具

vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。
Chrome 浏览器在线安装 vue-devtools ：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
FireFox 浏览器在线安装 vue-devtools ：
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/.

2. 配置 Chrome 浏览器中的 vue-devtools

点击 Chrome 浏览器右上角的 按钮，选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选如下
的两个选项：

3. 使用 vue-devtools 调试 vue 页面

在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools
调试当前的页面。

vue 的指令与过滤器

1. 指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类：
① 内容渲染指令
② 属性绑定指令
③ 事件绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令
注意：指令是 vue 开发中最基础、最常用、最简单的知识点。

1.1 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：
⚫ v-text
⚫ {{ }}
⚫ v-html

v-text

用法示例：
注意：v-text 指令会覆盖元素内默认的值。

{{ }} 语法

vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达
式（英文名为：Mustache）。
注意：相对于 v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容。

v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，
则需要用到 v-html 这个指令：

<div id="app">
			<p v-text="username"></p>
			<p v-text="gender">性别</p>
			
			<hr />
			
			<p>姓名： {{username}}</p>
			<p>性别：{{gender}}</p>
			
			<hr >
			<div v-text="info"></div>
			<div>{{info}}</div>
			
			<div v-html="info"></div>
		</div>

		<script src="./lib/vue-2.6.12.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					username: 'zhangsan',
					gender: '女',
					info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习 vue.js</h4>'
				}
			})
		</script>

内容渲染指令总结

1. v-text 指令的缺点：会覆盖元素内部原有的内容！
2. {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
3. v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

1.2 属性绑定指令

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。用法示例如下：
vue-

属性绑定指令的简写形式

由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。

使用 Javascript 表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算，例如：

<!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
  <div id="app">
    <input type="text" :placeholder="tips">
    <hr>
    <!-- vue 规定 v-bind: 指令可以简写为 : -->
    <img :src="photo" alt="" style="width: 150px;">

    <hr>
    <div>1 + 2 的结果是：{{ 1 + 2 }}</div>
    <div>{{ tips }} 反转的结果是：{{ tips.split('').reverse().join('') }}</div>
    <div :title="'box' + index">这是一个 div</div>
  </div>

  <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
  <script src="./lib/vue-2.6.12.js"></script>
  <!-- 2. 创建 Vue 的实例对象 -->
  <script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
      el: '#app',
      // data 对象就是要渲染到页面上的数据
      data: {
        tips: '请输入用户名',
        photo: 'https://cn.vuejs.org/images/logo.svg',
        index: 3
      }
    })
  </script>