Vue框架----一个js框架

chuntian_tester

已于 2022-07-19 23:42:20 修改

阅读量858

点赞数 2

分类专栏：前端-VUE 文章标签：前端框架 vue

于 2022-05-15 22:49:31 首次发布

本文链接：https://blog.csdn.net/qq_40132294/article/details/124785440

版权

前端-VUE 专栏收录该内容

10 篇文章 4 订阅

订阅专栏

一.简介：

1.Vue.js特点

前端三大框架Angular.js,React.js,Vue.js；Vue.js，前端主流框架之一；使用gzip压缩后只有

20kb左右；Introduction | Vue.js

自动响应式更新：只需关注前端业务逻辑，无需操作DOM。

高级特性：国人开发，解耦视图与数据；

可复用组件

前端路由

状态管理

虚拟DOM

组件机制开发（可随处导入）

2.MVVM模式：

类似于MVC(java)和MVT(django)模式

M: Model

模型

从后端获取的数据

V: View

视图

界面展示

VM: ViewModel

视图模型

CDN引入Vue.js

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--MVVM模式中的V(view)视图，此处需指定id**/-->
    <div id="app">
        {{ msg }}
    </div>

    <script>
        /*创建一个Vue实例,这个实例会控制这个id=app的元素中的所有内容！*/
        // Vue的实例就是vm控制器
        var vm = new Vue({
            // el：指定控制的区域，此处指定控制 id="app"的区域
            el: '#app',
            // data: 代表数据，MVVM的M(model)
            data: {
                msg: "hello, chuntian!!"
            }
        })
    </script>
</body>
</html>

效果：

3.组件化：

模块化

以不同的组件，来划分不同的功能模块

复用

高效

解耦

vue-cli:前端工程化工具，可以帮我们创建一个前端工程，集成了webpack打包机制。

二.前端工程化，组件化（模块化）

1.创建前端vue工程

1.1 安装Node.js

Download | Node.js，下载下来后全程下一步

node -v

npm -v npm包管理器，此处的npm相当于python中的pip

1.2 使用淘宝npm镜像源

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

下载之后，就可以使用cnpm来下载安装包了。

2.安装vue-cli脚手架

2.1 使用npm

npm install -g @vue/cli或者cnpm install -g @vue/cli

vue-cli脚手架安装完毕后检查：

3.使用vs code或者webstorm创建工程项目

创建项目：

vue create 项目名

vue create lean_vue

创建后打开如下：

node_moludes:系统的依赖包所在目录，里面是库文件

public:不需要webpack打包的文件放在pubic中（webpack可理解作一个压缩工具）

src:所有需要打包，压缩，优化的文件存放在src目录中

assets: 静态文件存放目录，图片，css样式，js等静态资源可放在assets目录中

components存放组件，HelloWorld.vue就是一个组件，即一个模块，可以随意调用

（tips: 凡是以xxx.vue结尾的文件，就是组件（模块））

App.vue：根组件

组件都是由3部分组成：<tempalte>,<script>,<style>

<!--tempalet 部分用于展示给用户，相当于MVVM模式中的V-->
<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 在父组件中给子组件传值 -->
    <HelloWorld msg="chuntian is cute！！"/>
    <!--此处使用子组件    -->
    <greeting></greeting>
  </div>
</template>

<!--script标签内是js组件  -->
<script>
// 此处导入子组件后在components中还要声明子组件
import HelloWorld from './components/HelloWorld.vue'
import greeting from "./components/greeting";

export default {
  // 定义组件名称
  name: 'App',
  // 声明子组件
  components: {
    HelloWorld,
    greeting,

  }
}
</script>

<!--style标签内：视图的样式-->
<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>

main.js:main函数，入口文件。

// 导入vue.js
import { createApp } from 'vue'

// 导入App.vue根组件
import App from './App.vue'

// 实例化
createApp(App).mount('#app')

启动项目：

1.命令启动：

npm run serve

2.或者webstorm启动：

2.1 配置运行器：

2.2

2.3

2.4 访问

创建组件（模块）：

components中创建：

<template>
        次标签中只能写<div> xxxxx </div>标签
</template>

greeting.vue组件：

<template>
  <div class="msg">
    <!-- 2个花括号{{}}插值表达式   -->
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  name: "greeting",

  data(){   // vue中，{}包裹的代表一个对象，[]包裹的代表一个列表（数组）
    return {
      message:"hello，chuntian_tester!"
    }
  }
}
</script>

<style scoped>
  .msg p{
    color:red;
  }

</style>

定义好子组件后，如何在根组件App.vue中使用？

1. 导入-------> 2. 声明-------> 3.使用

插值表达式：{{ }} 组件中用两个{{}}包裹的内容就是插值表达式

效果：

chuntian_tester

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue框架----一个js框架

一.简介：1.Vue.js特点前端三大框架Angular.js,React.js,Vue.js；Vue.js，前端主流框架之一；使用gzip压缩后只有20kb左右；Introduction | Vue.js自动响应式更新：只需关注前端业务逻辑，无需操作DOM。高级特性：国人开发，解耦视图与数据；可复用组件前端路由状态管理......
复制链接

扫一扫