【一】Vue之介绍

【一】前端的发展史

【1】HTML、CSS、JavaScript：

最初，前端主要是通过编写HTML（超文本标记语言）来构建静态网页。随后引入CSS（层叠样式表），使得网页能够实现更丰富的样式和布局。
而JavaScript成为了前端开发中的核心语言，通过JavaScript可以实现网页的交互和动态效果。

【2】后端嵌入模板语法：

随着网页的复杂性增加，前端需要从后端获取数据并渲染到页面上。
在这个阶段，前端开发人员将模板语法嵌入到后端的服务器代码中，使得后端能够在处理请求时将数据渲染到页面上，再返回给前端。

【3】Ajax的出现：

Ajax（Asynchronous JavaScript and XML）的出现标志着前端开始采用异步请求数据的方式，实现了页面的局部刷新，使得前端能够在不刷新整个页面的情况下更新部分内容，提升了用户体验。

【3】出现前后端分离的雏形：

随着Ajax的普及，前端越来越多地负责处理用户界面和用户交互，而后端则负责数据的处理和接口的提供。
这使得前后端逐渐分离，前端开发人员开始专注于前端逻辑和用户体验。

【4】Angular框架的出现：

Angular框架的出现推动了前端工程化的概念的提出，将前端开发看作是一个工程项目。
Angular提供了一套完整的解决方案，包括组件化开发、模块化管理、依赖注入等，使得前端开发更加规范和高效。

【5】React、Vue框架的兴起：

当下最热门的两个前端框架分别是React和Vue。
- React由Facebook开发，受到了外国开发者的青睐；
- Vue由中国开发者创造，并在国内得到了广泛的应用和支持。
这两个框架都采用了组件化的思想，使得前端开发更易于维护和扩展。

【6】前端的大前端化：

随着移动应用和小程序的兴起，前端不仅仅局限于Web开发，还涉及到移动端和桌面端的开发。
这使得前端开发进一步演变为大前端开发，需要理解不同平台的特点和限制，并进行相应的适配和优化。

【7】一套代码运行在多个平台：

谷歌的Flutter框架采用Dart语言开发，具有跨平台的能力，可以在iOS、Android和PC端运行相同的代码。
这使得前端开发人员能够使用一套代码同时构建多个平台的应用。

【8】uni-app的出现：

基于Vue框架开发的uni-app进一步拓展了跨平台开发的范围。
uni-app使得开发人员可以使用相同的代码编写应用，并在10个不同平台上进行发布，包括iOS、Android、小程序等。

【9】前端框架一统天下的可能性：

随着前端框架的不断发展和优化，未来前端框架可能会趋向一体化和标准化。
这将使得前端开发更加简单和高效，同时也促进了前后端协作的更紧密和无缝衔接。

详细的发展史：

https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&utm_medium=social&utm_oi=41967790587904

【二】Vue介绍

【1】Vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
它的核心专注于处理视图层，使得开发人员能够更加专注于用户界面的构建和交互逻辑的实现。

（1）渐进式框架

Vue被设计为一个渐进式框架，这意味着你可以逐步采用Vue来构建应用。
你可以从一个小的部分开始，只使用Vue的部分功能，然后逐渐扩展到整个应用。

（2）相关链接

官网：https://cn.vuejs.org/
文档：https://cn.vuejs.org/v2/guide/

【2】Vue特点

（1）易用

通过 HTML、CSS、JavaScript构建应用

Vue使用简单，它使用HTML、CSS和JavaScript来构建应用程序。
Vue提供了直观的API和清晰的文档，使得开发人员可以迅速上手并构建出功能强大的用户界面。

（2）灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

Vue具有灵活性，可以在一个库和一整套框架之间自由伸缩。
你可以选择只使用Vue的核心功能，也可以根据需要逐渐添加插件或第三方库来扩展其功能。

（3）高效

20kB min+gzip 运行大小

超快虚拟 DOM

最省心的优化

Vue致力于提供高效的开发体验和运行性能。
它的运行大小经过压缩和gzip后仅为20kB，加载速度快。
此外，Vue使用虚拟DOM技术，通过最小化DOM操作来提高性能。
Vue还提供了一些优化工具和建议，帮助开发人员轻松地优化应用程序。

【3】M-V-VM思想

（1）MVVM介绍

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式
- Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中
- View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
- ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）

（2）MVVM的特性

低耦合：视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变
可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View重用这端视图的逻辑（以此减少代码冗余）
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
可测试：界面元素是比较难以测试的，而现在的测试可以针对ViewModel来编写

