前言

在学习的时候,即使有做计划,有时候也会因为一些其他的干扰,陷入迷茫之中,断断续续的学习,所以总结一下学习vue的一些表层的东西,帮助自己在学习过程中更加明确每一步该怎么走,也分享给大家。

Vue简介

Vue.js是一款轻量级的以数据驱动的前端JS框架,其和jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示,而Vue通过操作数据来实现页面的更新与展示。

vue安装及配置 

首先下载node.js要求版本在8.9以上        官网:https://nodejs.org/zh-cn/

npm install -g @vue/cli
# OR
yarn global add @vue/cli

 

下载完可检查在windows任务命令行里输入node -v 

使用淘宝NPM镜像源下载比较快    命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli(全局安装vue-cli)    命令:cnpm install vue-cli -g

检查环境是否安装上:vue -V

你还可以用这个命令来检查其版本是否正确:

vue --version

升级

如需升级全局的 Vue CLI 包,请运行:

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli
项目依赖

创建vue项目:

在命令行里输入命令:vue init webpack vue_text(创建名字为‘vue_text’的文件夹)

 然后进入此文件夹:cd vue_text

 然后手动下载:cnpm install

最后运行程序:npm run dev        

运行之后会导出网址:http://localhost:8080

在网页上输入上面的网址即可

Vue特点


1.易上手:


       首先,Vue.js的学习曲线相对平缓,对于初学者来说比较容易上手。它的核心概念包括组件、数据双向绑定、模板语法等,这些概念都是基于实际开发需求而设计的,因此在实际开发中非常实用。

       Vue入门相对容易,课程从基本的Vue概念讲起,逐步引导我们了解和掌握Vue的核心特性,如组件、双向数据绑定、模板语法等。在学习过程中,我能够将这些理论知识运用到实际项目中,从而加深对Vue的理解。

2.响应式数据绑定:


       Vue 的响应式编程模型是一大亮点。通过数据劫持和发布订阅模式,我们可以轻松实现数据和视图的双向绑定。当数据发生变化时,视图也会自动更新,大大简化了开发过程。这种编程模型不仅提高了代码的可读性和可维护性,也使得团队协作更加高效。

3.生态系统完善:

       Vue生态系统完善,插件和库丰富。课程中介绍了许多常用的Vue插件和库,如vue-router、vuex、axios等,它们可以帮助我们快速扩展功能,提高开发效率。

4.组件化:


       Vue的组件化开发方式非常实用。课程中强调了组件的重要性,引导我们如何设计和实现组件。通过组件化开发,我们可以将应用程序拆分为一个个独立的模块,每个模块都可以独立开发和测试。这种开发方式不仅提高了代码的重用性和可维护性,也使得团队协作更加高效。
 

Vue.的优势


       1.首先,学习 Vue 课程使我更加深入地了解前端开发。在学习过程中,我不仅掌握了Vue的核心知识和技能,还了解了前端开发的流程和最佳实践。这些知识将对我的职业发展产生积极的影响。

       2.其次,Vue.js的响应式编程模型非常强大。它可以通过数据劫持和发布订阅模式来实现数据和视图的双向绑定,当数据发生变化时,视图也会自动更新。这种编程模型不仅简化了开发过程,也提高了代码的可维护性和可读性。

       3.在实践中,我发现在Vue.js 中构建单页应用程序变得非常容易。它提供了丰富的组件和指令,可以帮助我们快速构建出漂亮的界面。而且,Vue.js的生态系统也非常完善,我们可以轻松地使用各种插件和库来扩展功能。
 

Vue常用指令

在Vue项目的开发中,我们使用的最多的应该就属Vue的指令了。通过Vue提供的常用指令,我们可以淋漓尽致地发挥Vue数据驱动的强大功能。以下便是图中常用指令的简单介绍:

(1)v-text: 用于更新绑定元素中的内容,类似于jQuery的text()方法

(2)v-html: 用于更新绑定元素中的html内容,类似于jQuery的html()方法

(3)v-if: 用于根据表达式的值的真假条件渲染元素,如果上图P3为false则不会渲染P标签

(4)v-show: 用于根据表达式的值的真假条件显示隐藏元素,切换元素的 display CSS 属性

(5)v-for: 用于遍历数据渲染元素或模板,如图中P6为[1,2,3]则会渲染3个P标签,内容依次为1,2,3

(6)v-on: 用于在元素上绑定事件,图中在P标签上绑定了showP3的点击事件

除此之外还有许多Vue指令可以查看Vue2.0文档

组件安装

npm安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

我们要在打包文件打开终端,然后输入代码安装。 

cnd

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

引入 Element

你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入

在 main.js 中写入以下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。

我们不会的可以去 element官网

学习 

vue实例

在一个html文件中,我们直接可以通过script标签引入Vue.js,然后就可以在页面里写Vue.js代码了。上图中我们通过new Vue()构建了一个Vue的实例,在实例中,可以包含挂在元素(el),数据(data),模板(template),方法(methods)与生命周期钩子(created等)等选项。不同的实例选项拥有不同的功能,如:

(1)el表明我们的Vue需要操作哪一个元素下的区域,’#demo’表示操作id为demo的元素下区域。

(2)data表示Vue 实例的数据对象,data 的属性能够响应数据的变化。

(3)created表示实例生命周期中创建完成的那一步,当实例已经创建完成之后将调用其方法。

var vm = new vue({
   el:'id',
   data:{
   a:1,
   b:2
}
create:function(){
//this 指vm实例
   console.log('a is:'+this.a);
}
})

总结

通过使用Vue,我深刻体会到了它的简洁、灵活和高效。 Vue的渐进式特性使得它适用于不同规模和难度的项目,响应式数据绑定和组件化开发简化了开发流程,虚拟DOM的使用提高了性能,丰富的生态系统为开发者提供了更多便利。 希望我的这些心得体会能够对正在学习和使用Vue的开发者有所帮助。 学习是一个不断进步和成长的过程,它是我们提升自己、扩展知识和技能的重要途径。每个人在学习的过程中都会遇到困难和挑战,但只要我们保持积极的态度和坚定的决心,就能够克服这些障碍,并取得进步。

Logo

前往低代码交流专区

更多推荐