Vue.js和Vue脚手架

在下河南彭于晏

已于 2023-07-05 16:20:29 修改

阅读量256

点赞数

文章标签： vue.js javascript 前端

于 2023-04-24 16:36:20 首次发布

本文链接：https://blog.csdn.net/da_shuai_bi_a/article/details/130342756

版权

Vue

web三大框架之一。 vue 、 react、 angular

angular
react
vue 尤雨溪

使用vue开发web应用的编程方式

传统的DOM操作、Jquery操作的开发模式，如果需要更新DOM元素，则：

<div id="info">欢迎：<span id="s">张三</span></div>
$('#info').text('欢迎：李四')
$('#s').text('李四')

传统的写法，讲究的是通过选择器选出页面中符合要求的DOM元素，然后调用它的方法，修改它的属性。

Vue的写法

<div>欢迎：{{name}}</div>
new Vue({
    data: {
        name: '李四'
    }
})

Vue脚手架

`MVVM`架构

Vue框架的底层设计遵循MVVM架构。

Model层业务层

View层视图层

ViewModel层

MVVM架构思想是一种将应用程序分为三个部分的设计模式，即模型（Model）、视图（View）和视图模型（ViewModel）。其中，模型代表应用程序的数据和业务逻辑，视图代表用户界面，而视图模型则是连接模型和视图的桥梁，负责处理视图的展示逻辑和用户交互，并将用户的操作反馈到模型中。这种架构思想的优点在于，它能够将应用程序的不同部分分离开来，使得代码更加清晰、易于维护和扩展。在Vue.js中，采用了MVVM架构思想，将模型和视图通过双向数据绑定的方式进行连接，而视图模型则由Vue.js框架自动生成，从而使得开发者能够更加专注于业务逻辑的实现，而不必过多关注界面的细节。

基于脚手架环境开发vue项目

开发vue项目的模式有两种：

基于vue.js，在html中引入vue.js，让vue.js管理div#app元素。
基于脚手架环境：通过vue脚手架环境可以方便的创建一个通用的vue项目框架的模板，在此基础之上开发vue项目更加便捷。适合工程化开发。

安装脚手架

# 配置npm源 （国内npm镜像仓库地址）
npm config set registry https://registry.npmmirror.com 

# 安装vuecli
npm install -g @vue/cli

# 安装完毕后执行
vue -V

命令执行完毕后,若出现版本号,则下载成功

Vue文件的语法

在脚手架项目中，每一个vue文件称为一个vue组件。一个组件中封装了页面的局部内容（包括页面结构、元素的样式、事件功能等）。这样就需要研究一下.vue文件的语法，来搞定项目开发中页面功能的实现细节。

<template>
  <div>
    <h3>电影详情数据</h3>
  </div>
</template> 

<script>
  export default {
    data: {},
    methods: {}
  }
</script>

<style lang="scss" scoped>

</style>

template部分用于定义当前组件的页面结构。定义的这些页面结构最终都会被挂载到#app上。注意：template中有且仅有一个根标签。

script部分用于定义当前组件所包含的js脚本。

style部分用于定义当前组件中标签的css样式。 lang属性用于指定语言。scoped属性用于指定css生效的作用域。如果加了上scoped属性，则编写样式仅当前组件生效。如果没有scoped属性，则声明的样式一旦被加载会导致全局生效（本质上项目中每一个组件共用1一个index.html）。