Vue中常用知识点demo
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Vue学习</title>
<!--引入vue.js-->
<script src="vue.js"></script>
<!--axios.js-->
<script src="axios.min.js"></script>
</head>
<body>
<!--挂载点，表示vue的作用域-->
<div id="root">
<!--通过指令显示内容-->
<h1 v-text="text"></h1><br>
<!--根据实例中的data数据显示内容-->
<h2>{{msg}}</h2><br>
<!--v-on:指令，简写@-->
<div v-on:click="alert()">点我试试</div><br>
<!--属性绑定 v-bind:指令，简写 -->
<div v-bind:title="title">这是验证属性双向绑定</div><br>
<!--数据双向绑定：v-model指令-->
<input v-model="content" style="width: 30%;"/><!--双向绑定指令v-model，输入框值改变，content的数据也会变化-->
<div>{{content}}</div><br>
<!--侦听器，监听数据发生变化-->
<div>
姓：<input v-model="xing" />
名：<input v-model="ming" />
计数：{{count}}
</div><br>
<!--初始化页面数据-->
<div>
原数据：<input v-model="oldVlue" />
</div><br>
<!--v-if指令，为真显示，为假隐藏-->
<button @click="handleClick()">点击切换</button>
<div v-if="show">这是验证v-if指令</div>
<div v-show="show">这是验证v-show指令</div><br>
<!--v-for指令，循环操作-->
<div>
v-for指令：
<ul v-for="item of list"> <!--或者 item in list-->
<li>{{item}}</li>
</ul>
</div>
<!--vue的ajax练习-->
<div>
<input type="text" :name="users.getname" v-model="users.getname" placeholder="姓名">
<input type="text" :age="users.getage" v-model="users.getage" placeholder="年龄">
<button @click="sendGetajax">发送get请求</button>
</div><br>
<div>
<input type="text" :name="users.postname" v-model="users.postname" placeholder="姓名">
<input type="text" :age="users.postage" v-model="users.postage" placeholder="年龄">
<button @click="sendPostajax">发送post请求</button>
</div><br>
</div>
</body>
<script>
//创建一个vue实例
new Vue({
el: "#root", //vue实例和id="root"的dom做了绑定
//模板template，挂载点里边的内容
template: '', //一般不这么写，直接放在页面中
data: { //vue实例中的所有数据
msg: '大家好，vue大法好',
text: '这是h1内容',
title: '这是div的title属性里的内容', //用的比较少
content: '这是数据单项绑定显示的文本值',
xing: '',
ming: '',
count: 0,
show: true,
list: [
'联想', '百度', '腾讯', '阿里'
],
oldVlue: '',
//ajax测试数据
users: {
getname: '',
getage: '',
postname: '',
postage: '',
}
},
mounted () {
this.oldVlue = '初始化页面数据'; //页面初始化完成后执行的操作，一般编辑时使
},
methods: { //事件写在这里边
alert: function(){
alert('试试就试试');
},
//v-if,v-show进行验证
handleClick: function(){
this.show = !this.show;
},
//get提交
sendGetajax: function () {
//2.get通过params选项
axios.get(`http://www.baidu.com`,{
params:{
name:this.users.getname,
age:this.users.getname
}
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error);
});
},
//post请求
sendPostajax: function(){
console.log(this.users.postage);
axios.post('/post.php', {
pname: this.users.postname,
page: this.users.postage
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
},
//侦听器watch
watch: {
xing: function(){
this.count++;
},
//这种可以带参数，得到新老数据
ming: function(aa, bb){
console.log(aa);
console.log(bb);
this.count++;
},
},
});
</script>
</html>
Vue中常用知识点demo的更多相关文章
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- 前端Vue中常用rules校验规则
前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function valid ...
- Vue中常用的几种传值方式
Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...
- VUE中常用的十大过滤器
在vue的学习过程中,我发现过滤器是一个很好用的工具,过滤器(Filters)来渲染数据是一种很有趣的方式.过滤器不能替代Vue中的methods.computed或者watch,不改变真正的data ...
- vue中常用的指令
1. v-textv-text主要用来更新textContent,可以等同于JS的text属性. <span v-text="msg"></span> 2. ...
- Qt中常用知识点
1:QRegExp 正则表达式 QRegExp regExp("[a-zA-Z][1-9][0-9]{0,2}"); xxx->setValidator(new QRegEx ...
- ES6工作中常用知识点
好久不动笔了 第一个知识点:import 和 export import导入模块.export导出模块 //全部导入 import people from './example' //有一种特殊情况, ...
- Js中常用知识点（typeof、instanceof、动态属性、变量作用域）
1.Js中各类型的常量表示形式:Number:number String:string Object:objec 2.typeof运算符在Js中的使用:用于判断某一对象是何种类型,返回值 ...
- Vue中常用的三种传值方式
父传子 父子组件的关系可以总结为prop向下传递,事件向上传递.父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息. 父组件: <template> <div> ...
随机推荐
- 10-5使用OpenType字体
http://www.missyuan.com/viewthread.php?tid=350835&extra=&page=1 现在当我们通过Photoshop.Word或其他应用程序 ...
- Spring - 环境安装
安装IDEA的非Community版本和Java的包之后就可以用Java来HelloWorld了. 然后去这个链接:https://github.com/spring-guides/gs-rest-s ...
- linux 网络带宽和延时测试
Linux下使用qperf命令来测试网络带宽和网络延迟 参考文章:https://access.redhat.com/solutions/2122681 若是没有安装qperf命令,请使用yum 安装 ...
- 搭建vue-cli
https://www.cnblogs.com/wisewrong/p/8570309.html https://www.jianshu.com/p/1ee1c410dc67
- mybatis 集合in的用法
<!-- 查询 设备List 的 某天,并且小于当前小时的,耗电 记录 --> <select id="findByDeviceIdInAndBetweenRecor ...
- Lucene4.2源码解析之fdt和fdx文件的读写——fdx文件存储一个个的Block，每个Block管理着一批Chunk，通过docID读取到document需要完成Segment、Block、Chunk、document四级查询，引入了LZ4算法对fdt的chunk docs进行了实时压缩/解压
前言 通常在搜索打分完毕后,IndexSearcher会返回一个docID序列,但是仅仅有docID我们是无法看到存储在索引中的document,这时候就需要通过docID来得到完整Document信 ...
- IDEA使用（03）_git撤回(已经commit未push的)操作
1.问题来源 日常工作中会遇到 commit 到本地仓库的代码,因为一些原因,需要撤销后再提交到本地,或者需要整合多次 commit,然后 push 到远程仓库. 2.IDEA解决方案 I.在idea ...
- css 文本省略号设置
本文推荐2种方法. 1. css tip:只兼容chrome内核的浏览器.ff不支持. .box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow ...
- BAT文件运行时不显示命令窗口的方法
可以编一个VBS文件调用BAT文件,使运行BAT文件时不显示命令窗口. 新建一个记事本文件,保存为abc.vbs,在文件中加入如下代码: Set shell = Wscript.createobjec ...
- 将bat文件注册成为系统服务
第一章 注册系统服务准备 1.1 注册系统服务前准备 1.1.1 涉及第三方软件 Bat_To_Exe_Converter.exe (将*.bat文件转化为可执行*.exe文件) insts ...