likes
comments
collection
share

VUE基础 : 传统编程与vue编程对比

作者站长头像
站长
· 阅读数 21

前言

在当今快速发展的互联网时代，前端技术的革新对于提升用户体验、优化网页性能及加速产品迭代具有不可估量的价值。其中，Vue.js作为一款现代化的JavaScript框架，凭借其独特的设计哲学与强大的功能特性，在前端开发领域占据了举足轻重的地位。今天开始我们将逐步了解运用vue基础，运用vue开发项目

框架和库

在JavaScript中，框架和库都是非常重要的组成部分，它们帮助开发者更高效地构建应用程序

  • 库是一系列集中特定功能的函数和工具，开发者按需调用以实现特定任务，提供灵活性和自定义性。

例子：jQuery Axios``Moment.js``Three.js``D3.js

  • 框架是为构建整个应用程序提供一套完整解决方案，包括结构、设计模式和最佳实践，引导开发者遵循框架的规则来组织代码。

例子： React.js Angular Vue.js

学习VUE框架

我们可通过访问Vue.js的官方文档页面，该框架作为一个自由开放的渐进式JavaScript框架，能详尽地指导我们如何高效地运用Vue进行开发

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

页面跳转

利用现代前端框架如Vue.js，实现页面跳转无需单独创建多个页面，避免了重复编写HTML的繁琐工作。通过组件化开发，可以轻松提取和复用代码，大大提高了开发效率。

例子：如果有如下一份数据

//页面1
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
     </ul>
//页面2
     <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
     </ul>

我要怎么实现将第一份数据更改为第二份数据？

一，常规方法

清除数据重新填入

1.清除

  • 使用 ul.removeChild(ul.firstChild) 清除现有所有li

2.添加

  • 通过for循环 循环添加新的li
  • 通过 innerHTML读取修改 li中的元素的内部HTML内容
  let data = ['A', 'B', 'C']
        const ul = document.querySelector('ul')

        // 清除现有所有<li>
        while (ul.firstChild) {
            ul.removeChild(ul.firstChild);
        }
        // 循环添加新的<li>
        for (let i = 0; i < data.length; i++) {
            let li = document.createElement('li')
            li.innerHTML = data[i]
            document.querySelector('ul').appendChild(li)
        }

超链接

  • 使用超链接跳转到第二个页面地址
 <a href="./old2.html">跳转</a>

二，通过CDN使用Vue

通过CDN引入VUE的源码

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  • 定义了一个名为list的Vue组件对象
  • 利用 template 模板描述组件的结构
  • 使用Vue.createApp()方法创建一个Vue应用实例，意味着整个Vue应用将使用list组件作为其根组件
  • 通过调用app.mount()方法，将创建好的Vue应用实例挂载到HTML文档中ID为app的元素上
  const list = {
            template: `
            <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
            </ul>
            `
        }

        const app = Vue.createApp(list)
        app.mount('#app')

什么是组件，根组件？什么是挂载？别急，随着深入的学习VUE你会很快知道的，我们这节课只需要掌握 如何通过CDN使用Vue。

改良后的代码：

  Vue.createApp({
            template: `
            <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
            </ul>
            `}).mount('#app')

小结

使用CDN加载Vue.js，然后利用Vue.createApp创建应用实例，在template中编写HTML模板结构，最后调用app.mount()将实例挂载到页面指定元素上，完成组件渲染与交互。

计数器

一，常规方法

  • 定义初始数字，加法减法
    <h2 class="count">0</h2>
    <button class="add">+1</button>
    <button class="minus">-1</button>
  • 拿到DOM结构
  • 声明一个变量counter并初始化为0
  • 将counter的值设置为count元素的innerHTML
  • 为加法减法添加事件监听器
        const count = document.querySelector('.count')
        const add = document.querySelector('.add')
        const minus = document.querySelector('.minus')
       
        let counter = 0
        count.innerHTML = counter
        
        add.addEventListener('click', () => {
            counter++
            count.innerHTML = counter
        })

        minus.addEventListener('click', () => {
            counter--
            count.innerHTML = counter
        })

