前端框架开始学习Vue(一)
定义基本Vue代码结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="vue.js">
</script>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app">
<p v-cloak="">{{msg}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:"123"
}
})
</script>
</body>
</html>
--使用v-cloak解决插值表达式闪烁的问题
以上两种 方法会默认转义成文本输出
如果需要输出成网页元素就需要 v-html
<div v-html="msg2"></div>
2 v-bind 使用【Vue中提供了 v-on:事件绑定机制】 缩写是【:】
v-bind ： 是vue中，提供的用于绑定属性的指令
<input type="button" name="" id="" value="按钮" v-bind:title="msg3" />
<input type="button" name="" id="" value="按钮" v-bind:title="msg3+'123'" />\
注意：
v-bind:指令可以被简写为 : 要绑定的属性
v-bind中，可以写合法的js表达式
<input type="button" name="" id="" value="按钮" :title="msg3" /> #这样也是可以的
3 v-on指令【Vue中提供了 v-on:事件绑定机制】 缩写是【@】
<body>
<div id="app">
<input type="button" value="按钮2" v-on:click="show" />
<input type="button" value="按钮2" v-on:mouseover="show" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg3:'大家都是好学生'
},
methods:{ //这个methods属性中定义了当前Vue实例所有可用的方法
show:function(){alert('hello')}
}
})
</script>
</body>
--使用v-on:绑定事件，此绑定了点击事件和鼠标覆盖事件
事件修饰符：
.stop 阻止冒泡
<body>
<div id="app">
<div class="inner" @click="div1Handler">
<input type="button" value="惟他" @click.stop="btnHandler"/>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{ },
methods:{
div1Handler(){
console.log('inner div 事件')
},
btnHandler(){
console.log('按钮事件')
}
}
})
</script>
</body>
--阻止冒泡
.prevent 阻止默认事件
<body>
<div id="app">
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，去百度</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{ },
methods:{
linkClick(){
console.log('触发连接点击事件')
}
}
})
</script>
</body>
--阻止事件
.capture 添加事件侦听器时使用事件捕获模式
<body>
<div id="app">
<div class="inner" @click.capture="divHandler">
<input type="button" name="" id="" value="按钮" @click="btnHandler" /> </div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{ },
methods:{
divHandler(){
console.log('class触发')
},
btnHandler(){
console.log('按钮触发')
}
}
})
</script>
</body>
--从外到里，进行捕获事件
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
<body>
<div id="app">
<div class="inner" @click.self="divHandler">
<input type="button" name="" id="" value="按钮" @click="btnHandler" /> </div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{ },
methods:{
divHandler(){
console.log('class触发')
},
btnHandler(){
console.log('按钮触发')
}
}
})
</script>
</body>
--实现只有点击当前元素时候才会触发事件处理函数
.once 事件只触发一次
<body>
<div id="app">
<div class="inner" @click.self.once="divHandler">
<input type="button" name="" id="" value="按钮" @click.once="btnHandler" /> </div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{ },
methods:{
divHandler(){
console.log('class触发')
},
btnHandler(){
console.log('按钮触发')
}
}
})
</script>
</body>
-- .once只触发一次事件处理函数
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为
4 使用Vue完成一个跑马灯效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="vue.js">
</script>
<body>
<div id="app">
<input type="button" name="" id="" value="浪起来" v-on:click="lang"/>
<input type="button" name="" id="" value="低调" @click="stop"/>
<h4>{{msg}}</h4>
</div>
<script type="text/javascript">
// 注意：在vm 实例中，如果想要获取data上的数据 或者想要调用
// methods中的方法 ，必须通过this.数据属性名 或this.方法名 来进行访问
// 这里的this表示 我们new 出来 的 vm 实例对象 var vm = new Vue({
el:'#app',
data:{
msg:'猥琐发育，别浪~~!',
intervalId:null
},
methods:{
lang(){
if (this.intervalId!=null)return;
// 箭头函数是解决this指向的问题
this.intervalId=setInterval(()=>{
//console.log(_this.msg)
// 获取到头的第一个字符
var start = this.msg.substring(0,1)
// 获取到后面的所有字符
var end = this.msg.substring(1)
// 重新拼接得到新的字符串，并赋值给this.msg
this.msg=end +start
},400)
},
stop(){ //停止定时器
clearInterval(this.intervalId)
this.intervalId=null;
}
}
})
// 分析:
// 1 给浪起来按钮绑定点击事件 用 v-on
// 2 在按钮事件处理函数中，写相关的业务逻辑代码:拿到
// msg 然后调用字符串的 substring来进行字符串截取操作
// 3 为了实现点击下按钮，自动截取的功能，需要实现定时功能
</script>
</body>
</html>
5 v-model双向绑定
v-bind 只能实现数据的单向绑定,从M 自动绑定到 V,无法实现双向绑定
<input type="text" name="" id="" v-bind:value="msg3" />
使用 v-model指令，可以实现表单元素和Model中数据双向数据绑定
注意：v-model 只能运用在表单元素中
input(radio,text,address,email...) select checkbox
<input type="text" name="" id="" v-model="msg3" />
<body>
<div id="app">
<input type="text" v-model="n1" /> <select name="" id="" v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2" />
<input type="button" value="=" @click="calc"/>
<input type="text" name="" id="" v-model="result" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
result:0,
opt:'+'
},
methods:{
calc(){ //计算器算数方法
// switch(this.opt){
// case "+":
// this.result = parseInt(this.n1)+parseInt(this.n2)
// break;
// case "-":
// this.result = parseInt(this.n1)-parseInt(this.n2)
// break;
// case "*":
// this.result = parseInt(this.n1)*parseInt(this.n2)
// break;
// case "/":
// this.result = parseInt(this.n1)+parseInt(this.n2)
// break;
// }
// 投机取巧法，正式开发中，尽量少用
var codeStr = 'parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
this.result=eval(codeStr)
}, }
})
</script>
</body>
---用v-model双向绑定实现计算器的基本功能
前端框架开始学习Vue(一)的更多相关文章
- 前端框架开始学习Vue(三)
初步安装.与搭建 https://www.cnblogs.com/yanxulan/p/8978732.html ----如何搭建一个vue项目 安装 nodejs,,, npm i == np ...
- 前端框架开始学习Vue(二)
1 根据关键字实现数组的过滤 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 前端框架Easyui学习积累
前端框架Easyui学习积累 1.easyui textbox 赋值:$("#id").textbox("setValue","xx"); ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- 前端框架对比之vue与regular(一)
每次一写到Regular总是忍不住先介绍一下,Regualr是网易杭州研究所的一位叫郑海波的大神写的一款前端框架,目前 这款框架推广的不深,加上其和angular过于相似的框架名,导致接受力并不大,其 ...
- 前端框架——AmazeUI学习
AmazeUI官网: http://amazeui.org/ 前后台模板下载:链接:链接:http://pan.baidu.com/s/1c2uVfk0 密码:zuva 十大前端框架参考链接:http ...
- 最受欢迎的前端框架 —— Bootstrap学习
Bootstrap是Twitter的Mark Otto和Jacob Thornton开发的,是目前最受欢迎的前端框架,它简单灵活,使得Web前端开发更加快捷方便. 首先,要基本掌握Bootstrap框 ...
- 主流前端框架对比：Vue.js , React, Angular.js
个人认为Vue.js的文档最恳切.我认为结合文档和遇到问题Google答案的匹配度来讲:Vue.js > ReactJS > AngularJS > Angular 2 如何使用Vu ...
- 前端框架VUE----学习vue前的准备工作
起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐上来就直接 ...
随机推荐
- 零基础学Python-第二章 ：Python基础语法-05.基础数据类型
打开终端,输入python3,这就进入了python的命令提示符. 输入type(8),返回的是int类型.用来type来判断当前的是什么类型. 字符串8转int类型. 数字123转字符串 布尔类型的 ...
- source insight 4.0常见问题及相关配置
摘自:https://blog.csdn.net/liitdar/article/details/79891795 本文介绍source insight 4.0常见的问题以及相关的配置. 1. ...
- oracle DBA 常用表和视图
☆dba_开头..... dba_users 数据库用户信息 dba_segments 表段信息 dba_extents 数据区信息 dba_objects 数 ...
- 23andme的申请流程和注意事项
1. 申请时间 23andme的申请截止日期为每年的6月和12月:最近的一次截止日期是2019年6月12号: 23andme的委员会会在申请截止日期后的三个月后告知申请是否通过,即9月和次年3月就能得 ...
- 关于spring项目报错：找不到元素 'beans' 的声明的解决办法
@参考文章 首先是spring.xml中引用地址错误,部分http://***写成https://***了. 其次是spring.xml中引入的版本不对,我用的4.1.3的,直接写 http://ww ...
- 函数返回new对象
#include <iostream> using namespace std; // foo()函数本质上没什么问题,但建议你不要这样写代码 string &foo() { st ...
- Configuring and Running Django + Celery in Docker Containers
Configuring and Running Django + Celery in Docker Containers Justyna Ilczuk Oct 25, 2016 0 Commen ...
- 开启Hadoop和Spark的学习之路
Hadoop Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储. Hadoop实现了一个 ...
- LVS-TUN模式
TUN模式: 其实数据转发原理和上图是一样的,不过这个我个人认为主要是位于不同位置(不同机房):LB是通过隧道进行了信息传输,虽然增加了负载,可是因为地理位置不同的优势,还是可以参考的一种方案: 优点 ...
- svn查看登录过的账号密码
直接下载:http://www.leapbeyond.com/ric/TSvnPD/