Vue基础--源动力

Vue简介

Vue是一套用于构建用户界面的渐进式的MVVM框架。
Vue 的核心库只关注视图层。官网地址：https://cn.vuejs.org/v2/guide/

image.png

Vue演进案例：节点内容填充

原生JS

image.png

JS模板

image.png

jQuery

image.png

Vue

image.png

Vue基础语法

1.v-cloak(cloak[kləʊk]:披风、遮盖物)
2.插值表达式 {{}}及插值表达式的问题
3.v-for循环语句
4.v-model => 双向绑定 应用于有value属性的标签，且一个标签只能使用一次
5.v-if & v-else & v-else–if & v-show 条件语句
6.v-text & v-html(和插值表达式的区别)
7.v-once => 只绑定1次
8.v-bind => 属性绑定
9.v-on => 事件修饰
10.v-pre => 跳过这个元素和它的子元素的编译过程。

Vue生命周期

image.png

image.png

image.png

Vue对象

image.png

image.png

View

Vue指令和表达式
1.v-on事件监听器
2.v-text
3.v-show
4.v-model
5.v-for
6.插值表达式{{}}

image.png

VM和Model

image.png

Vue技术栈介绍

image.png