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,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
随机推荐
- 工具：从一个文件夹中复制jar到另一个文件夹中
工具类:从一个文件夹中复制jar到另一个文件夹中 需要的小伙伴可以试一试,很爽哦,有时候真的很需要! 需求:当我们拿到一个maven项目时,而maven项目的jar包都是通过pom.xml文件管理的, ...
- async/await 执行顺序详解
随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 ...
- c#中常用集合类和集合接口之接口系列【转】
常用集合接口系列:http://www.cnblogs.com/fengxiaojiu/p/7997704.html 常用集合类系列:http://www.cnblogs.com/fengxiaoji ...
- 手机termux上安装msfconsole
大家可能因为手机没有root而不能通过deploy安装kali 我们使用termux来安装渗透工具 1.下载并安装Termux,更新软件源并升级软件包 apt update apt upgrade a ...
- 基于Windows环境下MyEclipse10快捷键总结
---------------------------------------------MyEclipse 快捷键1(CTRL)----------------------------------- ...
- printf不能直接输出string类型
因为string不是c语言的内置数据,所以直接printf输出string类型的是办不到的.要这样输出: printf("%s\n",a.c_str()); 举例: #includ ...
- 创建jedis对象
1.先在taotao-parent的pom.xml中复制 以下内容到rest的pom.xml中 <!-- Redis客户端 --> <dependency> <group ...
- WPF DataTrigger数据触发器
1.通过绑定的属性值变化,动态改变界面的显示,比如绑定了IsExpanded,当为true,grid高度变成600,反之,grid高度变成320. <Grid.Style> <Sty ...
- 使用notepad++作为keil的外部编辑器
之前一直不喜欢keil的编辑界面,但是又不想太浮夸.看到很多群里有人用vscode写stm32的序,但是直接用vscode编写的花,各种设置很麻烦.而且还不能调试.于是想到有没有一个轻便简约的外部编辑 ...
- 利用PHPExcel导出Excel并设置Excel格式以及数据源
浏览:23969 发布日期:2013/07/24 分类:技术分享 代码有点长,读起来有点累.先来个截图 导出的Excel太宽了,所以将后面的列宽重新调整了再截的图 功能包括: 1.设置单元格格式,包括 ...