为了方便记忆和学习,整理了一下之前学习VueJS的要点,并通过在中的代码注释来阐述知识点。
总共三课,从数据双向绑定到代码组件化。
知识点叙述在代码最下方。
需要将IDE设置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
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的简写 - : 一个冒号;来引用变量和数据
*************************************************************************/