（3）MVVM的逻辑

【4】组件化开发、单页面开发

（1）组件化开发

类似于DTL中的include，每一个组件的内容都可以被替换和复用

（2）单页面开发

只需要1个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有1个index.html

【5】版本

1.X：使用得较少

2.X：普遍使用

3.X：刚出没多久，只有Beta版

Vue 1.x系列：
- 这是Vue.js最早的版本，适用于2014年至2016年的项目。
- Vue 1.x提供了基本的双向数据绑定和组件化功能，但在性能和开发体验上相对较弱。
- 由于有更好的选择，目前使用较少。
Vue 2.x系列：
- 这是Vue.js目前广泛使用的版本。
- Vue 2.x在性能、开发体验、稳定性和生态系统方面都有显著的改进。
- 它引入了虚拟DOM技术以提高渲染性能，支持服务端渲染和基于路由的懒加载，还提供了更丰富的工具和生态系统。
- 很多现有项目和新项目都选择使用Vue 2.x。
Vue 3.x系列：
- 这是Vue.js最新的版本，于2020年正式发布。
- Vue 3.x引入了一些重大改进和新特性，包括更快的渲染性能、更小的文件大小、更好的TypeScript支持等。
- 它还采用了Composition API，提供了更灵活和可组合的代码组织方式。
- 然而，由于Vue 3.x相对较新，目前还处于Beta版，可能在一些现有项目中不太稳定或兼容性方面存在一些问题。
- 所以，目前大部分项目仍然使用Vue 2.x版本。

【6】引入方式

（1）CDN的方式引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

（2）下载后导入

其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去

<script src="./js/vue.js"></script>

【7】补充

（1）解释型的语言是需要解释器的

js就是一门解释型语言，只不过js解释器被集成到了浏览器中

所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样

解释型语言是指在运行时由解释器逐行解释并执行代码。
- 相对而言，编译型语言是在运行之前将源代码转换为机器码，并由计算机直接执行。
- 因此，解释型语言需要解释器来执行代码，而编译型语言则需要编译器。
JavaScript（简称JS）是一门解释型语言，它的解释浏览器中。
- 因此，当我们在浏览器的控制台中输入命令时，实际上是通过浏览器中的JavaScript解释器逐行解释执行我们的代码。
- 类似地，在命令提示符（CMD）中输入"python"命令进入交互式环境也是一种解释性语言的特点。

（2）nodejs：一门后端语言

把chrome的v8引擎（解释器），安装到操作系统之上

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境。
- 它将Chrome V8引擎安装到操作系统之上，使得JavaScript可以在服务器端运行，因此常被称为后端语言。
传统上，JavaScript主要在浏览器中用于前端开发，但Node.js的出现改变了这一局面。
- 借助Node.js，开发者可以使用JavaScript来构建服务器端应用、命令行工具和其他类型的应用程序。
- Node.js提供了许多内置的模块和功能，使得开发服务器端应用程序更加方便和高效。
因此，通过安装Node.js，并利用其中提供的功能和模块，我们可以使用JavaScript编写并运行后端代码，从而完成服务器端的各种任务。
- 这使得JavaScript成为一门全栈语言，同时适用于前端和后端开发。

【三】Vue简单使用

【1】index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的简单使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    {{name}}
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            name: 'Hello World'
        }
    })
</script>
</html>

【2】双向数据绑定测试

vm._data.name='darker'    // 修改js中变量的值

$('#box').text('hahah')    // 修改HTML的div中的值

【四】模板语法

（1）插值语法

语法：
- {{ 变量、js语法、三目表达式 }}
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li>字符串：{{name}}</li>
        <li>数值：{{age}}</li>
        <li>数组：{{list1}}</li>
        <li>对象：{{obj1}}</li>
        <li>字符串：{{link1}}</li>
        <li>运算：{{10+20+30+40}}</li>
        <li>三目运算符：{{10>20?'是':'否'}}</li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            name: 'Darker', // 字符串
            age: 18, // 数值
            list1: [1,2,3,4],   // 数组
            obj1: {name: 'Darker', age: 19}, // 对象
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</html>

【五】指令

【1】文本指令

指令	释义
v-html	让HTML渲染成页面
v-text	标签内容显示js变量对应的值
v-show	放1个布尔值：为真标签就显示；为假标签就不显示
v-if	放1个布尔值：为真标签就显示；为假标签就不显示

v-show 与 v-if 的区别：

v-show：标签还在，只是不显示了（display: none）

v-if：直接操作DOM，删除/插入标签

