一、什么是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,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
随机推荐
-
Java web会话简单应用
Java会话主要分为两块:Cookie和HttpSessionCookie技术:会话数据保存在浏览器客户端.Session技术:会话数据保存在服务器端.一.下面介绍一下Cookie的应用1. Cook ...
-
匹配IP地址的正则表达式 （转）
正则表达式 ^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[ ...
-
【Android 界面效果38】android:inputType常用取值
<EditText android:layout_width="fill_parent" android:layout_height="wrap_content&q ...
-
org.json和json-lib比较
经常会用到JSON格式才处理,尤其是在Http请求的时候,网上可以找到很多json处理的相关工具,如org.json和json-lib,下面两段源代码是分别使用这两个工具解析和构造JSON的演示程序. ...
-
sencha touch(7)——list组件
1.list组件是一个很强大的组件.用于以一览表的形式或者列表的形式展示应用程序中的大量的数据.该组件使用XTemplate模版来显示数据,同时与数据仓库进行绑定.所以当数据仓库中的数据发生变化的时候 ...
-
iterable
iterable 阅读: 148111 遍历Array可以采用下标循环,遍历Map和Set就无法使用下标.为了统一集合类型,ES6标准引入了新的iterable类型,Array.Map和Set都属于i ...
-
【算法系列学习】HDU 5527 Too Rich贪心
http://www.cnblogs.com/AOQNRMGYXLMV/p/4934747.html #include<iostream> #include<cstdio> # ...
-
蓝桥杯java 关于大范围时间的
import java.util.Calendar; import java.util.Date; public class A { /*这道题学习使用了java的calendar和类,主要是对dat ...
-
安装VirtualBox中的增强功能包VBoxLinuxAdditions
首先,增强功能包VBoxLinuxAdditions有什么作用呢?请看: (1)实现客户机和主机间的鼠标切换. (2)与主机实现文件共享. (3)自动调整客户机分辨率. (4)与主机共享剪贴板的内容. ...
-
Android View体系（八）从源代码解析View的layout和draw流程
相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属性动画 Android View体系(四)从源 ...