前端框架开始学习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>,把教程里的例子模仿一遍,理解用法.不推荐上来就直接 ...
随机推荐
- 【Redis】Redis 主从模式搭建
主从模式介绍 Redis虽然读取写入的速度都特别快,但是也会产生读压力特别大的情况.为了分担读压力,Redis支持主从复制,Redis的主从结构可以采用一主多从或者级联结构,Redis主从复制可以根据 ...
- 【linux命令之 tail学习】
tail 在屏幕上显示指定文件的末尾若干行 tail file #(显示文件file的最后10行) tail -n +20 file #(显示文件file的内容,从第20行至文件末尾) tail -c ...
- ECMAScript 6复习<一>
1.let和const命令: let不存在变量提升 暂时性死区 let在相同作用域内不允许重复声明 2.块级作用域: 3.全局对象的属性: ; window.a let b = ; window.b ...
- css代码陷阱
1.选择器优先级 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 说说Spring XML的头
部分内容截取自(http://blog.csdn.net/zhch152/article/details/8191377,http://iswift.iteye.com/blog/1657537) 在 ...
- php is_writeable函数bug问题
其中bug存在两个方面,1.在windowns中,当文件只有只读属性时,is_writeable()函数才返回false,当返回true时,该文件不一定是可写的.如果是目录,在目录中新建文件并通过打开 ...
- LeetCode 671. 二叉树中第二小的节点(Second Minimum Node In a Binary Tree) 9
671. 二叉树中第二小的节点 671. Second Minimum Node In a Binary Tree 题目描述 给定一个非空特殊的二叉树,每个节点都是正数,并且每个节点的子节点数量只能为 ...
- LeetCode 189. 旋转数组(Rotate Array)
189. 旋转数组 LeetCode189. Rotate Array 题目描述 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [1,2,3,4,5,6, ...
- wx存储数据到本地及本地获取
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html 存到本地就是存到手机的 ...
- PAT(B) 1089 狼人杀-简单版（Java）逻辑推理
题目链接:1089 狼人杀-简单版 (20 point(s)) 题目描述 以下文字摘自<灵机一动·好玩的数学>:"狼人杀"游戏分为狼人.好人两大阵营.在一局" ...