Skip to content

liyingxuan/vue-tutorial

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3681dd7 · Oct 16, 2017

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue2.0教程 - Vue.js

基于Vue CLI构建的Vue项目教程

简书教程

1. 说明

为了方便记忆和学习,整理了一下之前学习VueJS的要点,并通过在中的代码注释来阐述知识点。
总共三课,从数据双向绑定到代码组件化。
知识点叙述在代码最下方。

需要将IDE设置EcmaScript 6语法

2. 目录结构
- 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:

 /**************************************************************************
 * 【第一课时知识点】
 *
 * 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:

/**************************************************************************
 * 【第二课时知识点】
 *
 * JS区域知识点:
 * 无新知识点
 *
 * HTML区域知识点:
 * v-bind 用于响应式的更新HTML特性
 * v-bind:class 增加/删除/更新HTML元素的class;这里展示了两种写法:{}和[];
 *     注意:这里新增的class会填写在HTML元素本身class的后面,有可能会覆盖和影响之前的样式。
 *************************************************************************/

lesson-3:

/**************************************************************************
 * 【第三课时知识点】
 *
 * JS区域知识点:
 * Vue组件component
 * 引用template模板
 * 在component中注册template模板、定义传入的属性数据props、变量和数据data、方法methods
 * HTML代码组件化
 *
 * HTML区域知识点:
 * 使用component组件中注册的template模板
 * 使用v-bink的简写 - : 一个冒号;来引用变量和数据
 *************************************************************************/

About

Vue JS 2.4+ tutorial

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published