前端框架Vue------＞第三天学习（1）
`
10 、组件基础
10.1 、什么是组件
件是可复用的Vue实例，说白了就是一组可以重复使用的模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Vue组件</title>
</head>
<body style="background-color: pink">
<div id="app">
<ul>
<my-componenet-list v-for="item in items" v-bind:item="item"></my-componenet-list>
</ul>
</div>
<script type="text/javascript">
//定义组件
Vue.component("my-componenet-list",{
props:["item"],
template:'<li>{{item}}</li>'
})
var app = new Vue({
el:"#app",
data:{
items:["篮球","足球","羽毛球"]
}
})
</script>
</body>
</html>
11、什么是计算属性
计算属性是用来声明式的描述一个值依赖了其他的值。当你在模板里把数据绑定到一个计算属性上时，Vue会在其依赖的任何值导致该计算属性改变时更新DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script
<title>计算属性</title>
</head>
<body>
<div id="app">
<p>当前时间方法：{{getCurrentTime()}}</p>
<p>当前时间属性：{{getCurrentTime1}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
methods:{
getCurrentTime:function () {
return Date.now();
}
},
//计算属性
computed:{
getCurrentTime1:function () {
return Date.now();
}
}
})
</script>
</body>
</html>
前端框架Vue------＞第三天学习（1）的更多相关文章
- 前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 可能是目前最完整的前端框架 Vue.js 全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...
- 前端框架 Vue 初探
一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- 从后端到前端之Vue（三）小结以及一颗真实的大树
上一篇写了一下tab,下面整理一下用过的知识点,本想按照官网的文档,整理一下可以更清晰,结果也许是我的方法不对吧,总之更模糊了. 按照官网文档的顺序整理到了表单输入绑定之前,因为之前大致也就只涉及到这 ...
- 前端框架VUE——安装及初始化
本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...
- 前端框架vue学习笔记：环境搭建
兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...
- 今日前端框架Vue学习笔记
在线网页网址http://xingxunxinxi.com/StudentCourse/first.html代码 界面
随机推荐
- 【web自动化测试】Playwright快速入门，5分钟上手
我喜欢Playwright! 这是微软开源的一款非常强大的自动化工具,再过几年,他很有可能取代Selenium在浏览器自动化的通知地位.使用过一段时间,我没有找到很好的中文资料可以参考,导致很多问题无 ...
- Rider调试ASP.NET Core时报thread not gc-safe的解决方法
新建了一个ASP.NET Core 5.0的Web API项目,当使用断点调试Host.CreateDefaultBuilder(args)时,进入该函数后查看中间变量的值,报错Evaluatio ...
- Web 前端实战：JQ 实现树形控件
前言 这是一篇个人练习 Web 前端各种常见的控件.组件的实战系列文章.本篇文章将介绍个人通过 JQuery + 无序列表 + CSS 动画完成一个简易的树形控件. 最终实现的效果是: 这样结构比较复 ...
- virtio_net设备的校验和问题
我们来看一个virtio_net设备的校验和配置: [root@10 ~]# ethtool -K eth0 tx-checksumming on //caq:大写的K用来调整feature [roo ...
- 网站制作工具之EditPlus的使用
这里分享网站制作教程所使用到的软件,我个人开发使用的是EditPlus和Dreamweaver这两款软件.在百度搜索一下这两个软件,安装好后就可以使用了. EditPlus的使用方法 EditPlus ...
- vivo前端智能化实践：机器学习在自动网页布局中的应用
作者:vivo 互联网前端团队- Su Ning 在设计稿转网页中运用基于self-attention机制设计的机器学习模型进行设计稿的布局,能够结合dom节点的上下文得出合理的方案. 一.背景 切图 ...
- 前端Long类型丢失精度问题
有时候后端向前端传输Long类型,数字过长会出现丢失精度的问题 比如后端传来的是这样一个长数字串 那么前端的弹窗显示的是 ![](https://img2022.cnblogs.com/blog/22 ...
- K8S_三种Port区别总结
nodePort: 外部流量访问K8S集群中Service入口的一种方式 比如外部用户要访问k8s集群中的一个Web应用,那么我们可以配置对应service的type=NodePort,nodePor ...
- QT学习（三）
首先整理一下编码的方法.对于一个待解决的问题,首先应该将大问题分解成小问题,将小问题划分为小小问题... 然后再进行类的抽象,将划分成的问题和类进行对应.然后再对划分的小..问题进行具体的处理分析,划 ...
- 创建一个k8s私有仓库-harbor
〇.前言 这一步应该是在搭建k8s之前做好,注意了奥 一.安装docker和docker-compose 1.下载docker-compose的最新版本 # 建议那种网上冲浪下载!,下载下来记得命名成 ...