vue-cli的搭建
脚手架运行前需要: node环境、npm包管理工具
第一次搭建:步骤
1、node -v
2、npm -v 或者 cnpm -v
3 、vue -V 检查是否全局安装
如果没有安装可以选择安装淘宝的或者国外的
安装淘宝镜像/国外镜像
淘宝 $ npm install -g cnpm --registry=https://registry.npm.taobao.org \ 国外 npm install vue
全局安装 vue-cli
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
$ cd my-project
安装依赖,走你
$npm install
$ npm run dev
后续安装:
1、vue init webpack my-project
2、cd my-project
3、npm install 4、 npm run dev
$ vue init webpack my-project--------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd my-project
npm install
npm run dev
计算属性(computed)
模板内的表达式不应该包含太多的逻辑,对于任何复杂逻辑,都应当使用计算属性
我对计算属性的理解是:计算属性是需要复杂的逻辑和很多组件基础状态最后才能得到其正确值的属性
computed属性和methods不同的是计算属性是基于它们的依赖进行缓存的。
computed:{
totalPrice(){
return 66
}
}
计算属性与Methods的区别
计算计算属性是基于它们的依赖进行缓存的;
只要它的依赖message没有发生改变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数
Methods :只要发生重新渲染,method调用总会执行该函数