序言 vue.js介绍

第1节 安装与部署

重点：引入vue.js

第2节 创建第一个vue应用

重点：{{ message }}

{{ message }} {{name}}

第3节 数据与方法

重点：vm实例、$ data、$ watch

{{a}}

第4节 生命周期

重点：created、mounted 、updated

{{msg}}

第5节 模板语法-插值

重点：

• “Mustache”语法 (双大括号) ；
• v-bind作用在attribute上；

{{msg}}
Using mustaches: {{ rawHtml }}
test...
{{ number + 1 }}
{{ 1 == 1 ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

第6节 模板语法-指令

重点：

• v-bind 缩写，绑定属性attribute
• v-on 缩写，绑定事件methods
• v-if

现在你看到我了
...
click me

第7节 class与style绑定

重点：

• 普通class属性可以与v-bind:class属性共存。
• v-bind:class支持数组形式、三元判断，如 v-bind:class=“[ isActive ? ‘active’ : ‘’, isGreen ? ‘green’ : ‘’]”
• v-bind:style动态属性，如:style=“{color:color, fontSize:size, background: isRed ? ‘#FF0000’ : ‘’}”

hi vue
hi vue

第8节 条件渲染

重点：

• v-if 是惰性的
• v-show 总是会被渲染

A
B
C
Not A/B/C
Hello!

第9节 列表渲染

重点：

• v-for 要注意index,name,key,value
• name 与key类似

{{index}}{{ item.message }}
{{key}} : {{ value }}

第10节 事件绑定

重点：

• v-on:click=“greet”：访问methods中的greet方法
• 特殊变量 $event：访问原始的 DOM 事件

 数值 :  {{ counter }} 
Greet

第11节 表单输入绑定

重点：

• 文本input （v-model）
• 多行文本textarea （v-model）
• 复选框checkbox（v-model）
• 多选框select （v-model）
• 单选框radio（v-model）

Message is: {{ message }}
{{ message2 }}

JackJohnMike
Checked names: {{ checkedNames }}
One
Two
Picked: {{ picked }}
提交

第12节 组件基础

重点：

• 全局注册和局部注册
• 通过 Prop 向子组件传递数据，如props: [‘title’], ；
• 使用 v-bind 来动态传递 prop
• 每个组件必须只有一个根元素
• (难)$ emit 方法并传入事件名称来触发一个事件==>可见图示解释
• v-model = v-bind + v-on
• 插槽slot

hi...h2

第13节 组件注册

重点：

• 全局变量注册Vue.component(‘button-counter’, {})
• 局部变量注册new Vue()中添加components

第14节 单文件组件

### 安装 `npm`
`npm` 全称为 `Node Package Manager`，是一个基于`Node.js`的包管理器，也是整个`Node.js`社区最流行、支持的第三方模块最多的包管理器。

npm -v

### 由于网络原因 安装 `cnpm`

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

### 安装 `vue-cli`

cnpm install -g @vue/cli

### 安装 `webpack`
`webpack` 是  `JavaScript` 打包器(module bundler)

cnpm install -g webpack

第15节 免终端开发vue应用