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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/575297.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

jQuery特效手风琴特效 手写手风琴网页特效

jQuery特效手风琴特效 手写手风琴网页特效

今天写一个简单的手风琴效果&#xff0c;不用插件&#xff0c;利用强大的jQuery&#xff0c;写一个手风琴效果。 页面预览&#xff0c;请点击这里预览&#xff1a; 手风琴预览案例分析&#xff1a; html结构 就是一个大盒子里面放着5个li&#xff0c;每个li的小小是200像素&a…
阅读更多...
db2 删除索引_MYSQL进阶——索引

db2 删除索引_MYSQL进阶——索引

索引模型hash索引hash索引主要适用于等值查询的场景&#xff0c;排序&#xff0c;模糊搜索等场景并不适用有序数组有序数组可用于非等值查询&#xff0c;排序等场景&#xff0c;但是由于写数据时需要对数组中的元素进行位移&#xff0c;所以一般用于静态数据的场景二叉树二叉树…
阅读更多...
javascript中es6语法

javascript中es6语法

es6语法简介&#xff1a; // 1.历史&#xff1a;// 1995-----JavaScript诞生// 1997-----ECMAScript标准确立// 1999-----ES3出现&#xff0c;与此同时IE5风靡一时// 2009-----ES5出现&#xff0c;现在绝大所数使用的是ES5// 2015-----ES6/ECMAScript2015出现// 2.函数的Rest参…
阅读更多...
react 导航条选中颜色_调整安卓手机的颜色以更好地查看一切

react 导航条选中颜色_调整安卓手机的颜色以更好地查看一切

并非所有人都有相同的区分颜色的能力。我们对屏幕上色彩配置的需求甚至口味可能会因人而异。幸运的是&#xff0c;Android为我们提供了多种本地工具&#xff0c;能够调整手机的颜色。我们的手机显示数百万种音调&#xff0c;这些音调是由屏幕配置或终端如何解释从某些应用程序接…
阅读更多...
vue项目目录结构分析、过滤器、vue文件中基础template、script、style

vue项目目录结构分析、过滤器、vue文件中基础template、script、style

项目目录结构&#xff1a; 1.在一个项目中一般的目录结构为&#xff1a;my_project------------项目文件夹|____src--------------------------------存放人可以看懂的源代码&#xff0c;具备一定功能划分&#xff0c;mvc思想|____dist-------------------------------存放真实…
阅读更多...
linux进程调度之 FIFO 和 RR 调度策略

linux进程调度之 FIFO 和 RR 调度策略

转载 http://blog.chinaunix.net/uid-24774106-id-3379478.html linux进程调度之 FIFO 和 RR 调度策略 2012-10-19 18:16:43分类&#xff1a; LINUX 作者&#xff1a;manuscola.beangmail.com 博客地址&#xff1a;bean.blog.chinaunix.net 最近花了10几天的时间&#xff0…
阅读更多...
echarts 获取点击的y轴数值_有机磷酸催化对醌的不对称直接加成反应合成轴手性芳基醌类化合物...

echarts 获取点击的y轴数值_有机磷酸催化对醌的不对称直接加成反应合成轴手性芳基醌类化合物...

有机磷酸催化对醌的不对称直接加成反应合成轴手性芳基醌类化合物本文作者&#xff1a;Summer轴手性联芳基二醇骨架广泛存在于天然产物、生物活性分子、有用的手性配体以及催化剂中(Figure 1a)&#xff0c;因此&#xff0c;轴手性联芳基二醇化合物的合成受到广泛关注且已经取得了…
阅读更多...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画

vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画

自定义指令&#xff1a; vue中通过directive方法自定义指令&#xff0c;如&#xff1a;自定义一个v-focus指令&#xff1a; <script>Vue.directive(focus, {//通过directive(指令名,{配置})注册全局指令inserted: function (el) {//inserted:表示当自定义指令插入元素后…
阅读更多...
H264解码的一个測试程序

H264解码的一个測试程序

网上看到的一个H264视频格式的解码測试程序&#xff0c;能够用来參考其逻辑流程。 代码例如以下&#xff1a; Test_Display_H264(){ in_fd open(H264_INPUT_FILE, O_RDONLY); //video file open fstat(in_fd, &s); …
阅读更多...
spring框架 web开发_go语言web开发框架学习：Iris框架讲解（一）

spring框架 web开发_go语言web开发框架学习：Iris框架讲解（一）

Golang介绍Go语言是谷歌推出的一种全新的编程语言&#xff0c;可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说&#xff1a;我们之所以开发Go&#xff0c;是因为过去10多年间软件开发的难度令人沮丧。谷歌资深软件工程师罗布派克(R…
阅读更多...
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项

vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项

路由vue-router介绍: // 1.前端路由核心&#xff1a;锚点值的改变&#xff0c;根据不同的锚点值&#xff0c;渲染指定dom位置的不同数据。// 2.vue中&#xff0c;模板数据不是通过ajax请求的&#xff0c;而是调用函数获取到模板内容// 3.vue-router使用方式&#xff1a;// 1.下…
阅读更多...
最小路径覆盖，最小点覆盖，最大独立点集（转）

最小路径覆盖，最小点覆盖，最大独立点集（转）

来自&#xff1a;http://blog.csdn.net/l04205613/article/details/6278394 node 1&#xff1a;最小路径覆盖 在一个&#xff30;&#xff38;&#xff30;的有向图中&#xff0c;路径覆盖就是在图中找一些路经&#xff0c;使之覆盖了图中的 所有顶点&#xff0c;且任何一个顶…
阅读更多...
iOS中画矩形的几种方法总结

iOS中画矩形的几种方法总结

方法1&#xff1a; #pragma mark 画矩形方法1void drawRect1(){ // 1取得图形上下文 CGContextRef ctx UIGraphicsGetCurrentContext(); // 2画一条线段 // 设置一个起点 CGContextMoveToPoint(ctx, 20, 20); CGContextAddLineToPoint(ctx, 100, 10…
阅读更多...
linux终端的背景_如何在终端显示图像缩略图 | Linux 中国

linux终端的背景_如何在终端显示图像缩略图 | Linux 中国

lsix 是一个简单的命令行实用程序&#xff0c;旨在使用 Sixel 图形格式在终端中显示缩略图。-- Sk不久前&#xff0c;我们讨论了 Fim[1]&#xff0c;这是一个轻量级的命令行图像查看器应用程序&#xff0c;用于从命令行显示各种类型的图像&#xff0c;如 bmp、gif、jpeg 和 png…
阅读更多...
移动App开发、App和Web区别、开发移动app时技术选型

移动App开发、App和Web区别、开发移动app时技术选型

移动App开发 混合移动App： 移动端App开发有Android和iOS及混合App，开发它们采用不同的语言，如： 苹果软件使用： OC、或者Swift语言开发。 安卓软件使用：Java，安卓控件进行开发。 混合App使用：把前端特有的技术（HTML+CSS+JS）通过某种方式移植到移动App开发上，这种…
阅读更多...
多线程下HttpContext.Current 的问题

多线程下HttpContext.Current 的问题

在项目中需要记录文本日志&#xff0c;为了加快响应速度所以用到了多线程。 但是以前的方法是不支持多线程的&#xff0c;程序运行错误。 追踪代码发现提示HttpContext为空。 1.HttpContext.Current表示当前HttpRequest 对应的Context对象 httpContext.current在不同的httpRe…
阅读更多...
混合App开发，HBuilder开发移动App

混合App开发，HBuilder开发移动App

使用HBuilder开发混合App&#xff1a; Hbuilder&#xff1a;是一个在线打包工具&#xff0c;不需要在本地配置开发环境&#xff1b;直接将做好的网站&#xff0c;通过一些简单的操作&#xff0c;就能在线打包为一个App&#xff1b; 混合APP开发常见技术&#xff1a;Html5、Re…
阅读更多...
fanuc roboguide_ROBOGUIDE软件：机器人产线输送带输送物料虚拟仿真操作

fanuc roboguide_ROBOGUIDE软件：机器人产线输送带输送物料虚拟仿真操作

概述输送带在机器人生产线或工作站中是常见的物料传送设备&#xff0c;它能够将物料从一个工位自动传送到另一个工位&#xff0c;是实现自动化生产制造必不可少的装置设备之一。虚拟仿真是对真实的工业机器人生产线或工作站的图形化再现&#xff0c;因此&#xff0c;对于具有输…
阅读更多...
ZOJ 3209

ZOJ 3209

精确覆盖 #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> #include <vector> using namespace std;const int maxn920; const int maxnode920*550; const int maxr550; int ans; struct DLX {int n , sz; …
阅读更多...
webpack上线版（生产环境中推荐使用）

webpack上线版（生产环境中推荐使用）

配置上线版&#xff08;生产环境&#xff09;webpack&#xff1a; 实际中将开发环境中和生产环境中打包配置是分开的&#xff0c;两者本质没太大区别&#xff0c;只是生产环境中的webpack打包配置要更加优化合理&#xff0c;下面将具体介绍一下生产环境中webpack配置文件&…
阅读更多...
最新文章

Copyright @ 2022~2023