大笨钟5718

V1

2023/02/21阅读:45主题:极客黑

Vue学习笔记

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 都以模块来编写的, 那这个应用就是一个模块化的应用。
  • 组件化就是将一个页面拆分成一个个小的功能模块,每个功能模块完成属于自己这部分独立的功能,使得整个页面的管理和维护变得非常容易。当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

分类:

前端

标签:

前端

作者介绍

大笨钟5718
V1