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> ...
随机推荐
- ID生成算法(二)
上一篇文章介绍了一种用雪花算法生成GUID的方法,下面介绍里外一种生成GUID并导出为.txt文件的方法: 话不多少 show you the code ! <!DOCTYPE html> ...
- C++生成DM数据点导入DM
在c++编写正弦曲线点的代码,源代码如下: //想要使用内置的π,此句必不可少! #define _USE_MATH_DEFINES #include<iostream> #include ...
- 【java反射】
反射之中包含了一个「反」字,所以想要解释反射就必须先从「正」开始解释. 一般情况下,我们使用某个类时必定知道它是什么类,是用来做什么的.于是我们直接对这个类进行实例化,之后使用这个类对象进行操作. A ...
- TortoiseGit的安装与配置
1. 简介 TortoiseGit是Tortoise提供的Git版本可视化工具,简化Git记忆命令行的过程,将命令行可视化. 2. 下载 官网:https://tortoisegit.org/down ...
- 纯CSS画三角形（带边框）
实例一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- Mac 中使用phpstorm 修改文件提示"only read",只读权限
在终端中执行命令: 给max系统用户liutao赋予整个项目文件权限,即可成功 sudo chown -R liutao /Users/liutao/Desktop/vagrant/newprojec ...
- MATLAB中图像的基本操作
MATLAB中图像的基本操作 1.读取.显示图片 MATLAB中提供了immread()与imshow()函数读取和显示图片.其中读取函数imread()原型: imread: A = imread( ...
- VUE判断可用对象是否为空
方法一: JSON.stringify(formmanage_listVue.updataObj)=='{}' var data = {}; var b = (JSON.stringify(data) ...
- 最新解决Chrome(版本76.0.3809.100) “请停用以开发者模式运行的扩展程序”的方法
最新解决Chrome(版本76.0.3809.100) “请停用以开发者模式运行的扩展程序”的方法 最近在远景论坛上发现了最新的解决Chrome浏览器提示:请停用以开发者模式运行的扩展程序的问题.该方 ...
- 002-demo业务说明
一.demo基本业务功能介绍 只是demo,无完整功能,不断重构系统,以搭建 高可扩展性.高性能.大数据.高并发.分布式的系统架构 客户管理.商品管理.购物车.订单管理.库存管理 二.基本数据字典 说 ...