持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天
1. 什么是 VUE
-
官方给出的概念：vue是一套用于构造用户界面的前端框架
-
框架
- 框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能!
- 要学习 VUE,就是在学习 vue 框架中规定的用法！
- vue 的指令、组件(是对UI结构的复用)、路由、Vuex、vue组件库
- 只要掌握上面三点,才有开发VUE项目的能力!
2. VUE 的特征
VUE 框架的特性,主要体现在如下两方面：
- 数据驱动视图
- 双向数据绑定
2.1 数据驱动视图
- 定义：数据的变化会导致驱动视图的更新
- 在使用了 vue 的页面中,vue 会监听数据的变化,从而自动重新渲染页面的结构。示意图如下:
- 好处：当页面数据发生变化时,页面会自动重新渲染！
- 注意：数据驱动视图是单向的数据绑定
2.2 双向绑定数据
- 在网页中, from 表单负责采集数据,Ajax负责提交数据
在填写表单时,双向数据绑定可以辅助开发者在不操作 DOM 的前提下,自动 把用户填写的内容同步到数据源中。示意图如下：
- 好处：开发者不在手动操作 DOM 元素,来获取表单元素最新的值！
2.3 MVVM
MVVM是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View和View和ViewModel,它把每个HTML页面都拆分成了这三个部分,如图所示
- 在 MVVM 概念中: Model表示当前页面渲染时所依赖的数据源 view表示当前页面所渲染的 DOM 结构 ViewModel表示 vue 的实例,它是MVVM的核心
3. VUE 的指令与过滤器
-
指令的概念 指令(Directvies) 是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构
-
VUE中的指令按照不同的用途可以分为如下6大类:
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
- 注意：指令是 vue 开发中最基础、最常用、最简单的知识点。
- 内容渲染指令 内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令
- v-text 指令会覆盖元素内默认的值
- 用法示例:
<!--把 username 对应的值, 渲染到第一个 p 标签中 -->
<p v-text="username"></p>
<!--把 username 对应的值, 渲染到第二个 p 标签中 -->
<!-- 注意：第二个 p 标签中,默认的文本 "性别" 会被 gender 的值覆盖掉 -->
<p v-text="gender">性别</p>
- {{ }} VUE 提供的 {{ }}语法,专门用来解决 v-text 会覆盖默认文本内容的问题。这种{{ }}语法的专业名称是插值表达式
- 用法示例:
<!-- 使用 {{ }} 插值表达式,将对应的值渲染到元素的内容节点中 -->
<!-- 同时保留元素自身的默认值 -->
<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>
- 注意：相对于 V-text 指令来说,插值表达式在开发者更常用一些!因为他不会覆盖元素中默认的文本内容
- v-html v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要用到 v-html 这个指令：
<!-- 假设 data 中定义了名为 discription 的数据,数据的值为包含 HTML 标签的字符串; -- >
<!-- '<h5 style="color:red;">我在黑马程序员学习 vue.js 课程</h5>' -->
<p v-html="discription"></p>
\
