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/#起步

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}"

数组语法：

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