Vue.js基础总结

最新推荐文章于 2024-07-24 13:53:49 发布
最新推荐文章于 2024-07-24 13:53:49 发布
阅读量1k 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37643322/article/details/108988570
版权

1.认识Vuejs

Vue是一个渐进式框架, 什么是渐进式的呢?
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
Vue有很多特点和Web开发中常见的高级功能
解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM
一句话总结：用数据绑定的思想，vue可以简单写单个页面，也可以写一个大的前端系统，也可以做手机app的界面。

（1）Vue初体验
在这里插入图片描述

（2）Vue中的MVVM

在这里插入图片描述
View层
视图层前端开发中, 通常就是DOM层主要的作用是给用户展示各种信息
Model层
数据层数据可能是我们固定的死数据, 更多的是来自我们的服务器, 从网络上请求下来的数据
VueModel层
视图模型层视图模型层是View和Model沟通的桥梁一方面它实现了 Data binding, 也就是数据绑定, 将Model的改变实时的反应到了View中另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

（3）Vue实例传入的options
在这里插入图片描述
（4）Vue生命周期
在这里插入图片描述

2.插值指令

- Mustache

(1)插值表达式 {{}}
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。

无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会自动更新。
在这里插入图片描述

- v-once

该指令后面不需要跟任何表达 该指令表示元素只渲染一次，不会随着数据的改变而改变。

<h2 v-once>{{message}}</h2>

- v-html

解析数据中的html代码，渲染到页面中

<h2 v-html="url"></h2>

- v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中, 不同的是 v-text 是写在属性中 v-text通常情况下，接收一个string类型

<h2 v-text="text"></h2>

- v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

<h2 v-pre>{{message}}</h2>

- v-cloak

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。 v-cloak指令和CSS 规则一起用的时候，能够解决插值表达式闪烁的问题（即：可以隐藏未编译的标签直到实例准备完毕）

<!-- 在vue解析之前, div中有一个属性v-cloak
在vue解析之后, div中没有一个属性v-cloak -->
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

- v-text和v-html的区别

用v-html指令插值
在这里插入图片描述
效果：
在这里插入图片描述
用v-text指令插值
将上图的v-html改成v-text，其他不变。
在这里插入图片描述
在这里插入图片描述
区别：
v-html 输出标签中的内容
v-text输出结果为带标签 的

  • 总结
    （1）Mustache: {{}}语法, 可以写变量/逻辑表达式/计算值…
    （2）v-once : 元素只渲染一次，不会随着数据的改变而改变。
    （3）v-html="" : 解析数据中的html代码，渲染到页面中
    （4）v-text=“msg”: 写在属性当中, 将数据显示在界面中
    （5）v-pre: 原文输出, 显示原本的Mustache语法
    （6）v-cloak : 一般配合CSS规则一起使用, 够解决插值表达式闪烁的问题

3.v-bind绑定属性

- v-bind介绍

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。但是，除了内容需要动态来决定外，某些属性们也希望动态来绑定。
作用：可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和class：比如动态绑定a元素的href属性；比如动态绑定img元素的src属性
这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写： :
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)

  • v-bind绑定class
    绑定class有两种方式：对象语法和数组语法

（1）对象语法

对象语法的含义是:class后面跟的是一个对象。

 <!-- 用法一：直接通过{}绑定一个类 -->
<h2 :class="{'active': isActive}">Hello World</h2>

 <!-- 用法二：也可以通过判断，传入多个值 -->
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

 <!-- 用法三：和普通的类同时存在，并不冲突 -->
<!--注：如果isActive和isLine都为true，那么会有title/active/line三个类-->
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

 <!-- 用法四：如果过于复杂，可以放在一个methods或者computed中 -->
 <!--注：classes是一个计算属性 -->
<h2 class="title" :class="classes">Hello World</h2>

（2）数组语法

数组语法的含义是:class后面跟的是一个数组。

 <!-- 1. ['active','news'] 当字符串使用 -->
<h2 class="title" :class="['active','news']">{{message}}</h2>
 <!-- [active, new] 当变量使用 -->
<h2 class="title" :class="[active,news]">{{message}}</h2>
 <!-- 3. 函数返回值使用 -->
