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编辑和 ...
随机推荐
- 51nod 1296 有限制的排列（DP）
对于一个i,如果要比邻居大,那么i比i-1大,i+1比i小,比邻居小同理.设v[i]=0表示i与i-1的关系无限制,v[i]=1表示a[i-1]>a[i],v[i]=2表示a[i-1]<a ...
- 被引用的外部JS存在window.onload时，判断当前页面是否已存在window.onload，并进行相应处理
如果页面a.html引用了b.js,b.js里的方法需要在页面资源加载完成后执行,即在window.onload里执行:这时如果a.html里使用了window.onload方法,b.js就不能重复调 ...
- JavaScript是没有域的限制
baidu的通行证处理都是在二级域名passport.baidu.com中处理的,但是baidu很多地方登录都好像是用ajax处理的,他是怎么做的呢?研究了一下,发现一个小技巧. 在http://zh ...
- ubuntu10.04 安装gcc4.1.2
After a bunch of searching to get gcc-4.1 & g++-4.1 in Ubuntu 10.10 (maverick), I found easy wor ...
- Leetcode 94. 二叉树的中序遍历
1.问题描述 给定一个二叉树,返回它的中序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,3,2] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 2.解法一 ...
- 如何更有效使用 Rational AppScan 扫描大型网站，第 1 部分: 工作原理及技术分析
Rational AppScan 工作原理 Rational AppScan(简称 AppScan)其实是一个产品家族,包括众多的应用安全扫描产品,从开发阶段的源代码扫描的 AppScan sourc ...
- 常见一个新的maven web工程
使用Eclipse创建一个新的maven Web应用工程,步骤如下: 1.在Elipse中新建一个maven工程,点击next: 2.选择工程路径(此处使用默认的),点击next: 3.选择Arche ...
- 【JAVA】Pattern和Matcher
ZZ: Java正则表达式:Pattern类和Matcher类 一.捕获组的概念 捕获组可以通过从左到右计算其开括号来编号,编号是从1 开始的.例如,在表达式 ((A)(B(C)))中,存在四个这样的 ...
- 状压DP的总结
状压dp的标志 ①数据小 ②通过题目所给出的条件以后得到的特征集合小 一:CF259div2 D: 题目大意:保证b[i]中每个数互质,给出a[i],然后求1~n的abs(a[i]-b[i])最小.a ...
- bzoj 2038 莫队入门
http://www.lydsy.com/JudgeOnline/problem.php?id=2038 题意:多次询问区间内取出两个相同颜色的种类数 思路:由于不是在线更新,那么可以进行离线查询,而 ...