Hello,Vue.js!——开启 Vue 学习

简介: Vue (读音 /vju:/ ,类似于 view)。

Hello,Vue.js!——开启 Vue 学习


简单认识 Vuejs


  1. Vue (读音 /vju:/ ,类似于 view)。


  1. Vue是一个渐进式的框架,什么是渐进式的呢?
  • 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中,带来更丰富的交互体验。
  • 或者如果你希望将更多的业务逻辑使用 Vue 实现,那么 Vue 的核心库以及其生态系统。
  • 比如 Core+Vue-router+Vuex ,也可以满足你各种各样的需求。


  1. Vue 有很多特点和 Web 开发中常见的高级功能。
  • 解耦试图和数据。
  • 可复用的组件。
  • 前端路由技术。
  • 状态管理。
  • 虚拟 DOM 。


  1. 学习 Vue 的前提:
  • 从零学习 Vue 开发,不需要具备其他类似于 Angular 、 React , 甚至是 jQuery 的经验。
  • 但是一定要具备一定的 HTML 、 CSS 、 JavaScript 基础。
  • ES6 语法特别重要。


Vuejs 安装


Vue 安装方式有很多:


  1. 直接 CDN 引入:


  • 可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  1. 下载和引入
  • 开发环境
  • 生产环境


  1. NPM 安装
  • 后续通过 webpack 和 CLI 的使用,我们使用该方式。


Hellow Vuejs

<div id="app">
        <h2>{{message}}</h2>
        <h1>{{name}}</h1>
</div>
<div>{{message}}</div>
<script src="./vue源码/vue.js"></script>
<script>
    // let(变量)/const(常量)。
    // 编程范式:声明式编程。
    let app = new Vue({
        el: '#app', // 用于挂载要管理的元素。
        data: { //  定义数据。
            message: '你好啊,李银河!',
            name: 'coderwhy'
        },
    })
    // 原生 js 的做法(编程范式:命令式编程)。
    // 1. 创建div元素。
    // 2。 定义一个变量叫 message。
    // 3. 将 message 变量放在前面的 div 元素中显示。
    // 4. 修改 message 的数据:今天的天气不错!
    // 5. 将修改后的数据再次替换到 div 元素。
</script>
  1. 创建 Vue 对象的时候,传入了一些 options:{}


  • {} 中包含了 el 属性:该属性决定了这个 Vue 对象挂载到哪一个元素上,很明显,我们这是挂载到了 id 为 app 的元素上。


  • {} 中包含了 data 属性:该属性中通常会存储一些数据。
  1. 这些数据可以是我们直接定义出来的,比如像上面这样。
  2. 也可以是来自网络,从服务器加载的。


Vue 实例的作用范围是什么呢?


  • 挂载点选择的标签内部。是否可以使用其他的选择器?
  • 可以(建议使用 id 选择器)。是否可以设置其他的 DOM 元素呢?
  • 只支持双标签,但是也有例外,比如 html 标签和 body 标签。
相关文章
|
18天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
150 2
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
583 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
556 77
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
121 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
251 1
|
6月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
378 17