<h2 class="title" :class="getClasses()">{{message}}</h2>
  • v-bind绑定style
    我们可以利用v-bind:style来绑定一些CSS内联样式，有两种方式对象语法和数组语法

（1）对象语法

style后面跟的是一个对象类型，对象的key是css属性名，对象的value是具体赋的值, 可以来自data中的属性

:style="{color: currentColor, fontSize: fontSize + 'px'}"

（2）数组语法

style后面跟的是一个数组类型, 多个值以 , 分隔

<div v-bind:style="[baseStyles, fontColor]"></div>
/* js */
baseStyle: {background: 'lime'},
fontSize: {fontSize: '80px'}

4.computed计算属性

  • 基本概念
    （1）计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题
    （2）计算属性是基于它们的响应式依赖进行缓存的
    （3）在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
    比如我们有firstName和lastName两个变量，我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
    将上面代码转换成计算属性：
/* html */ 
<h2>{{fullNmae}}</h2>

/* js */
computed: {
    fullNmae: function () {
      return this.firstNmae + ' ' + this.lastNmae;
    }
  }
  • 计算属性的setter和getter
    每个计算属性都包含一个getter和一个setter
    • 在上面的例子中，我们只是使用getter来读取。
    • 在某些情况下，你也可以提供一个setter方法（不常用）。
    • 在需要写setter的时候，代码如下
      在这里插入图片描述
  • 计算属性的缓存
    methods和computed区别
    methods里面的数据不管发没发生变化, 只要调用了都会执行函数(有的时候数据没发生变化我们不希望调用函数)
    computed计算属性会进行缓存, 如果数据没发生变化,函数只会被调用一次(数据发生变化才会调用函数)
    总结:
    methods不管数据发没发生变化都会调用函数
    computed只有在依赖数据发生变化时才回调函数
    优点：
    computed 计算属性，它的性能是比较高的，只有当他依赖的属性发生变化时，它才会重新请求计算，否则使用上一次的缓存值。所以如果一个庞大的数据项目，需要有缓存的，就可以用这种方法。可以减少请求次数，达到优化。

5.事件监听指令

在前端开发中，我们需要经常和用户交互，这个时候我们就必须监听用户的发生时间，比如点击, 拖拽事件等等
v-on 介绍
作用: 绑定事件监听器
缩写: @

（1）v-on参数

  • 当methods中定义方法, 以供@click调用时, 需要注意参数问题
  • 情况一: 如果该方法不需要额外参数, 方法后()可以省略
    没有传入参数, 接收形参时默认会将原生事件event参数传递进去
  • 情况二: 如果需要同时传入某个参数, 同时需要event时, 可以通过$event传入事件

（2）v-on修饰符

v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下
在这里插入图片描述
（3）v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
在这里插入图片描述
在这里插入图片描述
效果：当你点“点我”时，就弹出“你点到我了”。

  • 代码解读
    事件写在Vue实例的methods对象里
    v-on可以简写为：@
  • 改变插值
    在这里插入图片描述
    效果：点击“我是标题”，变成“哈哈哈”。

6.条件渲染指令

（1）vi-f与v-else-if与v-else

  • Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
<h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>
  • 逻辑较多不建议在模板中使用v-if-else-if

（2）复用元素渲染问题

一个问题: 涉及到了Vue底层, 虚拟DOM virtual DOM 点击切换表单后,input的value值并没有被清空,为什么?
引出： 当实现点击按钮切换input表单时, 我们输入上的value, 点击按钮切换表单时会发现value值还存在, 但是input元素确实切换了, 这是因为什么呢?

<span v-if="isUser">
      <label for="user">用户名</label>
      <input type="text" placeholder="用户名" id="user" key="user">
</span>
<span v-else>
      <label for="email">邮箱</label>
      <input type="text" placeholder="邮箱" id="email" key="email">
</span>
<button @click="isUser=!isUser">切换类型</button>
<script> 
const app = new Vue({
  el: '#app',
  data: {
     isUser: true
  }
})
</script>

