vue.js入门--环境搭建和基本语法

一、环境

node.js下载安装后

$ node -v
v12.14.1

$ npm -v
6.13.4

//安装cnpm 使用淘宝镜像
npm install -g cnpm --registery=https://registry.npm.taobao.org

二、使用方式

2.1 多页面引入vue

使用官网cdn vue.js

https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

npm安装vue,使用本地vue.js

cnpm install vue --save	

2.2 vue-cli构建spa应用

cnpm i -g vue-cli

//构建简单 或者 完整demo实例
vue init webpack-simple demo 或 vue init webpack demo

cd demo
cnpm install 	##安装依赖
cnpm run dev	##启动

访问 http://localhost:8080/

2.3 目录

只显示二级目录

.
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js  			##webpack配置文件
├── config
│   ├── dev.env.js
│   ├── index.js							##项目配置文件
│   └── prod.env.js
├── index.html
├── node_modules
│   ├── accepts
│   ├── acorn
│   ├── .....
│   ├── xxhashjs
│   ├── y18n
│   ├── yallist
│   ├── yargs
│   └── yargs-parser
├── package.json						##package包
├── package-lock.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   └── router
└── static

打包生产dist项目

cnpm run build 			##打包

三、vue基本语法

3.1 模板语法

mustache语法： {{msg}}

html赋值： v-html=""

绑定属性：v-bind:id=""

使用表达式：{{ok ? 'yes' : 'no'}}

文本赋值：v-text=""

指令： v-if=""

过滤器：{{message|capitalize}} 和 v-bind:id="rawId|formatId"

3.2 class和style绑定

对象语法： v-bind:class="{active:isActive,'text-danger':hasError}"

数组语法：<div v-bind:class="{activeClass,errorClass}"> 
js代码:
data:{
	activeClass:'active',
	errorClass:'text-danger'
}

style绑定-对象语法：v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"

3.3 条件渲染

v-if	   		#不显示
v-else
v-else-if
v-show 		#display=none
v-cloak

3.4 事件处理器

v-on:click="greet" 或 @click="greet"

v-on:click.stop        		#阻止冒泡
v-on:click.stop.prevent		#阻止默认事件
v-on:click.self				#
v-on:click.once				#绑定一次

#keyup绑定按键
v-on:keyup.enter 
v-on:keyup.tab

3.5 vue组件

全局组件和局部组件	

父子组件通讯-数据传输

slot