Python VUE 基础知识
一 什么是VUE
它是一个构建用户界面的JavaScript框架，自动生成(js,css,HTML文件)
二 如何使用VUE
1. 应用vues.js
<script src="vue.js"></script>
2. 展示html
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
3. 建立vue对象
<script>
new Vue({
el:"#app", // 表示在当前这个元素内开始使用VUE
data:{
msg:''
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body> <div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div> <script>
new Vue({
el:"#app", // 表示在当前这个元素内开始使用VUE
data:{
msg:''
}
})
</script>
</body>
</html>
input输入自动显示
三 在元素当中插入值
1. {{}}：里面可以放表达式
2. 指令：是带有V-前缀(v-model="msg")的特殊属性,通过属性来操作元素
v-model: 把input的值事件绑定了,实现了数据和视图的双向绑定
分成三步：
1. 把元素的值和数据想绑定
2. 当输入内容时,数据同步发生变化,实现了视图----->到数据的驱动
3. 当改变数据时,输入内容也会发送变化,数据----->视图的驱动
v-text: 在元素当插入值
v-html: 在元素不中不仅可以插入文本,还可以插入标签:使用 <h2 v-html="hd"></h2> hd:'<input type="button" value="叫爸爸">',
v-if: 根据表达式的真假值来动态插入或移除元素(注释掉<!------>,不存在DOM元素中)
v-show: 根据表达式的真假值来隐藏(通过css隐藏dispaly:none,存在DOM元素中)和显示元素
v-for: 根据变量的值来循环渲染元素
v-on: 监听元素事件,并执行相应的操作 v-on:click='show()' 等用于 @click='show()' @只能做事件的绑定
v-bind: 绑定元素的属性来执行相应的操作 v-bind:href="url" 等同于 :href="url"
3. 对数组的操作：
push
pop
shift 删除第一个值
unshif 删除最后一个值
splice 删除中间一个值,splice(index,1)
reverse 给数组进行反转
四 在元素当中插入值
new Vue({
el: "#app", // 表示在当前这个元素内开始使用VUE
data: {
},
directives:{
focus:{ // 指令的名字
/** 当绑定的元素显示时 **/
inserted:function (tt) {
tt.focus();
}
}
}
});
五 指令示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li {
list-style: none;
}
</style>
</head>
<body> <div id="app">
<input type="text" v-model="msg" value="this is test">
<p>{{msg}}</p>
<input type="button" value="变化" @click="change">
</div> <script>
var vm = new Vue({
el: "#app", // 表示在当前这个元素内开始使用VUE
data: {
msg:'aaaa'
},
methods:{
change:function () {
this.msg=888888
}
} }); </script> </body>
</html>
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bk_1 {
background-color: dodgerblue;
width: 200px;
height: 200px;
} .bk_2 {
background-color: red;
width: 200px;
height: 200px;
}
.bk_3 { border: 2px solid black;
}
</style>
<script src="vue.js"></script>
</head>
<body> <div id="app">
<a href="http://www.qq.com" v-bind:title="msg">腾讯</a>
<div :class="bk"></div>
<div :class="bk2"></div> <div :class="{bk_2:temp}">bk2</div>
<div :class="[bk2,bk3]">1111111111</div> </div> <script>
var vm = new Vue({
el: "#app", // 表示在当前这个元素内开始使用VUE
data: {
msg: '点击进入腾讯副本',
bk:'bk_1',
bk2:'bk_2',
bk3:'bk_3',
temp:true
}
})
</script> </body>
</html>
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li {
list-style: none;
}
</style>
</head>
<body> <div id="app">
<ul>
<li v-for="item in arr">{{item}}</li>
</ul> <ul>
<li v-for="(index,item) in arr">{{index}} {{item}}</li>
</ul> <ul>
<li v-for="(index,item) in obj">{{index}} {{item}}</li>
</ul> <ul>
<li v-for="item in obj2">{{item.username}}{{item.age}}{{item.sex}}</li>
</ul> <div v-for="i in 8">
{{i}}
</div>
</div> <script>
var vm = new Vue({
el: "#app", // 表示在当前这个元素内开始使用VUE
data: {
arr: [11, 22, 33, 44, 55],
obj: {
a: '张三',
b: 'GPD',
c: 'UDP',
d: 'TCP',
e: 'VRP'
},
obj2:[{username:'alex'},{age:''},{sex:'male'}]
}
}); </script> </body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body> <div id="app">
<input type="text" v-model="msg">
<p v-if="pick">我是刘德华</p>
<p v-else>我是张学友</p>
<p v-show="temp">我是张渣辉</p>
<p v-if="ok">我是古天落</p> </div> <script>
var vm=new Vue({
el:"#app", // 表示在当前这个元素内开始使用VUE
data:{
pick:false, //不显示
temp:true,
ok:true
}
}); window.setInterval(function () {
vm.ok= !vm.ok;
},1000)
</script> </body>
</html>
v-if_show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li {
list-style: none;
}
</style>
</head>
<body> <div id="app">
<ul>
<li v-for="item in arr">{{item}}</li>
</ul> <ul>
<li v-for="(index,item) in arr">{{index}} {{item}}</li>
</ul> <ul>
<li v-for="(index,item) in obj">{{index}} {{item}}</li>
</ul> <ul>
<li v-for="item in obj2">{{item.username}}{{item.age}}{{item.sex}}</li>
</ul> <!--<input type="button" value="点我" v-on:click='show()'>-->
<input type="button" value="点我" @click='show()'> <!--<a v-bind:href="url">点击进百度</a>-->
<a :href="url">点击进百度</a> </div> <script>
var vm = new Vue({
el: "#app", // 表示在当前这个元素内开始使用VUE
data: {
arr: [11, 22, 33, 44, 55],
obj: {
a: '张三',
b: 'GPD',
c: 'UDP',
d: 'TCP',
e: 'VRP'
},
obj2:[{username:'alex'},{age:''},{sex:'male'}],
str:'I comming',
url:"http://www.qq.com"
},
methods:{
show:function () {
/**<!---如果没有定义vm --->**/
/* alert(vm.str) **/
// alert(this.str);
// 对数组进行操作
this.arr.pop()
}
}
}); </script> </body>
</html>
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li {
list-style: none;
}
</style>
</head>
<body> <div class="app2">
<h3>调查问卷</h3>
<p>苹果<input type="checkbox"></p>
<p>香蕉<input type="checkbox"></p>
<p>白菜<input type="checkbox"></p>
<p>番茄<input type="checkbox"></p>
<p>葡萄<input type="checkbox"></p>
<p>其他<input type="checkbox" @click="add()"></p>
<p v-show="qh" v-html="hd"></p>
</div> <script>
var vm = new Vue({
el: ".app2", // 表示在当前这个元素内开始使用VUE,element：el 必须这样写
data: {
hd:'<input type="text" >',
qh:false
},
methods: {
add: function (t) {
this.qh = !this.qh
}
} }); </script> </body>
</html>
动态生成input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li {
list-style: none;
}
</style>
</head>
<body> <div id="app">
<div>
<p><input type="text" placeholder="姓名" v-model="username"></p>
<p><input type="text" placeholder="年龄" v-model="age"></p>
<input type="button" value="增加" @click="add">
</div>
<div>
<table cellspacing=""> <tbody>
<tr v-for="(index,item) in arr">
<td>{{item.username}}</td>
<td>{{item.age}}</td>
<td>{{index}}</td>
<td>
<button @click="del(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div> <script>
var vm = new Vue({
el: "#app", // 表示在当前这个元素内开始使用VUE
data: {
username:'',
age:'',
arr:[]
},
methods:{
add:function () {
this.arr.push({username:this.username,age:this.age});
console.log(this.arr)
},
del:function (index) {
this.arr.splice(index,1)
}
}
}); </script> </body>
</html>
维护学生信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li {
list-style: none;
display: inline-block;
border: 1px solid dodgerblue;
height: 30px;
line-height: 30px;
width: 120px;
text-align: center;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-on:click="qh(true)">
<span >二维码登录</span>
</li>
<li v-on:click="qh(false)">
<span >邮箱登录</span>
</li>
</ul>
<div style="margin-left:80px" v-if="temp">
<img src="getUrlQrcode.jpg" alt="">
</div> <div style="margin-left:80px" v-if="!temp">
<form action="https://mail.163.com/" method="post">
<p><input type="email"></p>
<p><input type="password"></p>
<p><input type="submit" value="登录"></p>
</form>
</div>
</div>
<script>
new Vue({
el: '#box',
data: {
temp:true
},
methods:{
qh:function (t) {
console.log(t);
this.temp=t
}
}
})
</script>
</body>
</html>
tag切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li {
list-style: none;
}
.tipbox{
width: 200px;
height: 250px;
border: 1px solid dodgerblue;
text-align: center;
}
</style>
</head>
<body> <div id="app">
<div>
<p><input type="text" placeholder="姓名" v-model="username"></p>
<p><input type="text" placeholder="年龄" v-model="age"></p>
<input type="button" value="增加" @click="add">
</div>
<div>
<table cellspacing="" border="1px solid"> <tbody>
<tr v-for="(index,item) in arr">
<td>{{item.username}}</td>
<td>{{item.age}}</td>
<td>{{index}}</td>
<td><button @click="del(index)">删除</button></td>
<td><button @click="showBox(index)">编辑</button></td>
</tr>
</tbody>
</table>
</div>
<div class="tipbox" v-show="isShow">
<h3>修改信息</h3>
<p><input type="text" placeholder="姓名" v-model="m_username"></p>
<p><input type="text" placeholder="年龄" v-model="m_age"></p>
<p>
<input type="button" value="确定" @click="save()">
<input type="button" value="取消" @click="cancel()">
</p> </div>
</div> <script>
var vm = new Vue({
el: "#app", // 表示在当前这个元素内开始使用VUE
data: {
username:'',
age:'',
arr:[],
isShow:false,
m_username:'',
m_age:'',
n:0
},
methods:{
add:function () {
this.arr.push({username:this.username,age:this.age});
console.log(this.arr)
},
del:function (index) {
this.arr.splice(index,1)
},
showBox:function (index) {
this.isShow=true;
this.m_username = this.arr[index].username;
this.m_age = this.arr[index].age;
this.n=index
},
cancel:function () {
this.isShow=false;
},
save:function () {
this.arr[this.n].username=this.m_username;
this.arr[this.n].age=this.m_age;
this.isShow=false;
}
}
}); </script> </body>
</html>
维护学生信息-编辑
Python VUE 基础知识的更多相关文章
- Python数据挖掘——基础知识
Python数据挖掘——基础知识 数据挖掘又称从数据中 挖掘知识.知识提取.数据/模式分析 即为:从数据中发现知识的过程 1.数据清理 (消除噪声,删除不一致数据) 2.数据集成 (多种数据源 组合在 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- Python 面向对象基础知识
面向对象基础知识 1.什么是面向对象编程? - 以前使用函数 - 类 + 对象 2.什么是类什么是对象,又有什么关系? class 类: def 函数1(): pass def 函数2(): pass ...
- python 爬虫基础知识一
网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动的抓取万维网信息的程序或者脚本. 网络爬虫必备知识点 1. Python基础知识2. P ...
- Python：基础知识
python是一种解释型.面向对象的.带有动态语义的高级程序语言. 一.下载安装 官网下载地址:https://www.python.org/downloads 下载后执行安装文件,按照默认安装顺序安 ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- Python学习-基础知识-2
目录 Python基础知识2 一.二进制 二.文字编码-基础 为什么要有文字编码? 有哪些编码格式? 如何解决不同国家不兼容的编码格式? unicode编码格式的缺点 如何既能全球通用还可以规避uni ...
- 第2章 Python编程基础知识 第2.1节 简单的Python数据类型、变量赋值及输入输出
第三节 简单的Python数据类型.变量赋值及输入输出 Python是一门解释性语言,它的执行依赖于Python提供的执行环境,前面一章介绍了Python环境安装.WINDOWS系列Python编辑和 ...
随机推荐
- 洛谷 P3119 [USACO15JAN]草鉴定Grass Cownoisseur 解题报告
P3119 [USACO15JAN]草鉴定Grass Cownoisseur 题目描述 约翰有\(n\)块草场,编号1到\(n\),这些草场由若干条单行道相连.奶牛贝西是美味牧草的鉴赏家,她想到达尽可 ...
- HDU.2647 Reward(拓扑排序 TopSort)
HDU.2647 Reward(拓扑排序 TopSort) 题意分析 裸的拓扑排序 详解请移步 算法学习 拓扑排序(TopSort) 这道题有一点变化是要求计算最后的金钱数.最少金钱值是888,最少的 ...
- Spring中事务传播行为类型
Spring在TransactionDefinition接口中规定了7种类型的事务传播行为,它们规定了事务方法和事务方法发生嵌套调用时事务如何进行传播: 事务传播行为类型 说明 PROPAGATION ...
- Poco::Path 和 DirectoryIterator
#include<iostream>#include<typeinfo>#include<Poco/Path.h>using namespace std;using ...
- Android提示框与通知的使用
1.通知 Android 3.0以前使用的方法 NotificationManager nm = (NotificationManager) getSystemService(NOTIFICATION ...
- Ubuntu14.04-Python2.7-Virtualenv-Django1.9-MySQL完整环境配置
一.安装Ubuntu14.04LTS 1.下载了ubuntu14.04后用ultraISO写到硬盘镜像(U盘) 开机启动项改成U盘在前,安装. 清空分区,重新分配. /最少10G,我放了100G. 物 ...
- easing.js让页面动画丰富起来
jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. <scr ...
- 2017-2018-2 20179207 《网络攻防技术》python简明教程（1-10）
Python3简明教程(一) 开始python之旅 使用交互模式的 Python3解释器 简单使用 vim 编写 Python3 脚本 执行 Python3 脚本 Python3 代码风格建议 Pyt ...
- Scala环境安装设置
Scala语言可以安装在任何类UNIX或Windows系统.要安装Scala,必须先安装Java1.5或更高版本安装在计算机上. Windows上安装Scala: 步骤(1):JAVA设置: 首先,必 ...
- PHP系统编程--01.多进程与多线程
PHP中提供了一个扩展pcntl,可以利用操作系统的fork调用来实现多进程.fork调用后执行的代码将是并行的. PHP官方没有提供多线程的扩展,pecl中有一个pthreads扩展提供了多线程的特 ...