Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/liyingxuan/vue-tutorial
Vue JS 2.4+ tutorial
https://github.com/liyingxuan/vue-tutorial
javascript vue vue2 vuejs
Last synced: 4 days ago
JSON representation
Vue JS 2.4+ tutorial
- Host: GitHub
- URL: https://github.com/liyingxuan/vue-tutorial
- Owner: liyingxuan
- Created: 2017-10-16T05:52:49.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-16T09:34:23.000Z (about 7 years ago)
- Last Synced: 2024-11-09T19:12:55.256Z (2 months ago)
- Topics: javascript, vue, vue2, vuejs
- Language: JavaScript
- Size: 155 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
#### Vue2.0教程 - Vue.js
[基于Vue CLI构建的Vue项目教程](https://github.com/liyingxuan/vue-cli-tutorial)
[简书教程](http://www.jianshu.com/p/d38ad14abfbf)
##### 1. 说明
> 为了方便记忆和学习，整理了一下之前学习VueJS的要点，并通过在中的代码注释来阐述知识点。
> 总共三课，从数据双向绑定到代码组件化。
> 知识点叙述在代码最下方。
> 需要将IDE设置EcmaScript 6语法
##### 2. 目录结构
```ecmascript 6
- css
|- bootstarp-3.3.7-flatly.min.css // 我使用的皮肤
|- //还有其他bootstarp的文件，自行选择样式了
- js
|- vue-2.4.4.js // 官网下载的完整版
- 01.lesson.html
- 02.lesson.html
- 03.lesson.html
```
##### 3. 知识点概述
lesson-1：
```ecmascript 6
/**************************************************************************
* 【第一课时知识点】
*
* JS区域知识点：
* new Vue el 指定VueJS作用域
* data 数据和变量
* computed 放置需要处理之后再展示的数据
* methods js方法
*
* HTML区域知识点：
* {{}} 双括号直接输入数据
* v-model 数据绑定
* v-for 数据循环
* v-on 事件绑定指令
* v-on:click v-on:submit 监听的事件
* v-on:submit.prevent 其中.prevent是修饰符，用于告诉对触发的事件调用
*************************************************************************/
```
lesson-2:
```ecmascript 6
/**************************************************************************
* 【第二课时知识点】
*
* JS区域知识点：
* 无新知识点
*
* HTML区域知识点：
* v-bind 用于响应式的更新HTML特性
* v-bind:class 增加/删除/更新HTML元素的class；这里展示了两种写法：{}和[]；
* 注意：这里新增的class会填写在HTML元素本身class的后面，有可能会覆盖和影响之前的样式。
*************************************************************************/
```
lesson-3:
```ecmascript 6
/**************************************************************************
* 【第三课时知识点】
*
* JS区域知识点：
* Vue组件component
* 引用template模板
* 在component中注册template模板、定义传入的属性数据props、变量和数据data、方法methods
* HTML代码组件化
*
* HTML区域知识点：
* 使用component组件中注册的template模板
* 使用v-bink的简写 - : 一个冒号；来引用变量和数据
*************************************************************************/
```