前端框架Vue------＞第三天学习（1）
2024-09-08 16:25:49
`
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>
最新文章
- css基础知识
- c++中引用和指针的区别
- git clone 出错SSL certificate problem, verify that the CA cert is OK.
- 【搭建开发环境】在 Windows XP 中参与开源项目，搭建 git 和 cygwin 开发环境
- Enter键提交表单
- 功率和dB的关系
- ASP.NET jQuery 随笔 显示RadioButtonList成员选中的内容和值
- 黑龙江省第七届大学生程序设计竞赛-Mysterious Organization
- Tiny并行计算框架之复杂演示样例
- HTML 基本语法速查
- PageRank算法初探
- 操作系统中 heap 和 stack 的区别
- LVS前奏-ARP知识回顾
- System.InvalidOperationException:“线程间操作无效: 从不是创建控件“btnSearch”的线程访问它。
- Linux—CentOS7下python开发环境配置
- 剑指offer(11)
- 2-[Mysql]- 初识sql语句
- ref out 区别
- 在Windows Server 2012启用或关闭Internet Explorer增强的安全配置
- Java - 慎用tagged class