VUE2.x

一. VUE介绍

介绍 — Vue.js

概念

        一个动态构建用户界面的 渐进式 JS框架. 遵循MVVM模式

        主流三大框架

                VUE React Angular

        动态构建用户界面（数据 -> 界面）

        渐进式（自底向上慢慢改进）

        MVVM模式（面试）

                实现 数据 与 视图 的双向绑定

                Model（数据模型）

                View（视图）

                VM（View Model控制器）

链接

        官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js

        V2文档 介绍 — Vue.js

        V3文档 简介 | Vue.js

优点

        Angular的模板语法和数据绑定

        React的组件化和虚拟DOM

特点

        声明式渲染（声明式地描述最终输出的 HTML 和 JavaScript 状态间的关系）

                变量：保存数据

                函数：操作数据

        响应式（即 数据驱动）

                在数据改变时响应式地更新 DOM

                数据改变时，DOM视图会随之更改

        组件化开发（拼积木）

二. 快速开始

安装配置

        卸载后要手动删掉nodemodules包

        新建目录

        初始化 npm init -y

        安装2.x版本

                在线版 CDN

                下载版 npm i vue@2 vue - npm

vue三步曲

        1. 引入vue.js

        2. 编写页面容器

        3. 创建vue实例

                this：方法的this指向对应的实例

                        看this指向谁 = 看实例是谁

                        button.click 指向button

                        vm.handleClick 指向 vm

三、VUE实例

VUE选项

        vue3 组合式api

        vue2 选项式api（构造函数选项）

                el

                data 定义数据

                methods 方法（改变数据）

        Vue构造函数创建vue实例

                1. data中声明的变量会挂载到vm实例上，作为vm的属性

                2. methods中声明的函数会挂载到vm实例上，作为vm的方法

四、MVVM模型

MVVM

        数据，视图，ViewModel

        核心思想：双向绑定

                数据改变 影响 视图

                视图改变 影响 数据

五、模板语法

简介

vm.$mount("#app")

        编译模板，挂载（使用模板生成的DOM，替换旧的DOM节点）

innerHtml 与 outerHtml

模板：由vue解析的HTML字符串内容

        如何确定模板（理解）

                1. el选项：指定容器作为模板

                2. template选项：指定模板

                3. render函数选项（渲染函数）：指定模板

                优先级：render函数 > template > el

        vue工作流程（理解）

                1. 编译模板

                2. 挂载

分类 （插值 指令）

插值语法

        主要用于文本节点

        语法 {{}}

        插值表达式

                1. 是个js表达式

                2. 写什么（vm实例上的属性和方法）

指定语法

        语法 v-

        属性节点

        指令表达式

with语法

        人为改变this指向

        this指向window，但可以直接获取obj中的成员，不需要this.成员

        with (obj) { }

const obj = { name: 'xiaoming' }
 
function test() {
  with (obj) {
    console.log(name)   // 'xiaoming'
  }
}
test()

常用指令

单向绑定        v-bind :

样式绑定         :class='' :style=''

双向绑定         v-model

原始html        v-html="content"

方法绑定         v-on:click='' @click=''

条件渲染         v-if='布尔值/变量'

列表渲染         v-for='(value, index) in obj'         :key='唯一值(id)'

属性绑定 ：

        将DOM元素的属性和vue中的状态绑定

语法

   v-bind:href="url"

        简写（常用）:href="url"

        指令（属性名）=指令表达式（属性值）

                1. 可以是基本数据 30 '30' true

                2. 可以是vm上的属性和方法

                3. 有效的 js表达式

事件绑定 @

语法

        v-on:click='handleClick'

        简写 @事件名='表达式'

表达式

        不加括号（70%）

        加括号（20%）目的：为了传参

        加括号，使用$event（10%）

                目的：传参同时传事件对象

                @click="add(3, $event)"
                add(n, e) { }

注意点

        1. methods 中不要用箭头函数（不绑定this）（普通函数中this指向vm）

        2. methosd 定义的函数不能和 data的变量同名。所以加个handle或get以避免同名

事件修饰符 可连写

        .stop 阻止冒泡

        .prevent 阻止默认行为

        .once 事件只可执行一次

按键修饰符

        .enter

        .tab

        .delete (捕获“删除”和“退格”键)

        .esc

        .space

        .up

        .down

        .left

        .right

        键盘的左右 与鼠标的左右

        系统按键 .ctrl .alt .shift .meta

        .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

        鼠标 .left .right .middle

双向绑定 v-model

语法

        v-model="变量"

修饰符

        .lazy

                类似防抖

                数据全部输入完（失焦）后，改变一次

        .number

                转换为数字类型

        .trim

                去除首尾空格

应用 （表单）🟢

1. 文本：text, password

        绑定value属性

        监听input事件

2. 单选/复选框

        绑定checked属性

        监听input事件

3. 下拉框

        监听change事件

        绑定option对应的value属性

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      name: '',
      password: '',
      age: 0,
      gender: '男',
      hobbies: ['sleep'], // 多选框跟一个数组绑定
      city: '',
      sign: '1111',
      test: 'abc',
    },
  })
script>

 
<div id="app">
  用户名: <input type="text" v-model.trim.lazy="name" /> <br />
  密码: <input type="password" v-model="password" /> <br />
  年龄: <input type="text" v-model.number="age" /> <br />
 
  
  性别: <input type="radio" id="male" v-model="gender" value="男" />
  <label for="male">男label>
  <input type="radio" id="female" v-model="gender" value="女" />
  <label for="female">女label> <br />
  爱好:
  <input type="checkbox" id="eat" v-model="hobbies" value="eat" />
  <label for="eat">吃饭label>
  <input type="checkbox" id="sleep" v-model="hobbies" value="sleep" />
  <label for="sleep">睡觉label> <br />
  城市:
  
  <select v-model="city">
    
    <option value="" disabled>请选择option>
    <option value="wuhan">武汉option>
    <option value="beijing">北京option>
    <option value="shanghai">上海option>
  select>
  <br />
  个人签名: <textarea v-model="sign">textarea>
div>

注意点

1. 单选

        同一级单选按钮，绑定同一个属性名

        通过value指定绑定的属性值

2. 复选

        单个复选框 绑定一个布尔值

        多个复选框（一组） 绑定同一个属性名（数组或集合set）

        通过value指定绑定的属性值

3. 下拉框

        没有指定option的value，使用option中的文本作属性值

        指定option的value，使用value做属性值

        常用法： value="" diabled

        通过变量值与value匹配来指定默认选项

4. 文本域

        使用v-model实现双向绑定

        不能使用{{}}语法 ：单向（数据 -> 视图）

条件渲染 v-if v-show

定义

        当指令表达式的返回值为真，渲染DOM

语法

        v-if v-else-if v-else

                有更高切换开销

                需要实现逻辑时用

        v-show

                有更高初始渲染开销

                需要频繁切换显示时用

注意事项

• v-if 可以跟 v-else，v-else-if 配合使用
• 如果同时切换渲染多个元素，可在外层使用