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> ...
随机推荐
- 三十三、DNS资源记录类型和请求流程
DNS分布均衡(Load balance)的实现 在上级数据库中写两条记录(同一个名字对应对个IP时),DNS会自动将请求基于轮循方式,分给每个DNS服务器 例如: 第一次将请求给第一个DNS,第二次 ...
- redis消息提醒设计方案细则
----需求明细: 现有多个角色,角色间需要交互,内容分为申请,审核通过,拒绝,解除合作.每个角色进入自己后台显示查看其他角色的未读消息个数,点击进入显示所有发送来的内容.最开始只存储未读个数,并不知 ...
- Hibernate 生成策略和缓存策略
主键生成策略 一.主键分类 1. 自然主键 主键本身就是表中的一个字段,实体中一个具体的属性,对象本身唯一的特性 比如:创建一个学生表:姓名.年龄.身份证号(自然主键) 2. 代理主键 主键本身不是表 ...
- jQuery之编写插件
一.学习插件编写背景 作为一名前端人员,应该注重前端复用性及组件化,更应该考虑前端的性能优化,做到代码简洁有序,不冗余.特别是在大型团队中,如果一个团队中存在多个功能相似的组件,举个栗子,拿分页组件举 ...
- IDEA导航光标回退和前进快捷键失效
工作中突然发现IDEA里的Ctrl+Alt+Left/Right失效了,即导航光标的回退和前进,影响看代码的效率. 用Windows Hotkey Explorer查看,发现是被igfxHK.exe进 ...
- Linux内存使用情况以及内存泄露情况
1. 内存使用情况分析 http://www.360doc.com/content/15/1118/13/17283_514054063.shtml https://www.linuxidc.com/ ...
- 【Oracle】创建用户及设定权限
; grant create session to ufo; grant create tablespace to ufo; grant create table to ufo; grant drop ...
- python开发-实现redis中的发布订阅功能
Python3学习(二十七):python实现Redis的订阅与发布(sub-pub机制) 先介绍一下redis的pub/sub功能: Pub/Sub功能(means Publish, Subscri ...
- 数据库连接池Flask-SQLAlchemy中多线程安全的问题
使用flask-sqlalchemy写代码码到一半,突然想到,Session是否是线程安全的?于是上官方文档,答案是否! 那问题来了,怎么破?因为它会牵涉到多线程情况下,调用rollback导致的不可 ...
- 使用Docker快速搭建Tensorflow开发环境
当我刚开始学习使用scikit-learn时,总是会出现各种各样的包依赖问题,兜兜转转了一遍才全部安装好,现在的机器学习算法开发者大都使用tensorflow.pytorch来实现自己的想法,但依然会 ...