Vue第三天---Vue 基本特性

简介: Vue第三天---Vue 基本特性

Vue 基本特性


1. 实例及选项


Vue是通过new Vue({})来声明一个实例的,在这个实例中包含了当前页面的html结构,数据和事件。Vue的实例是MVVM 模式中的ViewModel,实现了数据和视图的双向绑定;在实例化的时候可以传入一个选项对象,它包含数据、模板、 挂载元素、方法、生命周期钩子函数等选项


1.1 数据


data:在Vue实例中初始化的data中的所有数据会自动进行监听绑定,然后可以在View中使用{{}}来绑定data中的数据


data中的数据都是浅拷贝,对原来对象的修改也会改变data,从而触发更新事件

在组件的使用过程中也可以使用data

  • 组件中data的值必须是一个函数,并且返回值是原始对象;如果传给组件的data是一个原始对象,则在建立多个组件实例时,它们会共用这个data对象,修改其中一个组件实例的数据也会影响到其他组件实例的数据
  • data中的属性和props中的不能重名


1.2 方法


methods:通过methods对象定义方法,并使用v-on指令来监听DOM事件

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。


1.3 模板


选项中主要影响模板或DOM的有el和template,属性replace和template需要一起使用

(1)el(类型为字符串、DOM元素或函数):为实例提供挂载函数,通过css选择器来选择绑定的元素

(2)template(类型为字符串):默认会将其指替换挂载元素,并合并挂载元素和模板根节点的属性


1.4 watch函数


Vue提供一种通用的方式来观察和响应Vue实例上的数据变动,那就是watch属性;

watch属性是一个对象,它有两个属性:一个是键,另一个是值。键是需要观察的表达式,值是对应的回调函数,回调函数得到的参数为新指和旧值。值也可以是方法名,或者包含选项的对象。Vue实例会在实例化的时候调用$watch(),遍历watch对象的每一个属性。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch函数 demo</title>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <button @click="a--">点击使 a-1</button>
    <p>{{message}}</p>
</div>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            a:3,
            message:""
        },
        watch:{
            a:function (val,oldval){
                this.message='旧值为:'+oldval+',新值为:'+val;
            }
        }
    })
</script>
</body>
</html>


image.png

2. 模板渲染


DOM所有的逻辑应尽可能在状态的层面去进行,当状态改变时,View应该是在框架的帮助下自动更新到合理状态,而不是开发者观测到数据变化后手动选择元素去进行更新。


2.1 条件渲染


条件渲染分为v-if和v-show两种,区别在之前已经说过了,下面来看看具体的实现。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if demo</title>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <template v-if="yes">
        <h2>Vue</h2>
        <p>v-if demo</p>
    </template>
    <button @click="yes=!yes">点击使上面内容消失(展示)</button>
</div>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            yes:true
        }
    })
</script>
</body>
</html>



image.png



v-show使用起来大致一样,可以看看昨天的例子


2.2 列表渲染


列表渲染:用v-for指令根据一组数据的选项列表进行渲染。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for demo</title>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in items">{{item.text}}</li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            items:[
                {text:"name"},
                {text:"age"},
                {text:"sex"}
            ]
        }
    })
</script>
</body>
</html>


image.png


渲染之后就是


  • 标签当v-for与v-if一起使用时,v-for比v-if有更高的优先级,所以v-if分别重复运用在每一次循环中。2.3 前后端渲染对比以前学java web开发,当时还是学jsp等等,通过模板引擎将数据加载到html页面进行渲染,而现在大部分都是前后端分离,那各自有什么优点呢?前端渲染优点:
  • 业务分离:后端只需要提供接口,前端开发不需要部署后端环境,只需要通过接口获取后端传来的数据
  • 计算量转移:原本后端渲染的任务转移给了前端,服务器压力减小
  • 总结来说,前端渲染最大的优点就是前后端的业务分离,前端工程师可以专心在前端业务逻辑中,提高了项目开发效率,毕竟现在项目尽快开发上线才是最关键的。
    后端渲染优点:
  • 对浏览器要求少,不会有那么多限制(例如js限制)
  • 考虑seo,对搜索引擎友好
  • 静态资源多,所以首页加载很快,后端渲染加载完成就直接显示HTML页面了,少去了前端渲染时js渲染的时间
  • 3. extend的用法
    extend:局部注册时应用。extend创建的是一个组件构造器,而不是一个具体的组件实例,所以需要通过Vue.components()注册才能使用。因为这涉及到组件的内容,所以放在后面一起。


补充

Vue响应式原理


当创建一个Vue实例时,Vue会遍历data选项的属性,用Object.definePropery将它们转为getter/setter,并且在内部追踪相关依赖,在属性被访问或修改时通知变化。每个组件实例都有相应的watcher实例,它会在组件渲染的过程中把属性记录为依赖,然后当依赖项的setter被调用时,会通知watcher重新计算,从而使得相关联的组件得以更新。

目录
相关文章
|
29天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
183 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
629 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
138 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
290 1
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
401 17
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
226 1
|
4月前
|
JavaScript API 开发者
Vue框架中常见指令的应用概述。
通过以上的详细解析,你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一,无论是构建简单的静态网站还是复杂的单页面应用,你都会经常用到。记住,尽管Vue提供了大量预定义的指令,你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器,让编码变得更轻松、更愉快吧!
79 1
|
4月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
367 0
|
4月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
151 0

热门文章

最新文章