一天让你学会vue😏😏vue是渐进式javascript框架渐进式数据驱动视图(响应式) 3.组件系统 vue-

想啥呢一天想学会vue 做梦

沙雕表情.gif

vue是什么

vue是渐进式javascript框架

vue特点

渐进式
数据驱动视图(响应式) 3.组件系统

vue-cli脚手架介绍

vue-cli是vue官方提供的一个全局模块包(通过命令工具行来使用),用来快速创建一个脚手架项目

脚手架的好处

统一的项目结构(文件夹+文件+配置代码)
开发过程中的webpack各系列支持
- babel支持
- eslint约束语法风格(代码风格)
- 样式预处理器less
- vue单文件支持
提供一个开发时服务器预览代码
- 自动刷新方便快捷
- 热更新(值刷新修改部分)
基于nodejs命令行工具

vue单文件组件与组件化开发

.vue是单文件组件

后缀名是.vue
webpack会使用额外的loader来处理它
一个.vue文件就是一个组件(页面)
整个项目（页面）就是由多个组件构成的

基本组成

template+script+style

emplate : 决定模块。类似于.html
script：代码逻辑。类似于.js
style :样式

vue中指令 1. v-bind

作用:用来动态绑定标签上的属性的值 (标签上的属性值不能使用插值表达式来设置)

语法:
<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind
<元素 :属性名1="值1" :属性名2="值2"></元素>

v-bind指令有简写用法 : 冒号

语法:
<img :src="data数据">

2. v-for

作用:列表渲染, 所在标签结构, 按照数据数量, 循环生成

语法:
<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

3. v-html和v-text

作用:

v-html把值当做html解析,v-html ===> innerHTML,有样式效果
v-text把值当成普通字符串显示, v-text ===> innerText,没有样式效果

语法:
  -   v-text="vue数据变量"
  -   v-html="vue数据变量"

4. v-show和v-if

作用:控制标签的可见与不可见

语法:
-   <标签 v-show="vue变量" />
-   <标签 v-if="vue变量" />
如果vue变量的值为true，就可见，否则就不可见。

区别:

v-show 用的display:none隐藏 (频繁切换使用)
v-if 直接从DOM树上添加或移除 5.v-if,v-else-if,else 作用:模板中的选择结构
相当于分支结构 6.v-on和methods

作用:v-on给标签绑定事件,methods它是一个对象，在这个对象中定义函数

v-on语法: 
<标签 v-on:事件名="要执行的*少量代码*" >
<标签 v-on:事件名="methods中的函数" >
<标签 v-on:事件名="methods中的函数(实参)">

methods语法:
export default {
 methods: {
   函数1: function(){
   },
   函数2(){
   }
}

注意

v-on可以简写成 @。即 @事件名="methods中的函数"
事件名可以是任意合法的dom事件

7.vue基础-MVVM设计模式

解析: 模式说明：MVVM = Model + View + ViewModel

MVVM，一种软件架构模式，决定了写代码的思想和层次

● M： model数据模型 (data里定义)

● V： view视图（template里定义html页面结构）

● VM： ViewModel视图模型 (vue组件实例this)

MVVM通过数据双向绑定让数据自动地双向同步不再需要操作DOM

● V（修改视图） -> M（数据自动同步）

● M（修改数据） -> V（视图自动同步

v-on修饰符

语法:
 [@keyup.enter ](</keyup.enter >) -  监测回车按键
 [@keyup.esc ](</keyup.esc >)    -   监测返回按键

v-model修饰符

语法:
○v-model.修饰符="vue数据变量"
.number 以parseFloat转成数字类型
.trim 去除首尾空白字符
.lazy 在失去焦点时触发更改而非inupt时

v-model双向绑定

语法: v-model="data数据变量

双向数据绑定

数据变化 -> 视图自动同步
视图变化 -> 数据自动同步

一天让你学会vue😏😏

想啥呢 一天想学会vue 做梦