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> ...
随机推荐
- Java Heap dump文件分析工具jhat简介
jhat 是Java堆分析工具(Java heap Analyzes Tool). 在JDK6u7之后成为标配. 使用该命令需要有一定的Java开发经验,官方不对此工具提供技术支持和客户服务. 用法: ...
- jquery报变量没定义错误的原因
该变量定义的范围:不在使用的方法中:
- 【零基础】使用Tensorflow实现神经网络
一.序言 前面已经逐步从单神经元慢慢“爬”到了神经网络并把常见的优化都逐个解析了,再往前走就是一些实际应用问题,所以在开始实际应用之前还得把“框架”翻出来,因为后面要做的工作需要我们将精力集中在业务而 ...
- MySQL实时监听——EPX 原创： 奕X 贝壳产品技术 今天
MySQL实时监听——EPX 原创: 奕X 贝壳产品技术 今天
- cin中的注意事项
猎豹网校C++ Primer学习笔记 - ostartech - 博客园 https://www.cnblogs.com/wxl845235800/p/11396323.html 在VS中使用cin& ...
- word excel 未响应
前几天笔记本突然出现word 一打开就未响应的情况,导致完全无法使用.今天发现 excel 也出现了这种情况.今天终于下定决心解决这个问题. 百度上搜索了很多,找到了很多解决方案.总结如下. 一.禁用 ...
- Tomcat重启Shell脚本
--测试通过 vim restart_tomcat.sh#!/bin/bash# Filename: restart_tomcat.sh# Description: Restart tomcat# D ...
- linux修改配置文件解决mysql中文乱码和指定数据库存储引擎
如题,mysql数据库的中文显示乱码: 先看下原来数据库里的字符编码: mysql> show variables like '%character_set%'; +-------------- ...
- Yarn概述——FAST, RELIABLE, AND SECURE DEPENDENCY MANAGEMENT
官网链接:https://yarnpkg.com/lang/en/ 特性 Ultra Fast. Yarn caches every package it downloads so it never ...
- LeetCode_83. Remove Duplicates from Sorted List
83. Remove Duplicates from Sorted List Easy Given a sorted linked list, delete all duplicates such t ...