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项目声明式渲染的主要内容，如果未能解决你的问题，请参考以下文章