vue概述、vue文件特点、vue核心思想、双向数据流、单文件、启动一个vue项目、声明式渲染

苦海123

已于 2024-03-19 22:55:22 修改

阅读量858

点赞数 1

分类专栏： vue2&vue3 文章标签：前端 vue

于 2021-06-04 10:10:46 首次发布

本文链接：https://blog.csdn.net/weixin_46758988/article/details/117550505

版权

vue2&vue3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue介绍：

Vue：当前较火的MVVM框架，轻量、简介、高效、组件化、数据驱动，模块和渲染函数的弹性选择，简单的语法及项目创建，渲染速度极快，基于Virtual Dom，利用虚拟DOM实现快速渲染；支持服务端渲染，响应式组件，易于集成路由工具，打包工具以及状态管理工具。它与react.js、angular.js被称为前端三大框架。其作者：中国开发者尤雨溪，其中文文档推荐：https://v3.cn.vuejs.org/guide/introduction.html

部分前端js框架概述：

Dojo：强大、重量级、非常多的核心组件和库

Spine：典型MVC框架， model和view解耦， controller控制DOM，完全照搬MVC模式

emBen：典型MVC框架

protype: 针对函数库

jQuery: 基于DOM操作的函数库

vue: 基于mv * 模式的框架， model绑定view，没有控制器概念，数据驱动，状态管理，不经常操作dom和class，更多是操作数据，通过改变变量来控制视图。

vue常用插件：

vue - cli: 脚手架搭建vue基本代码框架

vue - router: 官方插件管理路由，与前端交互

vue - resource：与后端ajax进行通信的插件

webpack: 构建工具

es6 + eslint（ eslint: es6代码风格检查工具）

vue单文件特点：

1.以 * .vue结尾的文件，最终通过webpack编译在浏览器运行

2.vue文件内容轮廓是： < template > < /template> + + < style > < /style>

注意： template中只允许一个根节点； script中按照export default { 配置 }来写；style中可以设置scoped属性，让其只在当前的template中生效。

vue核心思想及概括：

1.概况：vue本身不是一个框架，但是结合周边生态却构成了一个灵活、渐进式的框架，如：

Declarative Rendering-----------声明式渲染

Component System----------------组件系统

Client-Side Routing-------------客户端路由

Large Scale State Management----大规模状态管理

Build System--------------------构建工具

2.核心思想：数据驱动(不考虑节点，只考虑数据层面，数据构建页面) 、组件化(把公共页面抽离出来形成组件，嵌套在需要的地方)

3.通过MVVM的数据绑定实现自动同步：view（视图层DOM）-------> ViewModel（Vue）------> Model（POJO 原生JS对象） ; view（视图层DOM）<------- ViewModel（Vue）<------ Model（POJO 原生JS对象）

ViewModel监听view和model的变化，一边变化，则会更新另一边，达到自动双向同步的功能

4.vue组件树：大组件嵌套小组件，小组件嵌套更小的组件，划分的更细。

5.双向数据流：1向：js内存属性发生改变，影响页面的变化 1向：页面的改变影响js内存属性的改变

6.Vue实现双向数据绑定：通过Object.defineProperty()函数实现。

启动单文件：

webpack通过对应loader可以理解*.vue文件；（其中loader及依赖有：vue-loader 、vue-template-complier 、vue ），要解析vue文件，那么在 webpack属性配置里面必须要有:vue-loader配置。

vue声明式渲染：

1.新建一个文件夹（小编命名为：vuetest），并在此文件夹打开终端。

2.终端输入：npm init -y 初始化一个package.json文件。

3.终端继续输入：npm install vue --save 安装veu。

4.新建一个index.html文件在项目文件夹中,index.html代码如下：

	<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="./node_modules/vue/dist/vue.js"></script><!-- 引入vue文件，这里也可以使用网络资源,如：<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
        <title>Document</title>
    </head>
    <body>
      <!-- 设置一个容器 -->
        <span id='spans'>{{text}}</span> <!-- 通过：{{变量}}访问变量的值 -->
        <script>
            new Vue({
                el: '#spans',//绑定容器
                data: {
                    text: 'hello word'//被定义的变量
                }
            });
        </script>
    </body>
    </html>