如果需要频繁切换显示状态，并且初始化渲染较快的情况下，可以使用v-show。

在条件变化较少，且需要延迟渲染或减少初始渲染开销的情况下，可以使用v-if。

v-show 和 v-if 是Vue.js框架中两种常用的条件渲染指令，它们有以下区别：

显示方式：
- v-show：通过修改元素的CSS样式将其隐藏或显示。当条件为假时，元素的display属性会设置为none，元素仍然存在于DOM中，只是不可见。
- v-if：通过在DOM中删除或插入元素来隐藏或显示。当条件为假时，元素将从DOM中移除，当条件为真时，元素将被重新插入DOM中。
渲染开销：
- v-show：由于元素始终存在于DOM中，即使隐藏，因此切换显示/隐藏状态的开销较小。适用于需要频繁切换显示状态的场景。
- v-if：每次条件变化时，都会重新进行DOM操作，即删除或插入元素，因此切换的开销较大。适用于条件变化较少的场景。
初始化渲染：
- v-show：元素初始时会被渲染并正常显示，无论条件是否为真。
- v-if：元素初始时只会被渲染一次，仅当条件为真时才会显示。
编译时机：
- v-show：在编译时，所有带有v-show指令的元素都会被编译，并保留在DOM中。
- v-if：在编译时，带有v-if指令的元素只有在条件为真时才会被编译并插入到DOM中。

（1）v-html：让HTML渲染成页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li v-html="link1"></li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</html>

（2）v-text：标签内容显示js变量对应的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li v-text="link1"></li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
        }
    })
</script>
</html>

（3）v-show：显示/隐藏内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <h3>案例：控件通过按钮来控制显示和小事</h3>
    <button @click="handleClick()">点我</button>
    <br>
    <div v-show="isShow">isShow</div>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        methods: {
            handleClick(){
              this.isShow = !this.isShow    // this指的是当前的vue对象
            },
        }
    })
</script>
</html>

（4）v-if：显示/删除内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <h3>案例：控件通过按钮来控制显示和消失</h3>
    <button @click="handleClick()">点我</button>
    <br>
    <div v-if="isCreated">isCreated</div>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            isCreated:true
        },
        methods: {
            handleClick(){
              this.isCreated = !this.isCreated    // this指的是当前的vue对象
            },
        }
    })
</script>
</html>

【2】事件指令

指令	释义
v-on	触发事件（不推荐）
@	触发事件（推荐）
@[event]	触发event事件（可以是其他任意事件）

`v-on:click`可以缩写成`@click`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <button v-on:click="handleClick1">点我1</button>
    <!-- 下面这个用的多 -->
    <button @click="handleClick2">点我2</button>
    <!-- 如果不传参数，是没有区别的 -->
    <button @click="handleClick3()">点我3-1(带括号)</button>
    <!-- 如果要传参数 -->
    <button @click="handleClick3(1,22,333)">点我3-2(带括号+参数)</button>
    <!-- 传入事件 -->
    <button @click="handleClick4($event)">点我4(带事件参数)</button>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {

        },
        methods: {
            handleClick1() {
                console.log('点我1')
            },
            handleClick2() {
                console.log('点我2')
            },
            handleClick3(a,b,c) {
                console.log(a,b,c)
            },
            handleClick4(event) {
                console.log(event)
            },
        }
    })
</script>
</html>

【3】属性指令

指令	释义
v-bind	直接写js的变量或语法（不推荐）
:	直接写js的变量或语法（推荐）

`v-bind:class='js变量'`可以缩写成：`:class='js变量'`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        .red {
            color: rgba(255, 104, 104, 0.7);
        }
        .purple {
            color: rgba(104, 104, 255, 0.7);
        }
    </style>
</head>
<body>

<div id="box">
    <img v-bind:src="url" alt="" height="100">
    <br>
    <button @click="handleClick">点我变色</button>
    <div :class="isActive?'red':'purple'">
        <h1>我是一个div</h1>
    </div>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=205441424,1768829584&fm=26&gp=0.jpg',
            change: 'red',
            isActive: true
        },
        methods: {
            handleClick() {
                this.isActive = !this.isActive
            },
        }
    })
</script>
</html>

【六】Style 和 Class

【1】数据的绑定

语法：:属性名='js变量/js语法'

:class='js变量、字符串、js数组'

class：三目运算符、数组、对象

:style='js变量、字符串、js数组'

style：三目运算符、数组[{backgreound: 'red'},]、对象

（1）数据绑定语法：

:属性名='js变量/js语法'

（2）动态类绑定：

