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

Posted 苦海123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue概述vue文件特点vue核心思想双向数据流单文件启动一个vue项目声明式渲染相关的知识,希望对你有一定的参考价值。

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联系笔者删除。
笔者:苦海

以上是关于vue概述vue文件特点vue核心思想双向数据流单文件启动一个vue项目声明式渲染的主要内容,如果未能解决你的问题,请参考以下文章

初识vue

vue.js核心思想

Vue学习日记——Vue核心思想

01Vue数据双向绑定

vue跟着老马学习vue-数据双向绑定

Vue框架