原因:

  • 1.这是因为Vue在进行DOM渲染时, 出于性能考虑, 会尽可能服复用已经存在的元素, 而不是创建新的元素
  • 2.上面的案例中, Vue内部会进行对比发现两部分都相似只会替换属性, 不会给你创建全新的元素
  • 3.上面 if 的 input不再使用, 直接作为 else 的 input来使用

解决方案：

  • 1.如果我们不希望 Vue出现类似重复利用的问题, 可以给对应的input添加 key
  • 2.并且保证要们需要的key不同, 这样 vue就会创建一个全新 input元素

（3）v-show

v-show的用法和v-if非常相似,也用于决定一个元素是否渲染

  • v-if 和 v-show对比
    v-if 当条件为false时,压根不会有对应的元素在DOM中
    v-show 当条件为false时, 仅仅是将元素的 display 属性设置 none 而已
    开发中如何选择呢?
    当需要在显示与隐藏之间切换很频繁时,使用v-show
    当只有一次切换时,通过使用v-if
<h2 v-show="isShow">{{message}}</h2>
  • v-if 和 v-show的区别

第一种情况，显示的时候
在这里插入图片描述
在这里插入图片描述
以上代码，我通过在data的showOrhide的ture来控制显示，明显看出两者都显示在dom结构中。很容易理解！

第二种情况，隐藏时候
在这里插入图片描述
在这里插入图片描述
以上代码，我将data的showOrhide的ture改为false来控制隐藏，可是，我们看dom结构，通过v-if的那个div已经在dom中移除了。而v-show的div则是通过display：none来达到隐藏。但dom结构依然存在。

7.循环遍历指令

（1）v-for遍历数组

作用：根据数组中的元素遍历指定模板内容生成内容。
语法: v-for="(item, index) in items"

<ul>
    <!-- item: 是每一项元素 index: 下标/索引 -->
    <li v-for="(item, index) in name">
      {{index+1}}.{{item}}
    </li>
 </ul>

（2）v-for遍历对象

作用: 遍历对象
语法: v-for="(value, key, index) in items"

<ul>
    <!-- value:属性值  key:属性名  index:下标/索引 -->
    <li v-for="(value, key, index) in info">
      {{index+1}}.{{value}}
    </li>
 </ul>

（3）Vue中Key属性

  • 官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。
  • 为什么需要这个key属性呢(了解) ?
    这个其实和Vue的虚拟DOM的Diff算法有关系。
  • 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
    我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
  • 所以我们需要使用key来给每个节点做一个唯一标识
    Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点
  • key的作用主要是为了高效的更新虚拟DOM
    在这里插入图片描述
    使用v-for更新已渲染的元素列表时,默认用就地复用策略; 如果列表数据修改的时候, 它会根据key值去判断某个值是否修改, 如果修改, 则重新渲染这一项, 否则复用之前的元素; 我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;

（4）数组响应式方法

因为Vue是响应式的, 所以当数据发生变化时, Vue会自动检测数据变化, 视图会对应的更新
Vue中包含了一组观察数组编译的方法, 使它们改变数组也会触发更新视图

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

（5）Vue.set修改响应式数据

Vue.set(vm.items, indexOftem, newValue)
vm.$set(vm.items ,indexOften,newValue)
参数1: 要修改的数组/对象
参数2: 要设置的索引/添加的属性名
参数3: 设置的值

（6）v-if 和 v-for

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着v-if 将分别重复运行于每个v-for循环中。避免 v-if 和 v-for用在一起
原因：
如果使用了 if 判断, 每次渲染在Vue内部都会遍历整个列表, 不论判断条件是否发生了变化
使用计算属性的好处：

  • 1.过滤后的列表只会在users数组发生相关变化时才被重新运算,过滤更高效。
  • 2.使用v-for="user in activeusers"之后,我们在渲染
  • 3.的时候只遍历活跃用户,渲染更高效。
  • 4.解耦渲染层的逻辑,可维护性(对逻辑的更改和扩展)更强。

8.表单绑定v-model