通过:class可以实现动态类的绑定，可以将一个js变量、字符串或者数组绑定到class属性上，根据绑定的值来条件性地添加或移除类。
示例代码：

<div :class="{'red': isRed, 'bold': isBold}">Hello World</div>

在上述代码中，可以通过在data中定义isRed和isBold变量，并根据需求进行修改，来动态地添加或移除red和bold类。

（3）动态样式绑定：

通过:style可以实现动态样式的绑定，可以将一个js变量、字符串或者数组绑定到style属性上，根据绑定的值来动态地设置元素的样式。
示例代码：

<div :style="{background: bgColor, color: textColor}">Hello World</div>

在上述代码中，可以通过在data中定义bgColor和textColor变量，并根据需求进行修改，来动态地设置元素的背景色和文字颜色。

（4）动态样式和类同时绑定：

当需要同时绑定动态样式和类时，可以将:style和:class同时应用在元素上。
示例代码：

<div :class="{'red': isRed, 'bold': isBold}" :style="{background: bgColor, color: textColor}">Hello World</div>

在上述代码中，同时绑定了动态的类和样式，可以根据需要动态地设置元素的类和样式。

（5）总结：

通过动态绑定class和style属性，可以根据数据的变化来实现元素的动态样式和类。
这为开发人员提供了更丰富、灵活的样式操作方式，使得界面的展示更加灵活多变。

【2】案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Style 和 Class</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        .red {
            color: rgba(255, 104, 104, 0.7);
        }
        .font-20 {
            font-size: 20px;
        }
        .be-bold {
            font-weight: bold;
        }
    </style>
</head>
<body>

<div id="box">
    <p>我是一个普通的p标签</p>
    <div :class="class_obj">
        <p>我是一个不普通的p标签1</p>
    </div>

    <button @click="handleClick">点击放大字体</button>
    <div :style="style_obj">
        <p>我是一个不普通的p标签2</p>
    </div>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            // class_obj: 'red',    // 放1个是字符串
            class_obj: ['red', 'font-20', 'be-bold'],    // 放2个是数组
            // class_obj: { red:true, be-bold:false},    // 也可以放对象
            // 数组.push()   从尾部添加1个元素
            // 数组.pop()    删除最后1个元素 并返回

            // 对象的写法
            style_obj: {
                color: 'red',
                fontSize: '20px'
            }
            // style_obj: [{background:'red'}, {fontSize:'20px'}]

        },
        methods: {
            handleClick(){
                this.style_obj['fontSize']='30px'
            }
        }

    })
</script>
</html>

【3】下方试验的命令

vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.push('be-bold')
vm.class_obj.push('red')
vm.class_obj.push('font-20')

posted @ 2023-08-06 22:12 Chimengmeng 阅读(70) 评论(0) 收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【一】Vue之介绍

【一】前端的发展史

【1】HTML、CSS、JavaScript：

【2】后端嵌入模板语法：

【3】Ajax的出现：

【3】出现前后端分离的雏形：

【4】Angular框架的出现：

【5】React、Vue框架的兴起：

【6】前端的大前端化：

【7】一套代码运行在多个平台：

【8】uni-app的出现：

【9】前端框架一统天下的可能性：

【二】Vue介绍

【1】Vue介绍

（1）渐进式框架

（2）相关链接

【2】Vue特点

（1）易用

（2）灵活

（3）高效

【3】M-V-VM思想

（1）MVVM介绍

（2）MVVM的特性

（3）MVVM的逻辑

【4】组件化开发、单页面开发

（1）组件化开发

（2）单页面开发

【5】版本

【6】引入方式

（1）CDN的方式引入

（2）下载后导入

【7】补充

（1）解释型的语言是需要解释器的

（2）nodejs：一门后端语言

【三】Vue简单使用

【1】index.html

【2】双向数据绑定测试

【四】模板语法

（1）插值语法

【五】指令

【1】文本指令

（1）v-html：让HTML渲染成页面

（2）v-text：标签内容显示js变量对应的值

（3）v-show：显示/隐藏内容

（4）v-if：显示/删除内容

【2】事件指令

v-on:click可以缩写成@click

【3】属性指令

v-bind:class='js变量'可以缩写成：:class='js变量'

【六】Style 和 Class

【1】数据的绑定

（1）数据绑定语法：

（2）动态类绑定：

（3）动态样式绑定：

（4）动态样式和类同时绑定：

（5）总结：

【2】案例

【3】下方试验的命令

公告

`v-on:click`可以缩写成`@click`

`v-bind:class='js变量'`可以缩写成：`:class='js变量'`