前端框架开始学习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>,把教程里的例子模仿一遍,理解用法.不推荐上来就直接 ...
随机推荐
- Linux下Mycat安装配置和使用
mysql安装下载mysql[百度云]tar -zxvf mysql-5.6.32-linux-glibc2.5-x86_64.tar.gz 解压把mysql文件夹移动到 /usr/local/ 下m ...
- JSON和JSONP具体是干神马的呢？ （含jQuery实例）
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...
- Data - 深入浅出学统计 - 上篇
本文是已读书籍的内容摘要,少部分有轻微改动,但不影响原文表达. :以漫画形式来讲解最基本的统计概念和方法. ISBN: 9787121299636 https://book.douban.com/su ...
- INTEL 7代CPU I5 7500 集显HD630 WIN7 64位
HD630 在WIN7 下的硬件ID (在设备管理器 - 显卡 - 属性 中查看): PCI\VEN_8086&DEV_5912&SUBSYS_D0001458&REV_04 ...
- extract()函数：用于从一个date或者interval类型中截取到特定的部分
extract()函数:用于从一个date或者interval类型中截取到特定的部分 ### extract 语法extract ( { year | month | day | hour | min ...
- 浅谈PHP随机数安全的分析
之前在身边有很多学PHP的朋友写一些小程序的时候,很多时候会使用PHP随机数函数rand()和mt_rand()函数去生成随机数 可是,随机数真的随机吗?这篇文章讲从多个实例中探讨随机数,当然,有写作 ...
- java学习笔记（6）-多线程（1）
标签(空格分隔): 笔记 一.基本概念 1.1 程序.进程.线程 程序(program):是为完成特定任务.用某种语言编写的一组指令的集合.即指一段静态的代码,静态对象. 进程(process):是程 ...
- fastai 2019 part1 数据集分享
链接:https://pan.baidu.com/s/1UuQ8gJ2qXLvPK2rdIqWCMQ 提取码:ghn9
- java当中请给出一个oracle的helloworld例子
[学习笔记] 2.oracle的helloworld例子: import java.sql.*;public class OracleHello{ public static void main ...
- Pycharm（Eclipse）常用快捷键
在File_Settings_Keymap中可以设置: 确定快捷键模式为Eclipse 看方法的源码:ctrl+鼠标左键 回退之前代码:alt+左键 前进之前代码:alt+右键 调换相邻两行代码位置: ...