Vue.js简介和入门使用

Vue.js是一个由尤雨溪开发的渐进式JavaScript框架,它以数据驱动和组件化为核心。本文介绍了Vue.js的基础知识,包括MVVM思想、数据驱动的概念,以及Vue.js的安装和入门使用,如插值表达式、指令(v-for、v-if、v-bind等)、计算属性和组件化开发思想。
摘要由CSDN通过智能技术生成

vuejs 简介

  • Vue.js (vuejs.org)
  • 渐进式 JavaScript 框架
  • vuejs 是基于MVVM 思想的框架
  • vuejs 是以数据驱动为主的框架
  • vuejs 是以组件化进行开发的框架
  • vuejs 是国人尤雨溪(尤大大,尤小石)进行开发的。

什么是渐进式?(vuejs)破坏性小,上手简单

渐进式是相对于另外一种开发思想(侵入式)来说。
渐进式指的是在使用该产品做开发的时候,不需要完全的去重构之前的代码结构,可以非常方便将该产品集成到自身的项目中。

什么是侵入式?(react)脚手架(命令行)封装性明显

侵入式指的是如果要使用这种产品去维护之前的老项目的话,没办法直接引入使用,必须要破坏老项目的结构。
意思就是以前的老项目必须要进行重构,没办法直接使用这种侵入的产品。

什么是 MVVM 开发思想?

MVVM 开发思想是前端近几年借鉴后端的 MVC 的开发思想引进的。

  • M 是 Model 的简写,负责数据,在前端其表现形式就是一个js对象,一般称之为模型变量(数据)

  • V 是 View 的简写,负责数据的展示和收集,在前端的表现形式就是一个 DOM 区域。

  • VM 是 ViewModel 的简写,负责业务逻辑,在前端的表现形式就是当前的产品本身的一个实例对象,它以数据驱动作为指导思想,通过双向数据绑定进行数据的操作。

什么是 MVC 思想?

  • M Model的简写,翻译 模型,负责对数据的操作
  • V View的简写,翻译 视图(模板),负责页面的展示和数据的收集
  • C Controller的简写 翻译 控制器,负责业务逻辑代码

之前做后端的某个功能开发的时候,第一步定义路由(url-----》控制器的方法----》是否调用模型----》是否调用视图----》模板引擎–》响应(HTML页面(前后端不分离 ssr)、json格式(前后端分离 bsr)))

一般把 MVC 这种开发思想也称之为 分层思想。主要是为了便于后期的维护和新功能的扩展。(分而治之)

什么是数据驱动?

数据驱动是相较于传统 web 开发里面的 dom 操作来说的,以前的web开发某个功能的时候,我们都是先进行dom选取,然后在进行业务代码,最后做dom更新。但是其实对开发本身来说,我们不应该关系dom操作,我们只需要去关心我们数据的流向,现在的一些新的框架基于数据流向进行实现,对于开发来说,无须关心底层的dom实现,我们只需要提供数据,框架本身会给我们进行dom操作。这种思想就是数据驱动思想。这种开发思想在目前的各类前端框架,乃至小程序产品里面都有体现。

什么是组件化开发思想?

组件化指的是在开发过程中,把一些可以复用的代码高度的抽象、提取出来,封装成一个一个的代码块,然后在其他的地方进行复用。这种思想叫做组件化。有点类似于乐高积木。并且基于该思想衍生出来非常多的前端的组件化ui库(vantui elementUI mintUI antd iview uview…)

vuejs 入门使用

vuejs 是一个js库,也可以叫做一个框架。

vuejs 目前来说出现过3个版本

  • vuejs 1.x 过时(不使用)
  • vuejs 2.x 大规模使用中(√)
  • vuejs 3.x 新秀 (2020 9 正式发布)
    • 底层架构使用 Proxy api改写
    • 组合api
    • 函数式编程

安装

下载vue.js包

安装 — Vue.js (vuejs.org)

npm

npm install vue

CND

最新版本:

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

稳定版本:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

使用

入门使用

main.js
只要运行vue项目,main.js就会执行

index.html > mian.js>App.vue

html

<! --1引入vuejs框架-->
<script src="./lib/vue.js"></script>
<script type="text/javascript">
    // 需要编译器
const vm = new Vue({
     
    el: '#app',// eL是eLement的简写,属性值是一个选择器,选择vuejs,管理的dom区域
    /*data 代表是我们开发中的业务数据*/
	data: {
     
        title: 'hi vuejs!'
	}
})

</script>
<!--2.需要在html区域定义一个 vuejs管理的dom区域,在该区域内我们可以使用vuejs语法-->
<div id="app">
<! --这个区域会交给vuejs管理插值表达式指令-->
< ! --4.使用的vues语法-->
<!--双大括号一般我们称之为插值表达式”语法,里面可以写vue构造函数 data对象属性里面的哪些属性信息--><h1>{
  {title}}</h1>
</ div>

在这里插入图片描述

插值表达式
<div id="app">
    <!--这个区域会交给vuejs管理 插值表达式 指令-->
    <!--4. 使用的 vuejs语法-->
    <!--双大括号一般我们称之为 插值表达式 语法,里面可以写Vue构造函数 data对象属性里面的哪些属性信息-->
    <!-- 插值表达式里面到底可以写什么?-->
    <h1>{
  { title }}</h1>
    <hr>
    <h2>1. data对象里面的属性</h2>
    <p>{
  { version }}</p>
    <hr>
    <h2>2. 四则运算 </h2>
    <p>{
  { (1 + 1) + 3 * 4 - 4 }}</p>
    <p>{
  { 10 - 1 }}</p>
    <p>{
  { 2 * 3 }}</p>
    <p>{
  { 20 / 4 }}</p>
    <p>{
  { 20 % 3 }}</p>
    <hr>
    <h2>3. 比较运算</h2>
    <p>{
  { 10 > 9 }}</p>
    <p>{
  { 3 >= 9 }}</p>
    <hr>
    <h2>4. 逻辑运算</h2>
    <p>{
  { true && true }}</p>
    <p>{
  { true && false }}</p>
    <p>{
  { true || false }}</p>
    <p>{
  { !false }}</p>
    
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值