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
    

原文：https://www.cnblogs.com/sentangle/p/12258866.html