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项目、声明式渲染的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python end of statem
- 下一篇： vue项目目录结构分析、过滤器、vue文