Vue学习笔记

Vue基础

Vue.js是web前端三大主流框架之一（其他两个分别为Angular，react）

1.理解Vue，以及Vue的作用

Vue是一个用于构建用户界面的渐进式脚本框架，用于构建用户界面的渐进式框架。
Vue可以构建既简单又复杂的单页面应用，为用户提供一个良好的交互体验。
Vue只关注视图层,简单易上手。

2.理解Vue中的MVVM

M指的是model（模型），对应data中的数据。
V指的是view(视图),一个展示用户界面的模板，可以简单的理解为HTML标签页面。
MV指的是ViewModel(视图模层)，它是Vue的实例对象，一个连接view和model的桥梁，负责把model对象封装成可以显示和接受输入的界面对象。

3.单向数据绑定与双向数据绑定，以及各自的优缺点

单项数据绑定：把Model数据绑定到View，当Model属性数据变更，View视图也会自动更新。

它在Vue中主要基于v-bind指令，通过该指令可以实现model数据和View视图进行单项数据绑定。

双向数据绑定：把Model数据和View视图进行关联绑定，无论是Model数据变更，还是View视图数据变化都会相互自动进行关联更新)。

它在Vue中主要基于v-model指令（双向），通过该指令可以实现model数据和View视图双向关联绑定。

需要注意的是：双向绑定一般应用在表单类元素上（如：input，select等）。

4. 理解SPA应用

spa应用就是单页面应用，通常在单个页面下进行内容切换，也就是我们所说的路由。

它的工作方式是：用户点击了页面的路由地址，从而导致URL地址栏上的Hash值发生变化，于是前端路由监听到了Hash地址的变化，最后前端路由就把当前的Hash地址相应的组件渲染到浏览器中

5.理解Vue组件以及它的组成部分

一个vue组件通常有三个部分组成，分别是:

template（主要负责组件的模板结构）
script（主要负责组件的脚本行为）
style（主要负责组件的样式）

其中，每个组件必须含有template模板结构，而script行为与style样式是可选的。

6.Vue中几种常见指令：

v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-show : 条件渲染 (动态控制节点是否显示和隐藏展示)
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）

v-if和v-show的图解说明区别。

v-if实例代码：

<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>v-if</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        请输入内容 <input type="text" v-model="id">
        <button>确认</button><br>
        <div v-if="id">
            <input type="text" v-model="id" style="font-size: 2.5rem;">
        </div>
    </div>
    <script>
        new Vue({
            el: "#demo",
            data: {
                id: '',
            },
            methods: {
            },
        })
    </script>
</body>
</html>

v-if输入前后对比：

v-if 就是条件判断，符合就加载DOM(对象模型)元素，不符合就不显示。
- v-if指令的作用：根据表达式的真假切换元素的显示状态
- v-if = "表达式"
- 本质是通过操纵dom元素来进行切换显示
- 表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除
v-show是条件隐藏，在页面初始化的时将DOM也初始化，将它所在的元素添加一个display属性为none，如果条件符合就显示。
- v-show指令的作用是：根据真假值切换元素的显示状态,是响应式的。
- 语法：v-show = " 表达式 "
- 原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏。
- 值为真(true)的时候元素显示，值为假(false)的时候元素隐藏。

v-show实例代码：

<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>v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="demo">
        请输入内容 <input type="text" v-model="id">
        <button>确认</button><br>
        <div v-show="id">
            <input type="text" v-model="id" style="font-size: 2.5rem;">
        </div>
    </div>
    <script>
        new Vue({
            el: "#demo",
            data: {
                id: '',
            },
            methods: {
            },
        })
    </script>
</body>
</html>

v-show输入前后对比：

7.理解Vue的模板语法

vue的模板语法有两大类：分别为插值语法和指令语法。

插值语法用于解析标签体的内容，写法为{{xxx}}“xxx”为js表达式，可以直接读取到Model模型中定义的data属性数据。

指令语法则用于解析标签（例如标签体内容，标签属性，绑定数据等）

8.理解模块化和组件化

模块化就是把单独的一个功能封装到一个模块（文件）中，从而提升开发效率，并且方便后期的维护）。当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
组件化就是将一个页面拆分成一个个小的功能模块，每个功能模块完成属于自己这部分独立的功能，使得整个页面的管理和维护变得非常容易。当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。