Vue0829-CSDN博客

本文链接：https://blog.csdn.net/weixin_45035677/article/details/126651051

一、Vue基础

1.1介绍

Vue.js 构建用户界面的渐进式框架

核心：视图层

易于上手，便于与第三方库或既有项目整合

易用、灵活、高效

1.2声明式渲染和组件化

组件：复用、结构清晰、便于比对

1.3MVVM模式

避免直接操作DOM，降低DOM操作的复杂性

二、vue基础

2.1vue入门

2.2使用vue实现

第一步：引入vue库文件

<script src="./js/vue.js"></script>

第二步：根容器，js对象转为真实的html后，在放在网页的什么位置中

挂载点可以写多个，但是在工作中一般只有1个

<div id="app">
//第四步：使用
//模板语法 插值表达式 mustcache模板名称【小胡子语法】
//title它就是在vue实例化配置data属性
中的数据
<h3>{{ title }}</h3>
//v-model，语法糖
<input type="text" v-model="title">
</div>

第三步：实例化vue

const vm= new vue({
    //vue处理完成数据展示在页面中的挂载点dom
    el:"#app",
    //vue2中唯一一个地方可以把data写成对象的地方，就是在实例化vue类时声明vue要渲染的数据
     data: {
        title: 'hello vue'
      }
})

2.3为什么vue使用虚拟DOM

提高性能跨平台

2.4安装

Vue Devtools

edge专用->获取

vetur

2.5

区别：Object.defuneProperty劫持某一个属性无法对新增数组进行代理获取、修改

Proxy 劫持对象属性更多，

for in对象

nodeType 1元素 3 文本

attributes伪类 name value

...转数组

2.6Diff对比

patch主要做4个判断

①没有新节点，直接触发旧节点，进行销毁。

②没有旧节点，不需要比较，直接新建

③旧节点和新节点一样时，直接调用 patchVnode 去处理这两个节点

数组不能放太深，影响性能

Object.freeze({id:1 })冻结

Object.isFrozen 检查对象是否冻结

return {}.toString

判断是不是一个纯对象

三、模板语法

3.1插值表达式

{{变量}}

第1步：引入vue库文件

<script src="./js/vue.js"></script>

第2步：挂载点

<div id="app">
</div>

vue模板的表达式为 {{ 变量 }}

表达式中不能定义变量或函数，也不可以写if条件或循环

绑定变量

<div>{{ title }}</div>

进行计算 vue模板中不太建议在里面写运算

<div>{{1+1}}</div>

调用函数或方法

<div>{{sum()}}</div>

调用js内置方法不太推荐

<div>{{ '电饭锅是'.substr(0,3) }}</div>

三目运算

<div>{{ age<20?'未成年':'成年' }}</div>

第三步实例化：vue

<script>
      const vm = new Vue({
        el: '#app',
        data: {
          age: 18,
          title: 'hello vue',
          // 函数可以写在data中的，但是不太建议
          // data中的数据都会被劫持，但是函数是没有必须劫持的
          // vue为了提升性能，新增一个配置选项，用于定义函数方法method，它不会被劫持
          // sum
        },
        methods: {
          sum() {
            return 1 + 2
          }
        }
      })
</script>

??空值判断

?.可选

!. 非空

3.2指令

操作DOM

表达式，不会对于标签时行解决输出，它会转义后输出，为了安全

<div>{{title}}</div>

解析字符串中的html标签，解析输出,一般用于在后台添加的富文本内容，在前台显示所用解决闪现

<div v-html="title"></div>

转义输出，为了解决早期没有使用工程化时，直接script引入vue，进行使用时有花括号闪现问题

一般用不到，在单文件vue中，不会有这样的闪现问题，所以用不到

<div v-text='title'></div>

vue中提供一个专门用于解决闪现问题的指令 v-cloak

v-html或v-text它们能够解决闪现，但是有的时候，一些项目在前期没有用它，这时候如果全部去修改，工程量有点大，可以用此指令

<div v-cloak>{{title}}</div>

v-pre对于数据,只绑定一次性能优化

<div v-once>{{title}}</div>

条件元素

v-if 如果条件不成立，则不创建或删除已创建元素，初始化它的性能更高，如果频繁切换性能低一些

v-show 如果条件不成立，通过样式来隐藏，初始化它的性能低一些，如果频繁切换则性能更好一些

<div v-if="age<12">v-if 未成年</div>
<div v-show="age<12">v-show 未成年</div>

v-for

v-on

v-bind

v-model

v-cloak解决闪现

v-pre

性能优化，提升性能

只有静态才可以用

v-once

只渲染元素和组件一次，之后元素和组件

对于数据，只绑定一次，性能优化

高阶函数一个函数返回一个函数

把函数当作一个参数传进另一个函数

事件

<div id="app">
    <h3>{{age}}</h3>
    //点击按钮，让AGE自增
    <button v-on:click="setAge">+++</button>
     <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        age: 11
      },
      methods: {
        setAge() {
          this.age++
        }
      }
    })
  </script>