前端框架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代码 界面
随机推荐
- MySQL 连接超时：报错SQLSTATE[HY000] [2002] Connection timed out
在网上找了一堆,结果全部是错的 后来,我明白了其实是设置问题. 当你的代码部署到服务器里的时候,你的mysql 的host 值 应该为 127.0.0.1 而不是 你的服务器ip 不然就会报错. 其实 ...
- SpringBoot整合Redis实现常用功能
SpringBoot整合Redis实现常用功能 建议大小伙们,在写业务的时候,提前画好流程图,思路会清晰很多. 文末有解决缓存穿透和击穿的通用工具类. 1 登陆功能 我想,登陆功能是每个项目必备的功能 ...
- [网鼎杯2018]Unfinish-1|SQL注入|二次注入
1.进入题目之后只有一个登录界面,检查源代码信息并没有发现有用的信息,尝试万能密码登录也不行,结果如下: 2.进行目录扫描,发现了注册界面:register.php,结果如下: 3.那就访问注册界面, ...
- 乘风破浪，遇见最佳跨平台跨终端框架.Net Core/.Net生态 - 官方扩展集锦(Microsoft.Extensions on Nuget)
什么是Microsoft.Extensions .NET Platform Extensions是一套.Net官方的API集合,提供了一些常用的编程模式和实用工具,例如依赖项注入.日志记录.缓存.Ho ...
- ss 显示unix 域 的socket 缓冲区不正确
一个unix 域socket,平时我们用ss -auxp 来查看是否有数据在内核没有到用户态, [root@localhost unix]# ss -auxp |grep -i server.o u_ ...
- 【Java】学习路径59-多个连接的服务器端
ServerSocket可以对接多个Socket对象,利用这点,就可以实现:一台服务器对多个客户端. import java.io.IOException; import java.net.*; pu ...
- 第一百篇:JS异步
好家伙,打工人要打工,博客会更新的没有以前频繁了 芜湖,一百篇了,这篇写一个比较难的异步(其实并不难理解,主要是为promise铺垫) 老样子,先补点基础: 1.进程 来吧,新华字典 大 ...
- Mac_mysql_密码重置
1 通过Mac 的设置 stop mysql 2 跳过权限认证 // 进入数据库指令文件 cd /usr/local/mysql/bin // 跳过权限认证 sudo ./mysqld_safe -- ...
- 使用Kali的wifite和aircrack-ng联合破解wifi密码
准备材料 有kali的虚拟机,这里推荐VM 一个超级便宜的USB无线网卡,很便宜三十几块钱 一个靠谱的WPA密码字典(关于字典文件,我这里整理了好多,可联系我.QQ:1213456261) 1.运行k ...
- Jsoup爬取网上数据完成翻译
Jsoup使用 首先进入Jsoup下载jar包 然后打开IDEA创建一个普通的java项目 在项目结构里创建 lib 目录 但是我们这样并不能直接进行使用 需要添加路径 右键点击 然后添加路径 选择模 ...