（1）基本概念

  • Vue中使用v-model指令来实现表单元素和数据的双向绑定
    数据与模板是相互影响的, 一方发生变化, 另一方立即做出更新

  • 引出:
    1.在之前的案例, 我们通过v-bind,给标签绑定了data对象里的name属性。data中的name的值发生改变时, 标签里的内容会自动更新。
    2.可现在要做的是: 在标签里修改内容, 要求data中的name的属性值自动更新。从而实现双向数据绑定。该怎么做呢? 这就可以利用v-model这个属性。
    在这里插入图片描述
    区别:

  • v-bind: 只能实现数据的单向绑定, 从M自动绑定到v。

  • v-model: 只有v-model才能实现双向数据绑定。注意, v-model后面不需要跟冒号
    注意：
    v-model只能运用在表单元素中, 或者用于自定义组件。常见的表单元素包括: input(radio,text,address,email…) ,select, checkbox, textarea.

（2）v-model原理

v-model其实是一个语法糖, 他背后本质是包含两个操作

  • v-bind绑定一个value属性
  • v-on指令绑定当前元素的input事件
<input type="text" v-model="message">
<!-- 等同于下面的代码 -->
<input type="text" :value="message" @input="message = $event.target.value">

（3）表单绑定v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定
案例解析:

  • 当我们在数据框输入内容时
  • 因为input中v-model绑定了message, 所以会实时将输入的内容传递给message, message发生变化
  • 当message发生变化时, 因为上面我们使用Mustanche语法, 将message的值插入到DOM中, 所以DOM会发生响应式的改变
  • 所以, 通过v-model实现了双向的绑定
    当然, 我们可以将v-model用于textarea元素
    表单绑定v-model案例：

在这里插入图片描述
textarea绑定v-model案例：
在这里插入图片描述
（4）表单中其它类型绑定v-model

表单中其它类型, 绑定v-model
在这里插入图片描述
v-model: radio
在这里插入图片描述
v-model: checkbox
在这里插入图片描述
v-model: select
在这里插入图片描述
（5）值绑定

动态的给value赋值而已

  • 我们前面之前写的value中的值, 都是在定义input中直接给定的
  • 但是真是开发中, 这些input中的value值可能是从服务器中获取, 然后定义的
  • 所以我们可以通过v-bind:value动态的给value绑定值
    值绑定：
    在这里插入图片描述
    （6）v-model的修饰符
    在这里插入图片描述

9.Vue常用特性

（1）自定义指令

为何需要自定义指令：内置指令不满足需求

Vue.directive 注册全局指令

自定义指令语法(获取焦点)

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()// 获取元素的焦点
  }
})
// 使用自定义指令
<input type="text" v-focus>

带参数的自定义指令

