前端框架开始学习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执行shell命令
# coding=UTF-8 import os def distcp(): nncheck = os.system('lsof -i:8020') dncheck = os.system('lsof ...
- hadoop记录-[Flink]Flink三种运行模式安装部署以及实现WordCount（转载）
[Flink]Flink三种运行模式安装部署以及实现WordCount 前言 Flink三种运行方式:Local.Standalone.On Yarn.成功部署后分别用Scala和Java实现word ...
- PAT 甲级 1065 A+B and C (64bit) (20 分)(溢出判断)*
1065 A+B and C (64bit) (20 分) Given three integers A, B and C in [−], you are supposed to tell whe ...
- 使用SampleRateConverter对音频采样率进行转换
java sound resource SampleRateconverter.java(接近于官方源码) 输入目标采样率,输入文件,输出文件.食用方便;p 比如 SampleRateConverte ...
- Linux查找含有特定字符串的文件
Linux查找含有特定字符串的文件命令为grep.以下为详细的使用方法 grep [OPTIONS] PATTERN [FILE...] #实例:递归查找当前文件夹下所有含有test的文件,并显示行号 ...
- 条件概率和链式法则 conditional probability & chain rule
顾名思义, 条件概率指的是某个事件在给定其他条件时发生的概率, 这个非常符合人的认知:我们通常就是在已知一定的信息(条件)情况下, 去估计某个事件可能发生的概率. 概率论中,用 | 表示条件, 条件概 ...
- JS的slice、substring、substr字符串截取
JS中截取一个字符串的三种方法:字符串.slice(开始索引,结束索引)字符串.substring(开始索引,结束索引)字符串.substr(开始索引,截取的长度) 如果需要截取到该字符串的最后,可以 ...
- Cas（03）——Cas Server中各配置文件介绍
Cas Server中各配置文件介绍 Cas Server中所有的配置文件都是放在WEB-INF目录及其子目录下的. 在WEB-INF/classes下的配置文件有: l cas-theme-def ...
- Okhttp3基本使用
https://square.github.io/okhttp/ https://www.jianshu.com/p/da4a806e599b https://www.cnblogs.com/wzk- ...
- 使用Wifi pineapple（菠萝派）进行Wi-Fi钓鱼攻击
简介: WiFi Pineapple 是由国外无线安全审计公司Hak5开发并售卖的一款无线安全测试神器. 特性: 用作 Wi-Fi 中间人攻击测试平台 一整套的针对 AP 的渗透测试套件 基于 WEB ...