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,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
随机推荐
- [PHP] PHP源码常用代码中的宏定义
PHP源码常用代码宏定义:#define 宏名 字符串#表示这是一条预处理命令,所有的预处理命令都以#开头.define是预处理命令.宏名是标识符的一种,命名规则和标识符相同.字符串可以是常数.表达式 ...
- Java集合系列[3]----HashMap源码分析
前面我们已经分析了ArrayList和LinkedList这两个集合,我们知道ArrayList是基于数组实现的,LinkedList是基于链表实现的.它们各自有自己的优劣势,例如ArrayList在 ...
- 洛谷 P3410 拍照
洛谷 P3410 拍照 题目描述 小B有n个下属,现小B要带着一些下属让别人拍照. 有m个人,每个人都愿意付给小B一定钱让n个人中的一些人进行合影.如果这一些人没带齐那么就不能拍照,小B也不会得到钱. ...
- 2017广东工业大学程序设计竞赛决赛 题解&源码(A,数学解方程，B,贪心博弈，C,递归，D,水，E,贪心，面试题，F,贪心，枚举，LCA，G,dp，记忆化搜索，H,思维题)
心得: 这比赛真的是不要不要的,pending了一下午,也不知道对错,直接做过去就是了,也没有管太多! Problem A: 两只老虎 Description 来,我们先来放松下,听听儿歌,一起“唱” ...
- CodeForces801-A.Vicious Keyboard-暴力
A. Vicious Keyboard time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- 深入设计电子计算器(一)——CPU框架及指令集设计
版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/8278418.html 作者:窗户 Q ...
- [国嵌攻略][157][SPI总线介绍]
SPI总线架构 SPI(serial peripheral interface)串行外设接口,是一种高速,全双工,同步的通信总线.采用主从模式(master slave)架构,支持多个slave,一般 ...
- 如何动态修改网页的标题（title）？
有时候我们需要复用一个页面,但是又希望他们拥有各自的标题,这时候就需要动态的去更改页面的title了,不然所有页面都是一个标题. 这时候就会想到使用js或jQuery去实现了. 1.js方式. 首先, ...
- layui之事件监听（table）
这几天在学习layui,感觉这框架挺好用的,前后端都适用,许多原本比较复杂的东西用该框架很容易就能实现. 今天看了table里的事件监听这个知识点. 语法:table.on('event(filter ...
- 使用python爬取百度贴吧内的图片
1. 首先通过urllib获取网页的源码 # 定义一个getHtml()函数 def getHtml(url): try: page = urllib.urlopen(url) # urllib.ur ...