Vue.directive('color', {
      // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      // el 为当前自定义指令的DOM元素  
      // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
// 使用带参数自定义指令
<input type="text" v-color='msg'>

自定义局部指令

  • 局部指令，需要定义在 directives 的选项 用法和全局用法一样
  • 局部指令只能在当前组件里面使用
  • 当全局指令和局部指令同名时以局部指令为准
directives: {
    focus: {
        inserted: function(el) {
            el.focus();
        }
    }
}

（2）侦听器 watch

侦听器的应用场景

  • 数据变化时执行异步或开销较大的操作
    在这里插入图片描述
    注意: watch 中的属性 一定是data 中 已经存在的数据
// 当data中的: firstName属性或lastNames属性改变时, 会自动触发对应的watch
watch: {
     firstName(val) { // val: 表示变化后的值
       this.fullName = val + ' ' + this.lastName;
     },
     lastName(val) {
       this.fullName = this.firstName + ' ' + val;
     }
  }

（3）过滤器
概念: Vue.js允许我们自定义过滤器,可被用作一些常见的文本格式化/处理。

  • 过滤器可以用在两个地方: mustache插值表达式、v-bind表达式。
  • 过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示。
  • 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本
    在这里插入图片描述
  • 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的
  • 支持级联操作(对前一个过滤的数据再次进行过滤处理)

自定义全局过滤器

我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话,每一个Vue的对象实例(每一个VM实例)都可以拿到这个过滤器。它接收两个参数: 过滤器的名称、过滤器函数。

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :class="msg | upper"></div>
<!-- 带参数过滤 -->
<div>{{date | format('yyyy-MM-dd')}}</div>
<script>
  // 1.全局过滤器
    Vue.filter('upper', (val) => {
        // val就是要处理的数据
      return val.charAt(0).toUpperCase() + val.slice(1);
    })
    // 2.处理带参数过滤器
    Vue.filter('format', (date, arg) => {
      // arg: 传递的参数
      if (arg === 'yyyy-MM-dd') {
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      }
    })
</script>

自定义私有过滤器

私有过滤器: 在某一个vue对象内部定义的过滤器称之为私有过滤器
这种过滤器只有在当前vue对象的el指定的监管区域有用。

<!-- 管道符前面的price: 要把price这段文本进行过滤 -->
<!-- 管道符后面的showPrice: 是通过showPrice这个过滤器来进行操作 -->
<td>{{price | showPrice}}</td>
<script>
const app = new Vue({
  filters: {
    showPrice(price) {
      return '￥' + price.toFixed(2);
    }
  }
})
</script>

（4）生命周期

事物从出生到死亡的过程

  • Vue实例从创建到销毁的过程,这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

主要阶段

  • 挂载(初始化相关属性)
    （1）beforeCreate
    （2）created
    （3）beforeMount
    （4）mounted

  • 更新(元素或组建的变更操作)
    （1）beforeUpdate
    （2）updated

  • 销毁(销毁相关属性)
    （1）beforeDestroy
    （2）destroyed
    在这里插入图片描述

FSL-在学习
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue.js 课件 ppt
11-03
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪创建，以其简洁的API和高效的响应式数据绑定受到广大开发者喜爱。Vue.js 的设计目标是使开发过程更加简单、直观，尤其适合构建用户界面。本课件集合了Vue.js的...
Vue.js基础知识汇总
10-22
Vue.js 是一款轻量级的前端JavaScript框架，专注于MVVM（Model-View-ViewModel）模式的ViewModel层。Vue.js 的核心理念是通过双向数据绑定连接视图层和模型层，使得数据的变化能够实时反映到视图上，反之亦然。Vue....
Vue.js心得总结
m0_74812260的博客
12-18 2210
​Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
Vue.js知识归纳与总结
jh15005767557的博客
12-23 1730
Vue.js 是一款流行的前端 JavaScript 框架，它被设计用于构建单页面应用程序 (SPA)。Vue.js 提供了数据绑定、组件化、路由管理、状态管理等一系列功能，使得开发人员可以使用简单的 API 快速构建高效、可维护、易扩展的 Web 应用程序。通过课程的学习，我深入了解了Vue.js 的核心概念、特性和应用。我了解了何使用Vue.js构建单额应用，以及如何使用Vue Router和Vuex等工具进行开发。这些知识使我Vue.js有了更深入的理解和掌握。我学习了许多实用的开发技巧和最佳实践。
vue.js基础知识总结
niuduzi123的博客
12-20 864
Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。其核心功能包括数据绑定、指令、组件化开发、生命周期、计算属性、钩子函数和路由管理。数据绑定让数据与 DOM 元素关联，指令控制模板渲染，组件化开发提高代码复用性。生命周期管理 Vue 实例的各个阶段，计算属性根据数据变化自动更新视图，钩子函数在特定时机执行特定操作。路由管理则方便构建单页面应用，实现不同页面之间的跳转。这些特性共同助力开发者高效构建丰富、交互丰富的应用。
Vue.js学习总结
qq_39629852的博客
12-28 1590
通过学习Vue.js，我确信自己即将走上大型项目开发的正确道路上，并且我对未来在开发领域中的职业发展充满了信心。学习是一项艰苦的工作，每次解决一个难题，都会有无比的成就感、满足感，仿佛征服了一个又一个的困难。Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架(React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex)Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架!
vue.js学习总结和心得体会
a2840561372的博客
12-28 581
同时，Vue.js还提供了许多方便的指令和组件，可以快速地构建复杂的界面。而且，Vue.js还提供了一套完整的生命周期钩子函数，可以在不同的阶段执行相应的操作，使得我们能够更好地控制应用程序的行为。总的来说，Vue.js是一个非常优秀的前端框架，我在使用它的过程中获得了很多收获。我相信，在未来的项目中，我还会继续使用和深入学习Vue.js，以提升自己的前端开发能力。Vue.js本身提供了丰富的功能，但是对于一些特定的需求，可能需要额外的插件来满足。在学习Vue.js的过程中，我获得了许多宝贵的经验和体会。
Vue.js 快速入门实战
热门推荐
努力是为了站在万人之中，成为别人的光
06-12 2万+
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
vue.js课程总结
m0_74431616的博客
01-03 948
Vue.js是一种用于构建用户界面的渐进式JavaScript框架。它专注于视图层，并且易于集成到现有项目中。Vue.js采用了组件化的开发方式，使得构建复杂的用户界面变得简单和可维护。响应式数据绑定：Vue.js使用了双向数据绑定的概念，通过将数据和DOM元素进行绑定，当数据发生变化时，DOM会自动更新，反之亦然。组件化开发：Vue.js允许将页面拆分为多个可重用的组件，每个组件都有自己的模板、样式和逻辑。这种组件化的开发方式使得代码更加模块化、可维护性更高。虚拟DOM。
vue.js前端框架学习总结
bcxcccc的博客
12-05 929
什么是Vue.jsVue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue.js优点体积小，压缩后33kb更高的运行效率双向数据绑定，简化Dom操作生态丰富，学习成本低从MVC模式到MVVM模式MVC模式MVP模式。
Vue.js 基础
weixin_58227247的博客
02-21 2047
​ 在使用了 Vue 的页面中，Vue 会，从而页面的结构。 入手Vue ​ 1.想让Vue工作，首先就是创建一个Vue实例，并且要传入一个配置对象 ​ 2.打造 Vue的模板语法 插值语法 用于解析标签体内容 {{ xxx }} xxx 是js表达式,可以直接读取到 data 中的所有属性 ​ 指令语法 用于解析标签(包括:标签属性 标签体内容 绑定事件…) v-bind:href=‘xxx’ 或 简写为 :href=‘xxx’ ,其中 xxx 同样是js表达式,并且可以直接读取到
Vue.js基础知识
lp-Strive的博客
04-30 2764
一、Vue.js是什么？ 它是一套用于构建用户界面的渐进式框架。其设计为自底向上逐层应用。Vue只关心视图层。 二、声明式的渲染 1、 Vue.js的核心是采用简洁的模板语法来声明式地将数据渲染到DOM系统 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 输出：Hello Vu...
vue.js教程.pdf
11-19
vue.js教程.pdf 本资源摘要信息中，我们将详细介绍 Vue.js 的基本概念、安装方法、使用方式、MVVM 模式、数据绑定、组件系统、指令和过滤器等...通过本资源摘要信息，您可以快速了解 Vue.js 的基础知识和使用方式。
Vue.js 开发教程全套
06-10
对于初学者来说，掌握 Vue.js 的基础知识至关重要。 - **官方文档**: Vue.js 的官方文档是学习 Vue.js 的最佳起点。它覆盖了 Vue.js 的所有核心概念、API 以及最佳实践，非常适合新手入门。 - **在线教程**: 互联网...
HTML+VUE.js抽卡小游戏
05-27
HTML（HyperText Markup Language）是网页内容的基础结构，而Vue.js则是一个轻量级的JavaScript框架，用于构建用户界面。在这个"HTML+Vue.js抽卡小游戏"中，我们将探讨如何利用这两者来创建一个交互式的抽卡游戏。 ...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 763
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1071
本文介绍了电子签名、图片合成、及预览功能
Vue系列面试题
qq_44186810的博客
07-23 934
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
Vue 状态管理 & Vue CLI
最新发布
yolo
07-24 860
1、状态管理 2、集中状态管理 2.1 Vuex 2.1.1 Vuex核心概念 2.1.2 Vuex Store实例 2.1.3 Vuex Getter 2.1.4 Vuex Mutation 2.1.4 Vuex Actions 2.1.4 Vuex Module 2.2 Pinia 2.2.1功能增强 3、Vuex 实现原理 4、Pinia 实现原理 5、CLI 5.1 实现
Vue.js框架深度探索：从基础到高级特性
Vue.js组件的属性和方法是构建可复用代码的基础。你可以定义数据属性（data properties）来存储组件的状态，并创建方法（methods）来处理交互逻辑。例如，你可以创建一个属性来存储用户输入的数据，然后定义一个方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值