5.在浏览器打开index.html文件，可以看到hello word。

启动一个vue应用：

1.移动vuetest文件夹中index.html文件到src（新建src文件夹）目录下，并修改代码如下：

	<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    </html>

2.终端继续输入：npm i vue-loader babel-loader vue-template-complier --save；

3.在vuetest文件夹下面新建一个webpack.config.js文件，配置如下代码：

	const htmlWebpackPlugin = require('html-webpack-plugin');
    const VueLoaderPlugin = require('vue-loader-plugin');
    const path = require('path')
    module.exports = {
        mode: 'development',
        entry: {
            index: './src/index.js',
        },
        output: {
            filename: './build.js',
            path: path.join(__dirname, 'dist')
        },
        module: {
            rules: [{
                    test: /\.vue$/,
                    use: 'vue-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.js$/,
                    use: 'babel-loader',
                    exclude: /node_modules/
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({
                template: './src/index.html'
            }),
            new VueLoaderPlugin() //不使用vue-cli搭建项目时，如果使用到vue-loader那么就要配置此依赖
        ]
    };

4.终端继续输入：npm install path html-webpack-plugin --save 安装这两个插件；在src文件夹中新建index.js文件，代码如下：

	import Vue from 'vue';
    import router from 'vue-router';
    import App from './app.vue';
    
    // new Vue({
    //     el: '#app',
    //     rander: function(cr) {
    //         return cr(App);
    //     }
    // })
    
    // 上面会报错，使用下面即可：
    new Vue({
        router,
        // store,
        render: h => h(App)
    }).$mount("#app")

5.在src文件夹下新建app.vue文件，代码如下：

	<template>
      <div>jack：{{text}}</div>
    </template>
    
    <script>
    export default {
      data(){
        return {
          text:'hello'
        }
      }
    }
    </script>
    
    <style lang="">
    
    </style>

6.为确保不漏包，应该检查package.json文件，如下：

	{
        "name": "vuetest",
        "version": "1.0.0",
        "main": "index.js",
        "scripts": {
            "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
            "build": "node build/build.js"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "dependencies": {
            "babel-loader": "^8.2.2",
            "html-webpack-plugin": "^5.3.1",
            "parse": "^3.2.0",
            "path": "^0.12.7",
            "vue": "^2.6.13",
            "vue-cli": "^2.9.6",
            "vue-loader": "^15.9.7",
            "vue-loader-plugin": "^1.3.0",
            "vue-router": "^3.5.1",
            "vue-template-compiler": "^2.6.13",
            "webpack": "^5.38.1",
            "webpack-cli": "^4.7.0",
            "webpack-dev-server": "^3.11.2"
        },
        "devDependencies": {
            "coffee-script": "^1.12.7"
        },
        "description": ""
    }

7.在确保以上操作都顺利的话此时可以在终端继续键入：npm run dev 启动项目，此时通过localhost:8080在浏览器即可看到页面;注意因为依赖的包版本不同，可能会报错，这里需要自己调试，或者直接用上面的package.json文件安装依赖;npm run dev 启动不起来，可以直接在dist目录下双击index.html文件打开。

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

苦海123

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue概述、vue文件特点、vue核心思想、双向数据流、单文件、启动一个vue项目、声明式渲染

vue介绍：Vue：当前较火的MVVM框架，轻量、简介、高效、组件化、数据驱动，模块和渲染函数的弹性选择，简单的语法及项目创建，渲染速度极快，基于Virtual Dom，利用虚拟DOM实现快速渲染；支持服务端渲染，响应式组件，易于集成路由工具，打包工具以及状态管理工具。它与react.js、angular.js被称为前端三大框架。其作者：中国开发者尤雨溪，其中文文档推荐：https://v3.cn.vuejs.org/guide/introduction.html部分前端js框架概述：Dojo：强大
复制链接

扫一扫