VUE 框架
一、什么是vue
它是一个构建用户界面的JAVASCRITPO框架
二、怎么使用VUE
(1)、引入vue.js
如：<script src='vue.js'><script>
(2)、展示html
如：<div id="app">
<input type="text v-model="msg">
<p>{{msg}</p>
</div>
(3)、建立vue对象
new Vue({
el:"#app", //表示在当前这个元素内开始使用VUE
data{
msg:""
}
})
三、在元素当中插入值
{{}}，可以方表达式
指令，是带有v-前缀的特殊属性，通过属性来操作元素
v-text:在元素当中插入值
v-html:在元素当中不仅可以插入文本，还可以插入标签，
v-if:根据表达式的真假来动态插入和移出元素
v-show：根据表达式的真假来隐藏和显示元素 v-if 和v-show的区别：
v-if改为false时，它就在dom中不存在，它被注释代替，而v-show改为false是，它在dom中存在，只是在v-showzhong 添加了隐藏属性 v-for：根据变量的值来循环渲染元素
v-on：监听元素事件，并执行想应的操作
对数组的操作：
push
pop
shift
unshift
splice
reverse v-bind:绑定元素的属性来执行相应的操作 v-bind可以被：代替
v-on可以被@代替 v-model:实现了数据和视图的双向绑定
v-model份三步绑定：
1、把元素的值和数据想绑定
2、当输入内容时，数据同步发生变化，视图 ----数据的驱动
3、当改变数据时，输入的内容会发生变化，数据-----视图的驱动
自定义指令： 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>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<p>
{{msg}}
</p>
</div> <script>
new Vue({
el:"#app",
data:{
msg:""
}
})
</script> </body>
</html>
index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li{
list-style: none;
display: inline-block;
width: 150px;
height: 50px;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li>
<span v-on:click="er(true)">二维码登录</span>
</li> <li>
<span v-on:click="er(false)">邮箱登录</span>
</li>
</ul> <div v-show="temp">
<img src="erma.jpg" >
</div> <div v-show="!temp">
<form action="http://www.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:"#app",
data:{
temp:true
},
methods:{
er:function(t){
this.temp=t
}
}
})
</script> </body>
</html>
tap切换
<!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="(index,item) in arr">
{{item}}:{{index}}
</li> <hr> <li v-for="(item,key,index2) in obj">
{{index2}} :{{key}}:{{item}}
</li> <hr> <li v-for="item in obj2">
{{item.username}}
{{item.age}}
{{item.sex}}
</li> </ul>
</div> <script>
new Vue({
el:"#app",
data:{
arr:[11,22,33],
obj:{'a':"王兴平",'b':"鲁刚","c":"小耗子"},
obj2:[
{'username':"刘伟"},
{'age':""},
{'sex':"female"}
]
}
})
</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 v-text="msg">
<p>{{msg}}</p>
<p v-html="message"></p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:"ff",
message:"<input type='submit'>" }
})
</script>
</body>
</html>
v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="pick">人生自古谁无死</p>
<p v-else>留取丹心照汗青</p>
<p v-show="temp">文天祥</p>
<p v-show="ok">变化</p>
</div> <script>
var vm = new Vue({
el:'#app',
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>
</head>
<body>
<div id="app">
<input v-model="msg">
<p>{{msg}}</p>
<input type="submit" value="变化" v-on:click="change">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"ddd"
},
methods:{
change:function () {
this.msg=85555;
}
}
})
</script> </body>
</html>
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(index,item) in arr">
{{item}}:{{index}}
</li>
</ul>
<hr>
<input type="submit" value="点我吧" v-on:click="show">
<a v-bind:href="url">我要去百度</a>
</div> <script>
new Vue({
el:"#app",
data:{
arr:[11,22,33,55],
url:"http://www.qq.com",
},
methods: {
show: function () {
this.arr.pop();
}
}
})
</script> </body>
</html>
v-on_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>
<input type="checkbox">苹果
</li> <li>
<input type="checkbox">香蕉
</li> <li>
<input type="checkbox">梨子
</li> <li>
<input type="checkbox" v-on:click="create()">其它
</li> <li v-html="htmlstr" v-show="test"></li>
</ul>
</div> <script>
new Vue({
el:"#app",
data:{
htmlstr:"<textarea></textarea>",
test:false
},
methods:{
create:function(){
this.test=!this.test;
}
}
})
</script>
</body>
</html>
动态生成url
<!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-focus>
</div> <script>
new Vue({
el:"#app",
data:{ },
directives:{
focus:{
inserted:function (tt) {
tt.focus();
tt.style.backgroundColor='red';
tt.style.color='#fff' }
}
}
})
</script> </body>
</html>
自定义指令
VUE 框架的更多相关文章
- Vue框架Element的事件传递broadcast和dispatch方法分析
前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
- 使用vue框架运行npm run dev 时报错解决
使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...
- Vue框架下的node.js安装教程
Vue框架下的node.js安装教程 python服务器.php ->aphche.java ->tomcat. iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...
- Vue框架axios请求（类似于ajax请求）
Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- Vue框架
Vue框架 环境: windows python3.6.2 Vue的cdn: <script src="https://cdn.jsdelivr.net/npm/vue"&g ...
- vue框架入门和ES6介绍
vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...
- 基于VUE框架 与 其他框架间的基本对比
基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03 11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...
- VUE框架的初识
VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...
- vue框架中的日期组件转换为yyy-mm-dd格式
最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
随机推荐
- spring使用之旅（二） ---- AOP的使用
什么是AOP? AOP基本概念 AOP使用--注解方式 AOP使用--XML方式 实例--日志 写在最前面的(源码地址): https://github.com/xc83415134/spring_a ...
- springboot项目启动时提示Address already in use: bind
PS:web项目在启动的时候,一般会报Address already in use: bind,常规的处理思路为:删除任务管理器中的javaw.exe进程即可:当删除仍然解决不了时,一般处理思路如下, ...
- bootstrap-table操作之“删除”
最近在做一个新的后台管理系统,在对数据进行操作时需要写一个"删除"功能,如图所示: 下面我来描述一下实现过程中出现的bug以及解决方法: 1.href值为空(href=" ...
- Codeforces Round #356 (Div. 1) C. Bear and Square Grid
C. Bear and Square Grid time limit per test 3 seconds memory limit per test 256 megabytes input stan ...
- Linux 文件操作命令-Linux基础环境命令学习笔记
1.文件目录操作 1)路径识别 a.绝对路径,以根目录开始 b.相对路径,以当前目录开始,不需从根目录开始写起 2)命令 man ls 查看ls命令帮助 cd /var/log 切换进入log目录(. ...
- zookeeper基本讲解及基本命令和配置 （转）
一.ZooKeeper概述 ZooKeeper是一种为分布式应用所设计的高可用.高性能且一致的开源协调服务,是Google的Chubby一个开源实现,是Hadoop和Hbase的重要组件,它提供了一项 ...
- Windows 部署 Redis 群集（转）
1,下载Redis for windows 的最新版本,解压到 c:\Redis 目录下备用https://github.com/MSOpenTech/redis/releases当前我使用的是 3. ...
- cesium编程入门（七）3D Tiles，模型旋转
cesium编程入门(七)3D Tiles,模型旋转 上一节介绍了3D Tiles模型的位置移动,和贴地的操作,这一节来聊一聊模型的旋转, 参考<WebGl编程指南>的第四章 假设在X轴和 ...
- [国嵌攻略][156][I2C自编设备驱动设计]
AT24C08的驱动在Linux内核中已经提供,在/drivers/misc/eeprom/at24.c文件中.在对应的probe函数中有一个创建/sys/.../eeprom文件的函数,应用程序通过 ...
- JAVA：成员变量和局部变量的区别
1.作用于不同: 局部变量的作用域仅限于定义它的方法 成员变量的作用域在整个类的内部都是可见的 2.初始值不同 JAVA会给成员变量一个初始值 JAVA不会给局部变量赋予初始值 3.在同一个方法中,不 ...