二，通过CDN使用Vue

 <div id="app"></div>
  • 通过CDN使用Vue:借助 script 标签直接通过 CDN 来使用 Vue
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  • 创造vue实例对象并挂载
  • 在 template中描绘结构
  • 将结构中的变量放进{{}}中
  • 将需要返回的对象写入data函数中
  • 将需要使用的方法写入methods中
  • 通过 @click=''绑定，监听按钮的点击事件，并触发相应的方法
 Vue.createApp(
            {
                template: `
           <h2 class="count">{{counter}}</h2>
    <button @click='add' class="add">+1</button>
    <button @click='minus' class="minus">-1</button>
        `,
                data: function () {
                    return {
                        counter: 10
                    }
                },

                methods: {
                    add() {
                        this.counter++
                    },
                    minus() {
                        this.counter--
                    }
                }
            }).mount('#app')

当页面结构太复杂时，template可以放在html中，这使得结构更清晰

 <div id="app"></div>

    <template id="temp">
        <div>
            <h2 class="count">{{counter}}</h2>
            <button @click='add' class="add">+1</button>
            <button @click='minus' class="minus">-1</button>
        </div>
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
        Vue.createApp(
            {
                template: `#temp`,
                data: function () {
                    return {
                        counter: 10
                    }
                },
                methods: {
                    add() {
                        this.counter++
                    },
                    minus() {
                        this.counter--
                    }
                }
            }).mount('#app')

    </script>
</body>

总结

Vue易于上手，它的设计简洁明了，文档齐全，在页面布局，代码布局方面都颇具美观；在接触vue的第一课，我们将它与传统编程对比，意在让大家直观的感受vue编程便捷。在后续的学习中，我们将深入学习组件，vue的各种指令和生命周期钩子等等，帮助我们便捷的开发各种项目

拓展：库与框架

在JavaScript开发领域，库和框架是提升开发效率、增强代码质量和促进项目标准化的两大关键技术组件。

库(Libraries)

库是一系列精心设计的函数与工具的集合，旨在解决特定领域的技术问题或提供一组实用功能。开发者可以根据项目需求，灵活挑选并集成这些库到自己的代码中，以实现诸如DOM操作、数据处理、动画效果等特定功能。库的特点在于它们的低侵入性和高度的灵活性，让开发者保持对应用架构的控制。一些知名的JavaScript库包括：

  • jQuery：简化了HTML文档操作、事件处理、AJAX交互等。
  • Axios：基于Promise的HTTP库，便于进行网络请求。
  • Moment.js：简化日期和时间的处理。
  • Three.js：用于创建和展示WebGL驱动的3D图形。
  • D3.js：专注于大数据可视化，提供丰富的图表生成和交互功能。

框架(Frameworks)

框架则提供了一个全面的开发平台，旨在指导开发者如何构建和组织整个应用程序。它们不仅包含库的功能，还定义了应用的结构、组件间交互的方式以及最佳实践，帮助开发者遵循一定的设计模式和架构原则。使用框架意味着接受其设定的规则和约束，以换取更高的开发效率和一致的代码风格。几个典型的JavaScript框架有：

  • React.js：由Facebook维护，用于构建用户界面的库，常与其它库（如Redux）组合以形成更全面的框架解决方案。
  • Angular：Google推出的全功能框架，适用于构建动态Web应用，提供了强大多样的功能，包括双向数据绑定、依赖注入等。
  • Vue.js：一种渐进式的框架，易于上手，同时支持复杂的单页应用开发，以其灵活性和高效著称。

库和框架各有侧重，库倾向于提供单一或一系列特定功能，强调灵活性和轻量化；而框架则提供一套完整的开发解决方案，更加强调规范和结构性，适用于构建大规模或复杂度较高的应用程序。开发者在选择时应根据项目需求、团队熟悉度及长期维护的考量来决定。

转载自:https://juejin.cn/post/7387733638064816169
评论
请登录