Vue.js的学习、安装、基础语法

1、基于MV*模式的框架

（1）Model绑定View

（2）没有控制器

（3）数据驱动，状态管理

2、核心思想

（1）数据驱动：非直接操作节点，是通过变量绑定数据

（2）组件化：抽离公用的代码，形成一个个组件

通过MVVM的数据绑定实现自动同步

（3）模拟双向绑定

（4）单文件组件，一个文件由html、js、css组成

3、安装

这里使用npm安装（使用git-bash命令行）

（1）安装node.js

（2）npm官方镜像比较慢，这里使用淘宝NPM镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

（3）安装vue

$ cnpm install vue

（4）全局安装vue-cli

  · 成熟的vue项目架构设计

  · 本地测试服务器

  · 集成打包上线方案

lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo
$ cnpm install -g vue-cli          安装vue-cli

lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo
$ vue init webpack mall            初始化项目

? Project name (mall) mall
? Project name mall
? Project description (A Vue.js project) mall system
? Project description mall system
? Author snow-small
? Author snow-small
? Vue build standalone
? Install vue-router? (Y/n) Y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (reco
? Should we run `npm install` for you after the project has been created? (reco
mmended) no

   vue-cli · Generated "mall".

# Project initialization finished!
# ========================

To get started:

  cd mall
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

（5）进入项目，安装依赖

lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo
$ cd ./mall

lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo/mall
$ cnpm install

（6）运行

lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo/mall
$ cnpm run dev      在localhost启动测试服务器

$ cnpm run build    生成上线目录（部署）

（7）成功显示

> [email protected] dev E:\workspace\xampp\htdocs\demo\mall
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting DONE  Compiled successfully in 3970ms20:07:53

 I  Your application is running here: http://localhost:8080

4、基础语法

（1）模板语法：

  · Mustache语法： {{ msg }}

  · Html赋值：v-html = ""

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

  · 使用表达式：{{ ok ? "YES", "NO"}}

  · 文本赋值：v-text = ""

  · 指令：v-if = ""

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

（2）Class和Style绑定

v-bind:可以省略成:

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

isActive==true时，显示active

  · 数组语法：

    data: {

            activeClass: active,

            errorClass: text-danger

    }

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

data: {
    links: {
        font-size: 12px,
        color: #fff
    }
}

（3）条件渲染： 

  · v-if

  · v-else

aaa     if显示的时候，else不显示，
bbb

  · v-else-if

  · v-show

      区别是show是display=block

  · v-clock 如果页面刷新太快，未加载出来的地方会同步隐藏相关的代码

（4）vue事件处理器

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

  · v-on:click.stop  v-on:click.stop.prevent v-on:click.self v-on:click.once 

  · v-on:keyup:enter/esc/tab

（5）实例对象

new Vue({
			el: '#app',   挂载的对象
			template: '
{{ fruit }}
',   使用的模板
			data: {
				fruit: 'apple'             绑定的数据
			}
		});

（6）组件

    · 全局组件

		
		{{ test }}
	

	

· 局部组件

		
		{{ test }}
	

	

当组件名为驼峰时myHeaderAbCd，在