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项目、声明式渲染相关推荐

2.Vue 声明式渲染
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 2.创建第一个Vue应用这篇 ...
在ubuntu上启动一个vue项目
在ubuntu上启动一个vue项目本地: npm install npm run dev npm run build 然后发现报错,大面积报错,原来是被npm给墙了经过 npm install - ...
vue 生成发布包_年轻人如何从0到1封装发布一个vue组件__Vue.js
封装发布组件是前端开发中非常重要的能力,通过对常用组件的封装可以提升团队开发的效率,避免重复劳作且不方便维护.好的组件的抽象和封装能让组件得到更广泛和多环境兼容的应用. 本文讲述了如何一步步从0到1封 ...
单文件图片管理php,php封装的单文件(图片)上传类完整实例
本文实例讲述了php封装的单文件(图片)上传类.分享给大家供大家参考,具体如下: //封装php中的单文件(图片)上传类 /* //参数1:$file 文件数组 5个属性值 name,type,siz ...
004_Photoshop CS5 文件的置入、导出和单文件保存方式
文章目录一.置入文件二.导出文件三.单个图层以单个文件保存方式一.置入文件 PS 中通过 "置入" 命令可以将 AI 格式的文件置入到当前编辑的文件中(PS CS5 ...
php单文件上传实例,php封装的单文件(图片)上传类完整实例
本文实例讲述了php封装的单文件(图片)上传类.分享给大家供大家参考,具体如下: //封装php中的单文件(图片)上传类 /* //参数1:$file 文件数组 5个属性值 name,type,siz ...
ssm框架里面前端拿HTML写,ssm框架引入Vue，声明式渲染，标签的href拼接字符串
一.引入Vue 在官网上下载vue.js.并用 1.下载Vue.js,地址:Vue.js下载地址二.通过ajax获取后台参数,使用Vue渲染调用后台control,获取到数据,传到前端,使用Vue ...
如何启动一个vue项目
用vscode打开vue项目在控制台终端输入命令 cnpm install 通过淘宝镜像下载安装所有的依赖,几分钟后下载完成如果没有安装淘宝镜像,请使用npm install 关闭项目语法检查打 ...
php多文件上传类源码,PHP单文件上传类或多文件上传类源码
以下为引用的内容: // 文件格式检查,MIME检测 function validateFormat(){ if(!is_array($this->fileFormat) || in_array ...

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

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

最新文章

热门文章