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编辑和 ...
随机推荐
- bzoj2083: [Poi2010]Intelligence test（二分+vector）
只是记录一下vector的用法 v.push_back(x)加入x v.pop_back()弹出最后一个元素 v[x]=v.back(),v.pop_back()删除x,但是会打乱vector顺序 v ...
- weakself的另一种写法
在不久前看AFNetworking的源码时候发现了这么一句: 1 2 3 4 5 6 7 8 9 10 // 不知道这行代码的使用场景的同学你该去自习看看ARC的注意事项和Block的使用了 // A ...
- Codeforces Round #343 (Div. 2) A
A. Far Relative’s Birthday Cake time limit per test 1 second memory limit per test 256 megabytes inp ...
- stout代码分析之六：Stopwatch
在进行性能测试时,经常需要计算某个函数执行的时长.stout中的Stopwatch类可实现纳秒精度的计时. Stopwatch内部使用timespec记录开始和技术时间. timeval和time ...
- HDU 1950 LIS(nlogn)
Bridging signals Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- Windows常用shell命令大全（转）
[Windows常用shell命令大全] 基于鼠标操作的后果就是OS界面外观发生改变, 就得多花学习成本.更主要的是基于界面引导Path与命令行直达速度是难以比拟的.另外Geek很大一部分是键盘控,而 ...
- 【C++对象模型】第三章 Data语义学
1. Data Member 的布局 同一个Access Section(private, public等)中,data member的顺序按照声明顺序排列,但是没有规定需要连续排序.同时编译器可能会 ...
- js数组的误解
js数组实际是个残废货,没有关联数组这一说,要实现真正意义上的关联数组只能用对象,那你肯定不服气了,说怎么没有关联数组,我来给你写一个: var arr = []; arr['a'] = 1; arr ...
- Bzoj3224 / Tyvj 1728 普通替罪羊树
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 12015 Solved: 5136 Description 您需要写一种数据结构(可参考题目标题), ...
- JS高级之面试必须知道的几个点
1.函数的3种定义方法 1.1 函数声明 //ES5 function getSum(){} function (){}//匿名函数 //ES6 ()=>{}//如果{}内容只有一行{}和ret ...