- 稳定版本
- 2.6.10
- 开发商
- 尤雨溪
- 软件授权
- MIT License
- 软件名称
- Vue.js
- 更新时间
- 2019年3月20日
- 初始版本
- 0.11
- 软件版本
- vue0.11 vue0.12 vue1.0 vue2.0
- 软件语言
- JavaScript
- 软件大小
- 生产版:76 KB,开发版:240 KB
-
vue.js 三种方式安装(vue-cli)
2018-05-29 07:49:05Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
下面介绍三种 Vue.js 的安装方法:
1.独立版本
我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。-> <script src = ../vue.js> </script> 开发环境不要使用最小压缩版,不然会没有错误提示和警告!(页面中直接使用)
使用vue多页面开发:
- 引入vue.js
- 创建一个vue根实例 new Vue({选项})
2.使用CDN方法
- BootCDN(国内) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js , (国内不稳定)
- unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。(推荐使用)
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js,如(<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)
3.NPM方法(推荐使用)
在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。
首先,先列出我们接下来需要的东西:
- node.js环境(npm包管理器)
- vue-cli 脚手架构建工具
- cnpm npm的淘宝镜像
1) 安装node.js
从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入
node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。
npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。
到目前为止,node的环境已经安装完成,npm 包管理器也有了,由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.
2) 安装cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ,然后等待,没报错表示安装成功,(我的已经安装过了,显示更新成功的信息),如下图:
完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。
3) 安装vue-cli 脚手架构建工具(必须在全局中进行安装)
在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
是否安装成功:vue -V
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
首先我们要选择存放项目的位置,然后再用命令行cd到项目的目录中,在这里,我选择在c盘下创建新的目录(NodeTest 目录),用cd 将目录切到该目录下,如下图:
在NodeTest 目录下,在命令行中运行命令 vue init webpack firstApp(初始化一个完整版的项目) 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在NodeTest 目录生成该文件夹),如下图:
若我们在编辑器中已经手动创建了这个项目存放的文件夹cd到项目中:vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包:
是否是在本目录下进行创建
输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。
- Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
- Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
- Author:作者,如果你有配置git的作者,他会读取。
- Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
- Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n(建议),如果你是大型团队开发,最好是进行配置。
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n
运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功,如下图:
接下来,我们去NoteTest目录下去看是否已创建文件:
打开firstApp 项目,项目中的目录如下:
介绍一下目录及其作用:
build:最终发布的代码的存放位置。
config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。
node_modules:npm 加载的项目所需要的各种依赖模块。
src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:
assets:放置一些图片,如logo等
components:目录里放的是一个个的组件文件
router/index.js:配置路由的地方
App.vue:项目入口组件(跟组件),我们也可以将组件写这里,而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染,这里面的<router-view/>必不可少。
main.js :项目的核心文件(整个项目的入口js)引入依赖包、默认页面样式等(项目运行后会在index.html中形成一个app.js文件)。
static:静态资源目录,如图片、字体等。
test:初始测试目录,可删除
.XXXX文件:配置文件。
index.html:html单页面的入口页面,可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。
package.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。
README.md:项目的说明文件。
webpack.config.js:webpack的配置文件,把.vue的文件打包成浏览器能读懂的文件。
.babelrc:是检测es6语法的文件的配置
.getignore:忽略文件的配置(比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置)
.postcssrc.js:前缀的配置
.eslintrc.js:配置eslint语法规则(在这里面的rules属性中配置让哪个语法规则失效)
.eslintignore:忽略eslint对项目某些文件的语法规则的检查
这就是整个项目的目录结构,其中,我们主要在src目录中做修改(模块化开发)。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装。
cd 项目名;进入项目中
安装项目所需要的依赖包/插件(在package.json可查看):执行 cnpm install (npm可能会有警告,这里可以用cnpm代替npm了,运行别人的代码需要先安装依赖)如果创建项目的时候没有报错,这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install
若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件,然后npm run dev 运行项目
安装完成之后,我们到自己的项目中去看,会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。
安装完依赖包资源后,我们就可以运行整个项目了。
运行项目
在项目目录中,运行命令 npm run dev (npm run start),会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
项目启动后,在浏览器中输入项目启动后的地址:
在浏览器中会出现vue的logo:
至此,vue的三种安装方式已介绍完毕。
项目完成后输入打包命令:cnpm run build;会生成一个dist文件,就是我们的打包文件,点击.html文件能运行则成功。
一、搭建vue的开发环境(大纲)
- 必须安装node.js
- 搭建vue的开发环境,安装vue的脚手架工具 官方命令行工具
npm install - -global vue-cli
3.创建项目 必须cd到对应的一个项目里面
vue init webpack vue-demo01
cd vue-demo01
cnpm install / npm install 如果创建项目的时候没有报错,这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install
npm run dev/npm run start
4.另一种创建项目的方式中小型项目 (推荐) ***
vue init webpack-simple vuedemo02
cd vuedemo02
cnpm install / npm install
npm run dev
拿到别人的项目不能正常运行后看有没有node_modules这个文件(项目所有的依赖),若没有cd到项目中安装项目的依赖:cnpm install/npm install
二、升级:vue-cli3.0
一、使用vue-cli3.0
- Vue CLI的包名称由vue-cli改成了@vue/cli
- 如果你已经全局安装了旧版本的vue-cli(3.0以下),你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它。
- Node.js8.9+
- 安装vue3.0 npm install -g @vue/cli 或者 yarn global add @vue/cli
- 版本是否是3.x vue --version/vue -V
- 通过vue-cli创建项目
- 创建项目命令
vue create 项目名; 项目名不建议存在大写,中间用-隔开
这时候需要注意创建项目需要预先安装的插件:
默认的会有Babel + ESLint;但是不建议默认,选择下面:
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试等待项目初始化完成。。。。。。
1.cd 到项目里
2.npm run serve 运行项目
或者使用图形化界面创建项目:
vue ui
看了那么多的vue.js的安装方式总结一下。如有不多请多多指教!希望给您带来帮助!
参考文献:https://blog.csdn.net/m0_37479246/article/details/78836686
-
Vue.js CLI4 Vue.config.js标准配置 (最全注释)
2019-11-26 11:11:35Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。 // vue....前言:
Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。
有三种方式,推荐第二种标准版(无需安装依赖,直接复制即可配置)。
1、依赖库
npm install vue-cli-configjs
2、标准版
// vue.config.js const path = require('path'); const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV); const resolve = (dir) => path.join(__dirname, dir); module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/', // 公共路径 indexPath: 'index.html' , // 相对于打包路径index.html的路径 outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录 assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录 lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本 productionSourceMap: !IS_PROD, // 生产环境的 source map parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。 pwa: {}, // 向 PWA 插件传递选项。 chainWebpack: config => { config.resolve.symlinks(true); // 修复热更新失效 // 如果使用多页面打包,使用vue inspect --plugins查看html是否在结果数组中 config.plugin("html").tap(args => { // 修复 Lazy loading routes Error args[0].chunksSortMode = "none"; return args; }); config.resolve.alias // 添加别名 .set('@', resolve('src')) .set('@assets', resolve('src/assets')) .set('@components', resolve('src/components')) .set('@views', resolve('src/views')) .set('@store', resolve('src/store')); }, css: { extract: IS_PROD, requireModuleExtension: false,// 去掉文件名中的 .module loaderOptions: { // 给 less-loader 传递 Less.js 相关选项 less: { // `globalVars` 定义全局对象,可加入全局变量 globalVars: { primary: '#333' } } } }, devServer: { overlay: { // 让浏览器 overlay 同时显示警告和错误 warnings: true, errors: true }, host: "localhost", port: 8080, // 端口号 https: false, // https:{type:Boolean} open: false, //配置自动启动浏览器 hotOnly: true, // 热更新 // proxy: 'http://localhost:8080' // 配置跨域处理,只有一个代理 proxy: { //配置多个跨域 "/api": { target: "http://172.11.11.11:7071", changeOrigin: true, // ws: true,//websocket支持 secure: false, pathRewrite: { "^/api": "/" } }, "/api2": { target: "http://172.12.12.12:2018", changeOrigin: true, //ws: true,//websocket支持 secure: false, pathRewrite: { "^/api2": "/" } }, } } }
3、升级版
// vue.config.js const path = require('path'); const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩, 按需引用 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩, 按需写入 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV); const resolve = (dir) => path.join(__dirname, dir); module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/', // 公共路径 indexPath: 'index.html' , // 相对于打包路径index.html的路径 outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录 assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录 lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本 productionSourceMap: !IS_PROD, // 生产环境的 source map parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。 pwa: {}, // 向 PWA 插件传递选项。 chainWebpack: config => { config.resolve.symlinks(true); // 修复热更新失效 // 如果使用多页面打包,使用vue inspect --plugins查看html是否在结果数组中 config.plugin("html").tap(args => { // 修复 Lazy loading routes Error args[0].chunksSortMode = "none"; return args; }); config.resolve.alias // 添加别名 .set('@', resolve('src')) .set('@assets', resolve('src/assets')) .set('@components', resolve('src/components')) .set('@views', resolve('src/views')) .set('@store', resolve('src/store')); // 压缩图片 // 需要 npm i -D image-webpack-loader config.module .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } }); // 打包分析 // 打包之后自动生成一个名叫report.html文件(可忽视) if (IS_PROD) { config.plugin("webpack-report").use(BundleAnalyzerPlugin, [ { analyzerMode: "static" } ]); } }, configureWebpack: config => { // 开启 gzip 压缩 // 需要 npm i -D compression-webpack-plugin const plugins = []; if (IS_PROD) { plugins.push( new CompressionWebpackPlugin({ filename: "[path].gz[query]", algorithm: "gzip", test: productionGzipExtensions, threshold: 10240, minRatio: 0.8 }) ); } config.plugins = [...config.plugins, ...plugins]; }, css: { extract: IS_PROD, requireModuleExtension: false,// 去掉文件名中的 .module loaderOptions: { // 给 less-loader 传递 Less.js 相关选项 less: { // `globalVars` 定义全局对象,可加入全局变量 globalVars: { primary: '#333' } } } }, devServer: { overlay: { // 让浏览器 overlay 同时显示警告和错误 warnings: true, errors: true }, host: "localhost", port: 8080, // 端口号 https: false, // https:{type:Boolean} open: false, //配置自动启动浏览器 hotOnly: true, // 热更新 // proxy: 'http://localhost:8080' // 配置跨域处理,只有一个代理 proxy: { //配置多个跨域 "/api": { target: "http://172.11.11.11:7071", changeOrigin: true, // ws: true,//websocket支持 secure: false, pathRewrite: { "^/api": "/" } }, "/api2": { target: "http://172.12.12.12:2018", changeOrigin: true, //ws: true,//websocket支持 secure: false, pathRewrite: { "^/api2": "/" } }, } } }
结语
上述代码可以直接复制,也可以按需引入,一般都用的到,注意里面需要安装的依赖。
注意第三种方式:可能在安装以下依赖时,会报错,建议按以下顺序安装。npm install --save-dev compression-webpack-plugin
npm install --save-dev image-webpack-loader
作者:Vam的金豆之路
主要领域:前端开发
我的微信:maomin9761
微信公众号:前端历劫之路
-
vue.js入门(2)——vue.js里的数据操作(data,methods,computed,watch)
2018-02-24 17:43:09关于vue.js的学习官方文档里有教程 https://cn.vuejs.org/v2/guide/ 赞一下vue.js的维护人员,我会按照官方的API里整合的目录分模块进行学习 本章内容是有关vue的数据处理,主要介绍data,computed,method,watch,...关于vue.js的学习官方文档里有教程
https://cn.vuejs.org/v2/guide/
赞一下vue.js的维护人员,我会按照官方的API里整合的目录分模块进行学习
本章内容是有关vue的数据处理,主要介绍data,computed,method,watch,有关props值传递,会单独开一章玩一下。ok,进入正题。(如对数据操作感兴趣的请看 个人对computer和filter工具使用的一些见解,传送门,另外关于本文,说实话,很多错误,是自己初学的时候瞎写的,如对data的数据双向绑定感兴趣,请看这个链接)
1.data
关于data,很多人的第一印象就是,这个东西很简单,不就是把数据写到data里,就可以用双括号绑定数据了吗?(那你跟我的想法相同,然后踩到坑里无法自拔了)先来看一下官方文档:
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
一旦观察过,不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。
实例创建之后,可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问 vm.a 等价于访问 vm.$data.a。
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。
当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。
如果需要,可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。
以上即为官网对于data的说明,并不是三言两语,反而比很多其他听起来更复杂的对象或方法描述更详细,对于红字部分来一一验证或说明。
首先创建实例后,按照官网提供的方法,输出vm.$data 访问一下data,下面是一个小demo。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>data处理</title> <link rel="stylesheet" type="text/css" href="/static/css/common.css" > </head> <body> <div id="demo">${name}</div> </body> <script src="/static/js/vue.js"></script> <script src="/static/js/jquery-1.11.1.js"></script> <script> var vm = new Vue({ delimiters:['${','}'], el:"#demo", data:{ "name":"dkr" } }) console.log(vm.$data); </script> </html>
可以看到控制台打印:
Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化,所以数据是通过get和set方法进行数据绑定的。
然后来“作”一下,把name改成$name or _name,控制台可以输出值,但无法渲染到dom上,还会报错
当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。这个特性跟组件有关,在后面讲组件的时候会讲到,大致了解一下,可以听不懂,就是组件的data如果用对象的方式声明,A组件和B组件会共用这个data对象里面的值,因此需要通过声明函数,通过函数返回值,使得A组件和B组件的内容不共用。(其实就是你所创建的某个东西,在计算机里是否存在同一区域的问题,如果存在同一区域,那肯定是共用该区域的内容,如果是不同区域,即使名字相同,也只是同名同姓的两个人,本质上不是一个人)
2.methods
method在官网里的描述不是很多就一句话:
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
只要注意一下method里的this指针指向的是创建的vue实例即可。
关于method的好处,个人觉得他可以统一管理某个组件里用到的方法,而不需要像平常做的项目一样,引入不知道多少个common文件,东拼西凑,代码维护起来很不方便。他的用法就是通过v-on监听事件是否触发,再绑定method里的函数。(关于v-on的用法上一章说的比较细,这里就不具体演示了)
写个小demo看一下this对象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>data处理</title> <link rel="stylesheet" type="text/css" href="/static/css/common.css" > </head> <body> <div id="demo"> <button @click="helloWorld" v-text="name"></button> </div> </body> <script src="/static/js/vue.js"></script> <script src="/static/js/jquery-1.11.1.js"></script> <script> var vm = new Vue({ delimiters:['${','}'], el:"#demo", data:{ "name":"dkr" }, methods:{ helloWorld:function(){ console.log("hello world"); console.log(this); } } }) </script> </html>
3.computed
官网描述:
计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。补充一条:this指针默认指向创建的vue实例。
关于computed,个人理解他是用于数据的计算,并可以直接返回结果值,由于返回的是值,因此可以直接使用该数据,而不是绑定函数,驱动computed执行的是数据是否变化这个条件,所以可以理解为,computed里面的函数监听了数据是否变化。(跟method里监听鼠标点击,巴拉巴拉的操作其实差不多,只是各司其职)
写个简单的demo了解一下,实际项目中涉及的复杂计算请多多了解一些常用的计算工具。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>data处理</title> <link rel="stylesheet" type="text/css" href="/static/css/common.css" > </head> <body> <div id="demo"> <button @click="helloWorld" v-text="name"></button> <input type="number" v-model="A"> <input type="number" v-model="B"> <div>${Add}</div> </div> </body> <script src="/static/js/vue.js"></script> <script src="/static/js/jquery-1.11.1.js"></script> <script> var vm = new Vue({ delimiters:['${','}'], el:"#demo", data:{ "name":"dkr", "A":0, "B":0, }, methods:{ helloWorld:function(){ console.log("hello world"); console.log(this); } }, computed:{ Add:function(){ return this.A + this.B; } } }) </script> </html>
可以看到我把Add函数的返回值直接用双括号绑定的方法渲染在模板里。
4.watch
官网的介绍感觉不是很详细:
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用
$watch()
,遍历 watch 对象的每一个属性。关于watch的使用其实有很多坑,deep参数的使用,新值旧值的获取等。
为了说明deep参数,我将测试三种类型的数据,分别是
str :字符串
arr:数组
json:对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>data处理</title> <link rel="stylesheet" type="text/css" href="/static/css/common.css" > </head> <body> <div id="demo"> <button @click="helloWorld" v-text="name"></button> <input type="number" v-model="A"> <input type="number" v-model="B"> <div>${Add}</div> <button @click="changeArr">改变对象数组值</button> <button @click="changeStr">改变str值</button> <button @click="changeObj">改变obj值</button> </div> </body> <script src="/static/js/vue.js"></script> <script src="/static/js/jquery-1.11.1.js"></script> <script> var vm = new Vue({ delimiters:['${','}'], el:"#demo", data:{ "name":"dkr", "A":0, "B":0, "arr":[{ "name":"lalala", "sex":"nan", },{ "name":"hahaha", "sex":"nan", },{ "name":"xixixi", "sex":"nv", },], "str":"hello world", "obj":{ "name":"diudiudiu", "sex":"nv", } }, methods:{ helloWorld:function(){ console.log("hello world"); console.log(this); }, changeArr:function(){ this.arr.push("nihao"); }, changeStr:function(){ this.str = "hello vue"; }, changeObj:function(){ this.obj.name="dididi"; } }, computed:{ Add:function(){ return this.A + this.B; } }, watch:{ "arr":{ handler:function(val,oldVal){ console.log("监听到了arr数据变化"); console.log(JSON.stringify(val)===JSON.stringify(oldVal)); //true }, //deep:true, }, "str":{ handler:function(val,oldVal){ console.log("监听到了str数据变化"); console.log(val,oldVal); //hello vue , hello world }, //deep:true, }, "obj":{ handler:function(val,oldVal){ console.log("监听到了obj数据变化"); console.log(val === oldVal); //true }, deep:true, }, } }) </script> </html>
分别点击三个button触发事件,获得以下结果
arr和str不需要深度监控,就可以探测到数据的变化(如果你的数组是对象数组,改变了某个对象里的某个值,其实可以归为下面一类,也是需要深度监控才能监听到)
json对象需要深度监控,才能检测到某个数据的变化,否则不会触发监听事件(当然,如果你新增一个键值对,那么,不需要深度监控也能监听到)
arr和json对象,val === oldval,都是新的值,是因为数组和对象共用同一块空间。
str类型能够顺利输出新值和旧值。
关于数据的基本操作,到此为止。有什么看不懂或者写错的地方,欢迎联系我,我电话110
-
vue.js 三种方式安装
2017-12-18 20:17:18Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
下面介绍三种 Vue.js 的安装方法:
1.独立版本
我们可以在Vue.js的官网上直接下载vue.js,并在<script>标签中引用。-> <script src = ../vue.js> </script> 开发环境不要使用最小压缩版,不然会没有错误提示和警告!
2.使用CDN方法
- BootCDN(国内) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js , (国内不稳定)
- unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。(推荐使用)
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js,如(<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)
3.NPM方法
在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。
首先,先列出我们接下来需要的东西:
- node.js环境(npm包管理器)
- vue-cli 脚手架构建工具
- cnpm npm的淘宝镜像
1) 安装node.js
从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入
node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。
npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。
到目前为止,node的环境已经安装完成,npm 包管理器也有了,由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.
2) 安装cnpm
在命令行中输入 npm install -g cnpm --registry=https://registry.npm.taobao.org ,然后等待,没报错表示安装成功,(我的已经安装过了,显示更新成功的信息),如下图:
完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。
3) 安装vue-cli 脚手架构建工具
在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
首先我们要选择存放项目的位置,然后再用命令行将目录转到选定的目录,在这里,我选择在c盘下创建新的目录(NodeTest 目录),用cd 将目录切到该目录下,如下图:
在NodeTest 目录下,在命令行中运行命令 vue init webpack firstApp 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在NodeTest 目录生成该文件夹),如下图。
运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功,如下图:
接下来,我们去NoteTest目录下去看是否已创建文件:
打开firstApp 项目,项目中的目录如下:
介绍一下目录及其作用:
build:最终发布的代码的存放位置。
config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。
node_modules:npm 加载的项目依赖模块。
src:这里是我们开发的主要目录,基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:
assets:放置一些图片,如logo等
components:目录里放的是一个组件文件,可以不用。
App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。
main.js :项目的核心文件
static:静态资源目录,如图片、字体等。
test:初始测试目录,可删除
.XXXX文件:配置文件。
index.html:首页入口文件,可以添加一些meta信息或者同统计代码啥的。
package.json:项目配置文件。
README.md:项目的说明文件。
这就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装。
安装项目所需要的依赖:执行 cnpm install (这里可以用cnpm代替npm了)
安装完成之后,我们到自己的项目中去看,会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。
安装完依赖包资源后,我们就可以运行整个项目了。
运行项目
在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
项目启动后,在浏览器中输入项目启动后的地址:
在浏览器中会出现vue的logo:
至此,vue的三种安装方式已介绍完毕。
点击可查看更多相关的内容,戳戳戳http://blog.csdn.net/m0_37479246/article/list
-
Vue进阶(三十六):vue.js中created方法的使用详解
2019-01-30 14:36:54这次给大家带来vue.js中created方法的使用详解,使用vue.js中created方法的注意事项有哪些,下面就是实战案例,一起来看一下。这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。一个vue实例被... -
遇见 vue.js --------阿文的vue.js学习笔记(3)----vue实例
2020-09-18 11:23:26遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1] 遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2] … …... -
整合springboot+vue.js--安装vue.js
2019-04-29 20:52:32业余时间想整理一个基于springboot2.x+mybatis+redis(二级缓存)+vue.js的小系统,随着工作经验的增加慢慢去完善它 废话不多说,安排一个node.js,回归最老版的命令行编码! vue.js是什么?为什么要使用它? Vue.js... -
在哪里下载vue.js或者是vue.min.js,使用cdn来记载vue框架
2018-12-03 15:52:08在官网上下载vue.js或者是vue.min.js。并用<script>标签引入。下载网址是https://vuejs.org/v2/guide/installation.html。 进入官网后,点击下载这两个,其中这两个有一个是vue.js 有一个是vue.min... -
vue.js介绍及vue.js优缺点
2018-10-25 20:53:18什么是vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或... -
Vue.js概述、MVVM模式、Vue.js与JavaScript和jQuery的不同之处
2019-10-05 22:43:57Vue.js Vue.js的官方文档中是这样介绍它的:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。 简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式(Progressive),就是我们可以一步一步、有阶段性地来使用Vue.... -
vue.js资源汇总,vue.js教程大全
2016-09-13 08:18:35Vue.js 的一些资源索引 vue资料入门类 vue 快速入门 Vue.js 中文系列视频教程 on Laravist英文教程 Learning Vue 1.0: Step By Step社区 sf - vue标签 知乎 - vue标签 Vue.js专业中文社区 vue - issues二. ... -
Vue.js(一) Vue.js + element-ui 扫盲
2018-12-09 20:32:59一:node.js是什么 我们知道javascript代码只能在浏览器上运行,只有浏览器能够解析js代码,如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment),这就是node.js。 ... -
Vue第二篇之在HTML中引入Vue.js,快速使用Vue
2018-10-16 11:19:27直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。 下载vue.js 地址:https://download.csdn.net/download/qq_31122833/10723310,下载完之后在HTML中加入v... -
vue.js视频教程,vue.js视频教程下载
2016-09-14 07:23:05好不容易找到的资源,分享给大家,视频清晰。...第二套视频在我的另一篇博文中也有提到的vue.js资源汇总,vue.js教程大全,现也一并整理出来方便大家学习。vue.js视频教程百度云盘下载 Vuejs 1.0 系列教程 -
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测
2020-10-06 17:06:53遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1] 遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2] … …... -
2017最新vue.js1.0/vue.js2.0视频教程共12套
2017-05-19 23:13:022017最新vue.js1.0/vue.js2.0视频教程共12套有需要加我Q:1139721002备注来意 可以关注微信公众号搜索:cityapes或者搜索:城市一猿 点击菜单的vue.js就可以下载了 ... -
Vue.js教程-目录
2020-08-03 15:18:52Vue.js教程-目录简介章节列表 简介 本目录作为Vue教程的首页,所以会持续更新。 如果某篇章节中有错误的地方,希望大家能够指出来,我会更正,私信和评论里说都可以,不懂的地方也可以说,如果我也不会那就请教一下... -
vue.js - package.js和vue.config.js之间是什么区别
2019-06-26 16:18:35vue.config.js 是webpack的配置文件 vue.config.js是一个可选的配置文件,如果项目的 (和package.json同级的) 根目录中存在这个文件,那么它会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段,... -
Vue.js 2.0之全家桶系列视频课程
2018-04-21 16:52:25基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,... -
Awesome Vue.js vue.js学习资源链接大全 中文
2017-10-12 16:51:35策划列表相关的vue.js可畏的事 资源 官方资源外部资源工作门户社区会议播客官方的例子教程实例书 项目采用vue.js 开源商业产品应用/网站互动体验企业使用 组件&图书馆 用户界面组件 表通知... -
基于 Vue.js 2.0 的 UI 组件库快速开发一个 Vue.js Web 应用 Element UI 视频教程
2018-07-28 21:35:46基于 Vue.js 2.0 的 UI 组件库快速开发一个 Vue.js Web 应用 Element UI 视频教程 下载地址;百度网盘 -
vue.js与Node.js区别以及Node.js下载与安装
2018-10-11 00:06:33首先vue.js 是库,不是框架,不是框架,不是框架。 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据... -
Vue.js devtools:调试vue.js应用的浏览器扩展 Chrome插件
2017-12-07 14:12:13然后可以根据下文去操作即可,请注意最后的温馨提示哦 前面的文章我们为大家介绍了Vue的安装、实践,工欲善其事必...Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏 -
vue.js报错 vue.js:597 [Vue warn]: Cannot find element: #app
2018-08-19 10:50:44刚开始使用vue的时候发现vue报vue.js:597 [Vue warn]: Cannot find element: #app的错误,初始以为是写的代码有错误导致,于是认真的对照了几遍发现代码和官网的一模一样。代码都一样了,那就排除了是代码愿意导致... -
Node.js 和 Vue.js 的区别
2019-03-19 09:42:44Node.js 和 Vue.js 的区别 完全两码事,一个是前端框架,一个是服务端语言。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 ... -
Vue.js的使用
2019-11-04 10:09:50Vue.js的的使用:Axios、vue-router、vuex...... -
Awesome Vue.js vue.js学习资源链接大全 英文
2017-10-12 16:43:38A curated list of awesome things related to Vue.js Resources Official ResourcesExternal ResourcesJob PortalCommunityConferencesPodcastsOfficial ExamplesTutorialsExamplesBooks Projects Using V -
解决Vue.js not detected的问题
2018-05-03 20:19:13前几天遇到了一个问题,在安装完Vue.js devtools后,打开自己写的一个vue.js网页,发现这个图标并没有亮起来,还是灰色,点击图标显示Vue.js not detected,打开控制台也没有发现有vue的选项 网上找了很多解决方案都... -
使用Vue.js和Element-UI做一个简单的登录页面
2017-06-22 10:02:50使用Vue.js和Element-UI做一个简单的登录页面
-
湖南大学数据结构实验代码
-
【数据分析-随到随学】数据可视化
-
C语言课程设计仓库管理系统.doc
-
第二单元DOM.xmind
-
JavaEE框架(Maven+SSM)全程实战开发教程(源码+讲义)
-
Laya 2.0 开发3D小游戏 入门教学
-
ACwing 1346回文平方
-
guiminer.zip
-
微信支付2021系列之扫码支付一学就会java版
-
CVR100UD二次开发SDK开发说明(华视)V7.1.6.rar
-
如何下载高分辨率卫星影像
-
三维地图GIS大数据可视化
-
第五单元运算符.xmind
-
jdk-11.0.10_windows-x64_bin.zip
-
【文本分析】从《全职高手》聊起-python实现
-
原生Android代码生成器
-
Java Web开发之Java语言基础
-
kafka中的ISR、AR又代表什么?ISR伸缩又是什么?
-
ES-elastic.rar
-
电商设计专业思维