vue基础指令学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--定义挂载vue对象的div-->
<div id="app">
<todo-list></todo-list>
</div>
<!--通过cdn的方式引入vue库-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义一个todo-item组件
Vue.component('todo-item', {
// props属性，定义子组件可以接收的参数以及类型和默认值，通过属性绑定的方式就可以传入参数，
// 下文的:title="item.title" :del="item.del"
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
// data属性用于定义组件内部的参数，通过一个函数返回，无论被其他地方引用多少次，可以保证内部数据独立
data: function () {
return {
}
},
// template属性定义组件模板代码
// v-if指令，条件控制语句，根据其条件表达式返回的boolean值，判定当前标签的行为
// v-else指令
// v-show 控制标签是否显示
// @click ，@语法糖，是v-on指令的简写，意思是进行实践绑定，这里的意思当检测到click事件时，调用handleClick函数
template: `
<li>
<a v-if="!del" >{{title}}</a>
<a v-else style="text-decoration: line-through">{{title}}</a>
<button v-show="!del" @click="handleClick">删除</button>
</li>
`,
// 定义当前组件的方法
methods: {
handleClick(){
console.log("点击删除按钮")
// this.$emit 方法，会触发父组件的一个事件，这个方法一般是子组件向父组件传递数据时使用
// 当前场景是 触发父组件的delete方法，并传递一个参数，多个参数的话用逗号隔开就行
// 这里的delete事件，是自定义的事件，上文的click事件时内置的事件
this.$emit('delete', this.title)
}
}
})
// 定义一个TODOlist组件
Vue.component('todo-list', {
// 模板代码
// @delete 绑定delete事件触发时执行的方法
// v-for 循环指令
// :title 冒号是v-bind指令的简写，用于属性绑定
template: `
<ul>
<todo-item @delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del"></todo-item>
</ul>
`,
props: {
},
methods: {
handleDelete(val){
console.log("点击" + val)
}
},
data: function () {
return {
list: [
{
title: '课程1',
del: false
},
{
title: '课程2',
del: true
}
]
}
}
})
let vm = new Vue({
// 挂载
el: "#app",
data: {
// title: String,
// del: {
// type: Boolean,
// default: false
// }
}
})
</script>
</body>
</html>
欢迎大家去 我的博客 瞅瞅，里面有更多关于测试实战的内容哦！！
vue基础指令学习的更多相关文章
- Vue 基础指令学习
学习Vue的一些总结,第一次写博客,文笔实在是很差 不过我会不断写的. <template> <!--只能有一个根节点 --> <div> <pre> ...
- [前端学习]vue的指令学习记录 vu-if | text | for | on | model | bind | pre
vue的指令学习记录 vue-if | text | for | on | model - 目录 vue的指令学习记录 vue-if | text | for | on | model ... 预备 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- DB2的基础指令 学习笔记
=======DB2基础指令======= 1.打开数据库db2 connect to 数据库名;2.查看数据库中有哪些表db2 list tables ;3.查看数据库中的表结构db2 descri ...
- Vue基础知识学习（后端）
### Vue学习(后端) Vue安装 -引入文件安装,直接在官网下载vue.js引入项目中 -直接引用CDN -NPM安装(构建大型应用使用,在这不用) -命令行工具(构建大型单页应用,在这不用) ...
- 1 --- Vue 基础指令
1.vue 指令 1.v-model 主要在表单中使用,文本框.teaxare.单选.下拉 等 2.v-text 文本渲染 类似{{}} 3.v-show 控制Dom显示隐藏 displ ...
- vue 基础核心学习
<html> <body> <div id="app"> {{ message }} </div> <div id=" ...
- Vue --- 基础指令
目录 表单指令 条件指令 循环指令 分隔符(了解) 过滤器 计算属性 监听属性 冒泡排序 表单指令 使用方法: v-model 数据双向绑定 v-model绑定的变量可以影响表单标签的值,反过来表单标 ...
- Vue.js 第1章 Vue常用指令学习
今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...
随机推荐
- 为什么 generator 忽略第一次 next 调用的参数值呢？
首先要理解几个基本概念. 执行生成器不会执行生成器函数体的代码,只是获得一个遍历器 一旦调用 next,函数体就开始执行,一旦遇到 yield 就返回执行结果,暂停执行 第二次 next 的参数会作为 ...
- K8S实战-构建Django项目-03-使用共享存储
上篇博文,发布之后,正好跟着双十一,不知道大家剁手了没~~.好啦,言归正传先声明一下,每周1,3,5更新教程,大家如果想要了解更多的教程可以重温一下之前的教程或者,关注崔格拉斯 公众号,大家想要源码的 ...
- 对话|首席研究员童欣：从长远看，AR的应用范围远比VR广泛
童欣博士现任微软亚洲研究院网络图形组首席研究员.1993年毕业于浙江大学计算机系,获工学学士学位:1996年获浙江大学计算机系硕士学位:1999年获清华大学计算机系博士学位,同年加入微软亚洲研究院. ...
- C++走向远洋——20（项目一，三角形，类）
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:sanjiaoxing.cpp * 作者:常轩 * 微信公众号: ...
- Pandorabox固件路由器上申请Let's Encrypt证书，为内网里的多个web服务提供SSL支持
对于家中宽带有公网IP的用户,有时我们需要将路由器内部网络的某些web服务通过端口转发暴露到外网(例如NAS远程访问),但HTTP是明文传输,有被监听的风险:如果在NAS上使用自签名证书,再端口转发, ...
- Centos 7 安装Mysql8 主从同步复制
环境:Centos 7 软件:Mysql8 安装方式:Yum 1.从官网下载最新yum 源对应Cenots 7 版本安装: [root@DataNode-03 ~]# yum -y localinst ...
- Maven使用和配置
Maven使用和配置 一.maven安装和概念 maven安装 maven编译(compile) 执行测试用例(test) maven打包(package) maven依赖管理 1.maven安装 官 ...
- 后渗透阶段之基于MSF的路由转发
目录 反弹MSF类型的Shell 添加内网路由 MSF的跳板功能是MSF框架中自带的一个路由转发功能,其实现过程就是MSF框架在已经获取的Meterpreter Shell的基础上添加一条去往“内网” ...
- 7-3 jmu-python-回文数判断（5位数字） (10 分)
本题目要求输入一个5位自然数n,如果n的各位数字反向排列所得的自然数与n相等,则输出‘yes’,否则输出‘no’. 输入格式: 13531 输出格式: yes 输入样例1: 13531 输出样例1: ...
- YiGo表单建立
做一个请假单表单(下图是最后的成品图) 表单的类型 实体表单 1.可存储 2.可编辑 虚拟表单 视图(不可存储数据,只有显示功能) 不可编辑 字典 报表 备注 :一张表单是实体还是虚拟取决于其数据对象 ...