vue 比 js的强大
//js写留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用原生js实现留言板功能</title>
<style type="text/css">
div{
background-color: #dae3ff;
}
</style>
</head>
<body>
**知识点**<br>
1. 获取元素<br>
2. 创建元素<br>
3. 添加元素<br>
<h4>留言板</h4>
<div id="app">
<input type="text">
<button>提交</button>
<ul></ul>
</div>
<script>
let input=document.querySelector("input");
let button=document.querySelector("button");
let ul=document.querySelector("ul"); button.onclick=function () {
//创建新元素
let li=document.createElement('li'); //添加元素
li.innerHTML=input.value; //将新元素添加到页面中
//ul.appendChild(li);
//判断当前列表是否为空，空则直接加，非空则插到前面
if(ul.children.length===0){
ul.appendChild(li);
}else{
let first=ul.firstElementChild;
ul.insertBefore(li,first);
} //清空input的内容
input.value=''; }
</script>
</body>
</html> //Vue写留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用Vue快速制作一个留言板</title>
<style type="text/css">
div{
background-color: #dae3ff;
}
</style>
</head>
<body>
**知识点**<br>
1. 获取元素<br>
2. 创建元素<br>
3. 添加元素<br>
<h4>留言板</h4>
<div id="app">
<input type="text" v-model="input" placeholder="输入">
<button @click="fill">提交</button>
<ul>
<li v-for="item in li">{{item}}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
let vm=new Vue({
el:'#app',
data:{
input:'',
li:[]
},
methods:{
fill:function () {
//this.li.push(this.input);//push添加 //头部添加
this.li.unshift(this.input); //清空留言区
this.input=''; }
}
});
</script>
</body>
</html>
vue 比 js的强大的更多相关文章
- fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
- vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined
我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...
- JS的强大
JS很强大,对于网页设计者来说,会用JS真的很重要. 学好我的linux,和数据结构.
- 基于Node.js的强大爬虫 能直接发布抓取的文章哦
基于Node.js的强大爬虫 能直接发布抓取的文章哦 基于Node.js的强大爬虫能直接发布抓取的文章哦!本爬虫源码基于WTFPL协议,感兴趣的小伙伴们可以参考一下 一.环境配置 1)搞一台服务器,什 ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- 在线jquery.min.js、vue.min.js引用
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js ...
- vue.eslintrc.js常用配置
vue.eslintrc.js module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/esse ...
- js插件---强大的图片裁剪Cropper
js插件---强大的图片裁剪Cropper 一.总结 一句话总结:官网或者github里面的文档或者demo才是真的详细 使用的话找到图片裁剪后的base64数据,然后这个数据可下载可传递到服务器 1 ...
- vue3.0 vue.config.js 配置实战
今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...
随机推荐
- Python高级特性-迭代器和生成器
迭代器 Python中可迭代对象(iterable)通俗指可直接作用与For循环的数据对象,如Python中的集合数据类型,字符串(str),列表(list),元组(tuple),集合(set),字典 ...
- Kubernetes 二进制部署
目录 1.基础环境 2.部署DNS 3.准备自签证书 4.部署Docker环境 5.私有仓库Harbor部署 6.部署Master节点 6.1.部署Etcd集群 6.2.部署kube-apiserve ...
- Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(八)之Polymorphism
Polymorphism is the third essential feature of an object-oriented programming language,after data ab ...
- Daily Scrum 12/14/2015
Progress: Dong&Minlong: 基于Oxford Speech API成功实现语音输入的功能,但由于服务器存在访问次数的限制(每分钟6次),所以暂不准备将此功能加入ALPHA版 ...
- 我用Python一键保存了半佛老师所有的骚气表情包
本文首发于公众号「Python知识圈」,如需转载,请在公众号联系作者授权. 2019年发现两个有意思而且内容比较硬核的公众号.都是同一个人运营的,我们都叫他半佛老师,现实中的职业是风控,公众号内容涉及 ...
- C - Highways poj1751最小生成树
The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has a very poor system of p ...
- POJ 跳蚤
Z城市居住着很多只跳蚤.在Z城市周六生活频道有一个娱乐节目.一只跳蚤将被请上一个高空钢丝的正中央.钢丝很长,可以看作是无限长.节目主持人会给该跳蚤发一张卡片.卡片上写有N+1个自然数.其中最后一个是M ...
- Unity 游戏框架搭建 2019 (三十、三十一) MenuItem 显示顺序问题 & 类的提取
在上一篇,我们得出了两个核心的学习思路: 根据问题去学习,并收集. 主动学习,并思考适用场景. 我们今天解决 MenuItem 显示顺序问题. 目前 MenuItem 显示如图所示: 我们来看下 Me ...
- [PHP] 生成二维码（两种方法）
方法一:(调用google二维码接口,本人测试网不好,不好用!) <?php //1.封装生成二维码图片的函数(方法) /** *利用google api生成二维码图片 * $content:二 ...
- search（7）- elastic4s-search-filter模式
现在我们可以开始探讨ES的核心环节:搜索search了.search又分filter,query两种模式.filter模式即筛选模式:将符合筛选条件的记录作为结果找出来.query模式则分两个步骤:先 ...