精华内容
下载资源
问答
  • 详细讲解如何使用 Vue CLI 搭建前端项目以及项目结构分析。

    前言

    从这篇文章开始,就进入真正的实践了。

    在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue。利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 Vue 的特性的。这点在接下来的内容中我们可以慢慢感受。

    关于项目的构建其实类似的文章网上有很多,但我还是重新写了一下,一是为了确保项目能够运行成功,二是对几个细节作了解释,三是加入了使用 IDE 的构建方法。

    在动手操作之前,我希望大家已经清楚什么是 “前后端分离” ,什么是 “单页面应用”

    简单地说,前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互,而 单页面应用(single page web application,SPA),就是只有一张页面,并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

    附上 Vue 的官方教程:
    https://cn.vuejs.org/v2/guide/

    这是第一手的学习资料,本篇的实践内容虽然用不上,但是日后要经常查阅。

    一、安装 Vue CLI

    因为需要使用 npm 安装 Vue CLI,而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/en/,首页即可下载。
    在这里插入图片描述
    图中左边是长期支持版本,右边是当前版本,下载哪个都行,我一般选择长期支持版本。

    下载完成后运行安装包,一路下一步就行。然后在 cmd 中输入 node -v,检查是否安装成功。
    在这里插入图片描述
    如图,出现了版本号(根据下载时候的版本确定),说明已经安装成功了。同时,npm 包也已经安装成功,可以输入 npm -v 查看版本号
    在这里插入图片描述
    输入 npm -g install npm ,将 npm 更新至最新版本。
    在这里插入图片描述


    之后可以选择安装 cnpm,即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快,但是下载的包可能不是最新的。

    安装 cnpm 的命令为 :

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    完成后就可以使用 cnpm 替代 npm 了,我不太喜欢用 cnpm,喜欢用的小伙伴注意一点,cnpm 不要与 npm 混合使用,一个项目用 cnpm 就从头用到底,不要中途敲错命令,否则就会出现混乱。不过万一遇到这种情况也不用慌,把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了,只是比较浪费时间。


    之后,使用 npm install -g vue-cli 安装脚手架。
    在这里插入图片描述
    注意此种方式安装的是 2.x 版本的 Vue CLI,最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目,并加入了项目健康监控的内容,但使用新版本创建的项目依赖与这个教程不太相符,折腾起来比较麻烦。

    虽然我也想专门针对新的 CLI 和 Vue 3.0 重构一下教程,但想了想这是个无休止的工作,这个教程也不是为了讲前端框架的新特性,而且直到现在 Vue 3.0 也只是发布了初期试验版本,想必又是一堆依赖问题,所以就不折腾了。

    二、构建前端项目

    1.通用方法

    直接使用命令行构建项目。首先,进入到我们的工作文件夹中,我在 D 盘新建了一个叫 workspace 的文件夹,大家可以自行选择位置。
    在这里插入图片描述
    然后执行命令 vue init webpack wj-vue,这里 webpack 是以 webpack 为模板指生成项目,还可以替换为 pwa、simple 等参数,这里不再赘述。 wj-vue 是我们的项目名称(White Jotter),大家也可以起别的名字。

    在程序执行的过程中会有一些提示,可以按照默认的设定一路回车下去,也可以按需修改,比如下图问我项目名称是不是 wj-vue,直接回车确认就行。

    在这里插入图片描述
    这里还会问是否安装 vue-router,一定要选是,也就是回车或按 Y,vue-router 是我们构建单页面应用的关键。
    在这里插入图片描述
    还有是否使用 es-lint,这玩意儿挺烦的,但为了代码质量先将就一下吧。

    接下来等待项目构建完成就 OK 了。
    在这里插入图片描述
    可以看到 workspace 目录下生成了项目文件夹 wj-vue,里面的结构如图
    在这里插入图片描述
    接下来,进入到我们的项目文件夹里(cd D:\workspace\wj-vue),执行npm run dev
    在这里插入图片描述
    项目构建成功,这一步如果报错,可能是未能加载项目所需的依赖包,即 node_modules 里的内容,需要在该文件夹执行 npm install ,再执行 npm run dev

    访问 http://localhost:8080,查看网页 demo,大工告成!
    在这里插入图片描述

    2.使用 IDE (IntelliJ IDEA)

    对于习惯使用 IDE 的同学,可以使用更直观的方式构建项目。以 IntelliJ IDEA 为例,点击 Create New Project
    在这里插入图片描述
    然后选择 Static Web -> Vue.js,点击 next,输入相关参数
    在这里插入图片描述
    此处可以选择 CLI 的版本
    在这里插入图片描述
    这里注意 Project location 需要输入到项目文件夹一级而不是 workspace。输入完成后点击 Next,等待 Vue CLI 初始化,然后在可视化界面上确认项目信息,修改或 Next 即可。IDEA 构建出的 Vue 项目是不含 node_modules 的,所以要先调出终端,执行 npm install
    在这里插入图片描述
    运行完成后,输入 npm run dev 即可。
    在这里插入图片描述
    另外 IDE 嘛,总是在 UI 上下了很多功夫,我们还可以在 package.json 文件上点击右键,选择 show npm scripts
    在这里插入图片描述
    然后就会出来 npm 命令窗口,想要执行哪个命令直接双击运行就可以了。
    在这里插入图片描述
    这些命令都是在 package.json 文件里预定义的。dev 和 start 是一样的,start 即是执行 npm run dev 命令
    在这里插入图片描述
    另外使用这种方法,可以激活 IDE 右上角的按钮,不过这些都不重要了。
    在这里插入图片描述
    上面的内容应该足够详细了,如果大家还是遇到了问题,可以在评论区反馈一下,我会第一时间解答。

    三、Vue 项目结构分析

    1.概览

    使用 CLI 构建出来的 Vue 项目结构是这个样子的
    在这里插入图片描述
    里面我们需要关注的内容如下图,重点需要关注的我用小红旗标了出来
    在这里插入图片描述
    其中我们最常修改的部分就是 components 文件夹了,几乎所有需要手动编写的代码都在其中。

    2.x 时代没有创建 view 这个目录,其实加上更加合理,现在我们姑且认为 Vue 把视图也当做“组件”的一部分,有助于初期的理解。

    接下来我们分析几个文件,目的是看看各个部分是怎么联系到一起的。

    2.index.html

    首页文件的初始代码如下:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>wj-vue</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    

    就是一个普普通通的 html 文件,让它不平凡的是 <div id="app"></div> ,下面有一行注释,构建的文件将会被自动注入,也就是说我们编写的其它的内容都将在这个 div 中展示。

    还有不普通的一点是,整个项目只有这一个 html 文件,所以这是一个 单页面应用,当我们打开这个应用,表面上可以有很多页面,实际上它们都只不过在一个 div 中。

    3.App.vue

    上面图上我把这个文件称为“根组件”,因为其它的组件又都包含在这个组件中。

    .vue 文件是一种自定义文件类型,在结构上类似 html,一个 .vue 文件即是一个 vue 组件。先看它的初始代码

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    

    大家可能注意到了,这里也有一句 <div id="app">,但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

    <script>标签里的内容即该组件的脚本,也就是 js 代码,export default 是 ES6 的语法,意思是将这个组件整体导出,之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。

    这个文件最关键的一点其实是第四行, <router-view/>,是一个容器,名字叫“路由视图”,意思是当前路由( URL)指向的内容将显示在这个容器中。也就是说,其它的组件即使拥有自己的路由(URL,需要在 router 文件夹的 index.js 文件里定义),也只不过表面上是一个单独的页面,实际上只是在根组件 App.vue 中。

    4.main.js

    前面我们说 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 没有关系,那么这两个文件是怎么建立联系的呢?让我们来看入口文件 main.js 的代码

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    

    这里插一嘴,这个 js 文件有的同学可能看着不顺眼,比如没有分号(;),因为是 ES6 的语法,不这么写反而会提示错误,虽说可以把 es-lint 改了或者关了,但我想熟悉一下新的规则也挺好。

    最上面 import 了几个模块,其中 vue 模块在 node_modules 中,App 即 App.vue 里定义的组件,router 即 router 文件夹里定义的路由。

    Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。

    在这个 js 文件中,我们创建了一个 Vue 对象(实例),el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标,router 代表该对象包含 Vue Router,并使用项目中定义的路由。components 表示该对象包含的 Vue 组件,template 是用一个字符串模板作为 Vue 实例的标识使用,类似于定义一个 html 标签。

    看完了以上三个文件,我想基本上就对前端项目的结构有所了解了。下一篇中我将用一个例子解释前后端分离的项目是如何联系起来的。

    查看系列文章目录:
    https://learner.blog.csdn.net/article/details/88925013

    上一篇:Vue + Spring Boot 项目实战(一):项目简介

    下一篇:Vue + Spring Boot 项目实战(三):前后端结合测试(登录页面开发)

    展开全文
  • python django框架+vue.js前后端分离

    万次阅读 2021-06-17 09:16:50
    本文用于学习django+vue.js实现web前后端分离协作开发。以一个添加和删除数据库书籍应用为实例。 django框架官方地址:https://www.djangoproject.com/ vue.js 框架官方地址:https://cn.vuejs.org/ 一、构建django...

    本文用于学习django+vue.js实现web前后端分离协作开发。以一个添加和删除数据库书籍应用为实例。

    django框架官方地址:https://www.djangoproject.com/

    vue.js 框架官方地址:https://cn.vuejs.org/

    一、构建django项目

    1. 创建工程文件和APP

    创建django_vue

    django-admin startproject django_vue
    

    进入django_vue,创建虚拟环境django_vue_env

    pip install virtualenv  #安装
    virtualenv django_vue_env
    

    激活虚拟环境,并安装django

    source ./django_vue_env/bin/activate
    

    安装 django、后面用到的django-cors-headers(跨域)、requests

    image-20210616220115778

    创建django app

    python manage.py startapp app
    

    我们的目录应该是这样的,appfront为vue项目会在后面创建。

    image-20210616220759863

    数据库我们使用默认sqlite3 即可,如需要变更可在setting.py中databases配置。

    image-20210616221036093

    添加app到INSTALLED_APPS

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'app'
    ]
    
    

    添加数据库模型,包含book_name和add_time用于记录书籍名称和添加时间。

    from django.db import models
    
    
    
    # Create your models here.
    class Book(models.Model):
        book_name = models.CharField(max_length=64)
        add_time = models.DateTimeField(auto_now_add=True)
    
        def __str__(self):
            return self.book_name
    
    

    做数据库迁移

    python manage.py makemigrations app
    python manage.py migrate
    

    编写views.py添加 show_books 和add_book两个api接口,通过JsonResponse将请求数据返回。

    from django.shortcuts import render
    
    # Create your views here.
    # 需要导入相关的模块
    from django.http import JsonResponse
    from django.views.decorators.http import require_http_methods
    from django.core import serializers
    import requests
    import json
    
    from .models import Book
    
    @require_http_methods(["GET"])
    def add_book(request):
        response = {}
        try:
            book = Book(book_name=request.GET.get('book_name'))
            book.save()
            response['msg'] = 'success'
            response['error_num'] = 0
        except  Exception as e:
            response['msg'] = str(e)
            response['error_num'] = 1
    
        return JsonResponse(response)
    
    @require_http_methods(["GET"])
    def show_books(request):
        response = {}
        try:
            books = Book.objects.filter()
            response['list']  = json.loads(serializers.serialize("json", books))
            response['msg'] = 'success'
            response['error_num'] = 0
        except  Exception as e:
            response['msg'] = str(e)
            response['error_num'] = 1
    
        return JsonResponse(response)
    
    

    在django_vue目录下urls.py添加api路由

    from django.contrib import admin
    from django.urls import path,include
    import app.urls
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('api/',include(app.urls)),
    ]
    

    在app目录下的urls.py添加视图路由

    from django.urls import path,re_path
    # 导入 myapp 应用的 views 文件
    from . import views
    
    urlpatterns = [
        re_path(r'add_book$', views.add_book),
        re_path(r'show_books$', views.show_books)
    ]
    
    

    重启服务,通过curl命令测试api可用性,如下接口正常。

     python manage.py runserver
     
     curl  http://127.0.0.1:8000/api/add_book?book_name=mylife
     
     {"msg": "success", "error_num": 0}
     
     curl  http://127.0.0.1:8000/api/show_books
     
     {"list": [ {"model": "app.book", "pk": 9, "fields": {"book_name": "mylife", "add_time": "2021-06-16T14:44:49.230Z"}}], "msg": "success", "error_num": 0}
    

    django后端大致构建完成,接下来做vue前端。


    一、构建vue项目

    安装vue初始化命令行工具vue-cli

    npm install -g vue-cli
    

    在django_vue目录下构建前端工程appfront,其中包含webpack工具。

    vue-init webpack appfront
    

    appfront目录如下

    image-20210616231328773

    安装渲染element-uivue-resource

    npm install element-ui
    npm install vue-resource
    

    调整src/main.js如下

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'
    import VueResource from 'vue-resource'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.config.productionTip = false
    Vue.use(ElementUI)
    Vue.use(VueResource)
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    

    src/component目录下新建Home.vue,包含showBooksaddBook两个方法用于api查询。

    <template>
      <div class="home">
        <el-row display="margin-top:10px">
            <el-input v-model="input" placeholder="请输入书名" style="display:inline-table; width: 30%; float:left"></el-input>
            <el-button type="primary" @click="addBook()" style="float:left; margin: 2px;">新增</el-button>
        </el-row>
        <el-row>
            <el-table :data="bookList" style="width: 100%" border>
              <el-table-column prop="id" label="编号" min-width="100">
                <template scope="scope"> {{ scope.row.pk }} </template>
              </el-table-column>
              <el-table-column prop="book_name" label="书名" min-width="100">
                <template scope="scope"> {{ scope.row.fields.book_name }} </template>
              </el-table-column>
              <el-table-column prop="add_time" label="添加时间" min-width="100">
                <template scope="scope"> {{ scope.row.fields.add_time }} </template>
              </el-table-column>
            </el-table>
        </el-row>
      </div>
    </template>
    
    <script>
    export default {
      name: 'home',
      data () {
        return {
          input: '',
          bookList: [],
        }
      },
      mounted: function() {
          this.showBooks()
      },
      methods: {
        addBook(){
          this.$http.get('http://139.198.114.148:8000/api/add_book?book_name=' + this.input)
            .then((response) => {
                var res = JSON.parse(response.bodyText)
                if (res.error_num == 0) {
                  this.showBooks()
                } else {
                  this.$message.error('新增书籍失败,请重试')
                  console.log(res['msg'])
                }
            })
        },
        showBooks(){
          this.$http.get('http://139.198.114.148:8000/api/show_books')
            .then((response) => {
                var res = JSON.parse(response.bodyText)
                console.log(res)
                if (res.error_num == 0) {
                  this.bookList = res['list']
                } else {
                  this.$message.error('查询书籍失败')
                  console.log(res['msg'])
                }
            })
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
    

    我们通过django-cors-headers处理跨域问题

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'app',
        'corsheaders',  //添加app
    ]
    

    添加中间件corsheaders.middleware.CorsMiddleware

    MIDDLEWARE = [
        'django.middleware.security.SecurityMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'django.middleware.common.CommonMiddleware',
        'django.middleware.csrf.CsrfViewMiddleware',
        'corsheaders.middleware.CorsMiddleware',
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ]
    

    在setting.py中配置跨域规则

    CORS_ALLOW_METHODS = (
        'DELETE',
        'GET',
        'OPTIONS',
        'PATCH',
        'POST',
        'PUT',
        'VIEW',
    )
      
    CORS_ALLOW_HEADERS = (
        'accept',
        'accept-encoding',
        'authorization',
        'content-type',
        'dnt',
        'origin',
        'user-agent',
        'x-csrftoken',
        'x-requested-with',
    )
    

    npm run dev启动node服务器

    image-20210616232921950

    通过npm run build打包前端到dist目录,用于后续django链接。


    三、django链接到前端

    调整django_vue目录下路由urls.py如下

    from django.contrib import admin
    from django.urls import path,include
    from django.views.generic import TemplateView  //导入通用视图
    import app.urls
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('api/',include(app.urls)),
        path('',TemplateView.as_view(template_name="index.html")), //路由到index.html
    ]
    
    

    在setting.py下添加静态文件地址

    STATICFILES_DIRS = [(os.path.join(BASE_DIR,'appfront/dist/static'))] 
    

    启动django 服务

    python manage.py runserver
    

    访问我们的django地址,此时django已链接到前端

    image-20210616234100999


    参考:https://github.com/rogerlh/django_with_vue

    NEXT

    • django-rest-framework 创建restful api
    • django wsgi的应用

    文章有不足的地方欢迎在评论区指出。

    欢迎收藏、点赞、提问。关注顶级饮水机管理员,除了管烧热水,有时还做点别的。

    展开全文
  • 本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下
  • 主要介绍了SpringBoot+Vue.js实现前后端分离的文件上传功能,需要的朋友可以参考下
  • 主要介绍了nginx+vue.js实现前后端分离的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue.js学习的第一天

    万次阅读 多人点赞 2021-04-13 16:01:28
    Vue.js学习的第一天 官网文档地址:传送门 一、Vue介绍: 1.Vue.js是什么? 作者:2014年2月,尤雨溪曾就职于Google Creative Labs和Meteor Development Group。 Vue (读音 /vjuː/,类似于 view) 是一套用于构建...

    Vue.js学习的第一天

    官网文档地址:传送门

    一、Vue介绍:

    1.Vue.js是什么?

    • 作者:2014年2月,尤雨溪曾就职于Google Creative Labs和Meteor Development Group。
    • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动

    2.Vue的特点:

    • 简单:在HTML,CSS,JavaScript基础上扩展。
    • 易用:渐进式框架,逐层应用,有丰富的第三方库。
    • 轻量:开发版大小约为300K,生产版大小约为30K。

    3.Vue的功能:

    • 解耦视图和数据
    • 可重复的组件
    • 数据绑定
    • 功能插件化
    • 虚拟DOM

    4.相比于Angular.js、React.js、为何Vue.js要技高一筹?

    • Angular.jsGoogle公司推出,Java后端程序员开发,将java的MVC模式复刻到前端,在前端设计增加了模块发开发概念
    • React.js:Facebook公式推出,提出了虚拟DOM概念,在内存中模拟DOM操作,提升了前端的渲染效率。
    • Vue.js:渐进式框架,综合了Angular.js的特点(模块化开发)和React(虚拟DOM)的优点。相对于Vue.js、Angular.js、React.js后两者学习成本较高。Vue.js基于MVVM设计模式,有着轻量级、数据绑定、响应式和组件化开发等特点。

    二、MVC和MVVM设计模式:

    1.MVC设计模式:

    MVC设计模式基本思想就将项目层次分解为Model(模型层)、View(视图层)、Controller(控制层)。

    • Model层:主要负责数据处理和运算
    • View层:主要负责显示数据和用户交互
    • Controller层:主要负责业务接受数据并控制视图层的跳转

    2.MVVM设计模式

    MVVM设计模式由Model(模型)、View(视图)、ViewModel(视图模型)三部分组成。是MVC模式的进阶版。

    MVVM设计模式和MVC模式一样,主要的目的是分离视图(View)和模型(Model),主要有以4个优点:

    • 低耦合:View可以独立于Model的变化和修改,一个VIew Model可以绑定到不同的View上,当View变化时Model可以不变化,当Model变化时View也可以不用变化。

    • 独立开发:开发人员更加专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于界面的设计。

    • 可重复性:可以把一些视图逻辑放在一个ViewModel中,让更多的View重用这段视图逻辑。

    • 可测试:现在测试人员可以针对ViewMdoel来写。

    三、 构建Vue开发环境

    方式一:用CND的方式搭建Vue.js开发环境:

    • <! – 引入CDN开发版 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    • <! – 引入CDN生产版 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    

    方式二:下载官网Vue.js文件,相对位置引入到项目中

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

    方式三: node .js命令行搭建Vue

    在项目文件夹下使用DOS命令

    npm install vue
    

    四、你好,Vue

    我的第一个Vue项目

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>我的第一个Vue项目</title>
    </head>
    <body>
        <div class="app">  
            <!-- 动态传值写法 {{}} -->
            {{message}}
        </div>
        <!-- 引入CDN开发版 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: '.app', //选择要传值的标签 
                data: {
                    message: 'Hello Vue!'//给标签内传值
                }
            })
        </script>
    </body>
    </html>
    
    展开全文
  • Tumo Blog 是一个简洁美观的博客系统,基于SpringBoot2.X + Vue.js。 是一款基于SpringBoot2.x构建的博客系统。 系统具有简洁、规范的代码设计,借助Vue.js、Thymeleaf构建传统单体架构项目;与此同时, 前后端分离...
  • Vue.js + Node.js + Mongodb + Express的前重新分离的个人博客 主要技术构成 前端主要技术栈为vue.jsvue-router,vue-resource,vuex 初期主要技术栈为node.js,mongodb,Express 博客功能 前台页面 canvas粒子...
  • Vue.js Vue.js的官方文档中是这样介绍它的:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。 简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式(Progressive),就是我们可以一步一步、有阶段性地来使用Vue....

    Vue.js

    Vue.js的官方文档中是这样介绍它的:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

    简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式(Progressive),就是我们可以一步一步、有阶段性地来使用Vue.js,不必一开始就使用所有的东西。

    使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能:

    • 解耦视图与数据
    • 可复用的组件
    • 前端路由
    • 状态管理
    • 虚拟DOM(Virtual DOM)

    MVVM模式

    与知名前端框架Angular、Ember等一样,Vue.js在设计上也使用MVVM(Model-View-View Model)模式。

    MVVM模式是由经典的软件架构MVC衍生来的。当View(视图层)变化时,会自动更新ViewModel(视图模型),反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。

    MVVM关系

    Vue.js与JavaScript和jQuery的不同之处

    在我们使用JavaScript或jQuery时,做的最多的事情就是操作DOM、绑定事件等这些。比如在制定DOM中插入一个元素,并给它绑定一个点击事件:

    if(showBtn){
    	var btn = $('<button>Click me</button>');
    	btn.on('click',function(){
    		console.log('Clicked!');
    	});
    	$('#app').append(btn);
    }
    

    这样的操作让我们的视图代码和业务逻辑紧耦合正在一起,随着功能不断增加,直接操作DOM会使得代码越来越难以维护。

    而Vue.js通过MVVM的模式拆分为视图与数据两部分,并将其分离。因此,我们只需要关心数据部分即可,DOM的事情Vue会帮我们自动搞定,例如上面的示例可以使用Vue.js改写为:

    <body>
        <div id="myApp">
            <button v-if="showBtn" v-on:click="handleClick">Click me</button>
        </div>
        <script>
            new Vue({
                el: '#myApp',
                data: {
                    showBtn: true
                },
                methods: {
                    handleClick: function(){
                        console.log('Clicked!');
                    }
                }
            });
        </script>
    </body>
    
    展开全文
  • 本资源下载直接可用 需要安装资源:python 3.6以上版本;django 最新版;node.js最新版;eli-ui最新 内容:前后端分离实战项目
  • vue文件默认格式如下html代码js代码css代码1、全部分离2、部分分离html内容或者@import url("./main.scss");@import "./main.scss";全局引入css在main.js中引入import './main.css'//注意'./'一定要加不然会报错js第...
  • 使用Flask和Vue.js实现前后端分离的全栈开发 在工作中,我使用Vue.js有一年多了,因为Vue.js文档完善,上手简单,打包方便等诸多优势,所以是目前很流行的前端框架,本项目也选择Vue.js作为前端框架。对于后端,这里...
  • vue 实现 js css html分离

    2020-10-19 23:49:34
    方法一 分别创建 index.js, index.css index.vue 代码 <template> .... </template> <script> //index.js 的相对路径 import index from "./index.js";// 名字可以任取 export default index;...
  • vue 路由分离

    2019-03-19 14:28:33
    1.新建router文件夹并且新建router.js 文件 以下为router.js的内容 //新建router文件夹并且新建router.js 文件 以下为router.js的内容 import Vue from 'Vue'; //1.引入路由 import VueRouter from 'vue-router...
  • 本篇文章主要介绍了利用 Vue.js 实现前后端分离的RBAC角色权限管理,非常具有实用价值,需要的朋友可以参考下
  • 首先来看官方文档 接下来我们进行操作,第一步已经添加完,来做第二步 打开index.vue ...在index.vue中 找到变量定义的位置 ...在methods() 中 增加一个翻译字典的...最后一把,把字典翻译那个方法,加到 el-tabl...
  • 下面小编就为大家带来一篇vue.js实现备忘录功能的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 一个Java程序猿眼中的前后端分离以及Vue.js入门

    千次阅读 多人点赞 2019-04-19 09:49:09
    松哥的书里边,其实有涉及到 Vue,但是并...但是最近总结小伙伴遇到的问题,感觉很多人对前后端分离开发还是两眼一抹黑,所以今天松哥想和大家聊一下前后端分离以及 Vue.js 的一点事,算是一个简单的入门科普吧。 ...
  • 主要介绍了前后端分离Vue.js入门,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用; 后端,springboot+spring+springmvc+spring serurity+mybatis+...
  • vue css js html 进行分离

    千次阅读 2018-05-14 20:48:38
    引入 引入 直接引入 <template> <div>This will be pre-compiled</div>...script src="./my-component.js"></script> <style src="./my-component.css"></sty...
  • 但是当vue.js出现后,前端几乎都是它(vue.js)的天下了,因为用了vue.js就回不去了,无法再回到beego的view里写tpl或html页面了,很受伤,没办法,vue.js实在太方便了,所谓双向绑定,这是神马概...
  • 原文地址: luoliangDSGA’s blog...SpringBoot+Vue.js前后端分离实现大文件分块上传 之前写过一篇SpringBoot+Vue前后端分离实现文件上传的博客,但是那篇博客主要针对的是小文件的上传,如果是大文件,一次性上传...
  • 使用Vue.js 3,前端框架通过体系结构增强,新的基本语言,新的渲染过程和分离的核心组件得到了增强。 本书涵盖以下激动人心的功能: 使用Vue.js 3的最新功能设计和开发大型Web应用程序 使用Vuetify,Buefy和Ant ...
  • nginx+vue.js实现前后端分离

    万次阅读 2017-07-18 23:02:04
    前后端分离原理及其功能的简单实现
  • 一、基础写法,没有懒...四、vue的异步组件+webpack的ensure()方法。(按需加载+js打包分离) webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,223
精华内容 13,689
关键字:

vue如何分离js方法

vue 订阅