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,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
随机推荐
- MySQL常用查询语句汇总（不定时更新）
在这篇文章中我会通过一些例子来介绍日常编程中常用的SQL语句 目录: ## 1.数据库的建立 ## 1.数据库的建立 实例将ER图的形式给出: 由此转换的4个关系模式: ...
- Pandas系列之入门篇——HDF5
Pandas系列之入门篇--HDF5 简介 HDF5(层次性数据格式)作用于大数据存储,其高效的压缩方式节约了不少硬盘空间,同时也给查询效率带来了一定的影响, 压缩效率越高,查询效率越低.pandas ...
- js面向对象学习笔记（一）：创建空对象，理解this指向
var obj = new Object();//创建一个空对象 obj.name = '小王';//属性 obj.sayName = function () { //对象方法 对象最重要的是this ...
- AIM Tech Round 4 (Div. 2)(A，暴力，B，组合数，C，STL+排序)
A. Diversity time limit per test:1 second memory limit per test:256 megabytes input:standard input o ...
- Codeforces 839E Mother of Dragons【__builtin_popcount()的使用】
E. Mother of Dragons time limit per test:2 seconds memory limit per test:256 megabytes input:standar ...
- 2017ecjtu-summer training #2 CodeForces 608B
B. Hamming Distance Sum time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- 使用 SVG 和 JS 创建一个由星形变心形的动画
序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...
- X-Windows桌面
提到X-Windows桌面,人们最先想到的一般都是KDE和GNOME.目前大多数的Linux发行版上的桌面环境都采用了这两个东西.确实,KDE和GNOME做得很好,界面美观.使用方便,而且现在Bug越 ...
- Robots.txt - 禁止爬虫
robots.txt用于禁止网络爬虫访问网站指定目录.robots.txt的格式采用面向行的语法:空行.注释行(以#打头).规则行.规则行的格式为:Field: value.常见的规则行:User-A ...
- url加密，一般只对参数加密
首先,很不推荐你使用get方式发送密码,最好是使用post. 原因是,你通过一个连接把用户名和密码发送到后台,即便密码不是明文,别人获取不到密码明文,但是,只要你这个连接成功登陆过,别人就可以拿这个连 ...