前端框架开始学习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>,把教程里的例子模仿一遍,理解用法.不推荐上来就直接 ...
随机推荐
- bat批处理文件怎么将路径添加到path环境变量中
bat批处理文件怎么将路径添加到path环境变量中 摘自:https://zhidao.baidu.com/question/1887763143433391788.html 永久性的: @echo ...
- 123457123456#2#----com.ppGame.ShiZi43--前拼后广--shizi游戏_pp
com.ppGame.ShiZi43--前拼后广--shizi游戏_pp
- LeetCode_234. Palindrome Linked List
234. Palindrome Linked List Easy Given a singly linked list, determine if it is a palindrome. Exampl ...
- mongodb多个条件查询in,日期查询,嵌套查询，统计集合总数等常用实例
1. 多个条件查询in in db.inventory.find( { qty: { $in: [ 5, 15 ] } } ) 2. 日期查询 db.books.find({}) 查询时间大于6-,结 ...
- 【k8s 硬盘监控】prometheus grafana
设置监控哪块盘: https://www.bountysource.com/issues/50160777-disk-space-usage-depcited-in-grafana-correct h ...
- Codeforces 1029B. Creating the Contest 动态规划O(nlogn)解法 及 单调队列O(n)解法
题目链接:http://codeforces.com/problemset/problem/1029/B 题目大意:从数组a中选出一些数组成数组b,要求 b[i+1]<=b[i]*2 . 一开始 ...
- 静态站点生成器-html-markdown-hugo
推荐指数:
- easyui datagrid里的toobar按钮隐藏、显示、禁用等方式的实现
easyui datagrid里的toobar按钮隐藏.显示.禁用等方式的实现 //隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分 ...
- Cas（07）——建立使用Cas进行单点登录的应用
建立使用Cas进行单点登录的应用 目录 1.1加入cas-client-core-xxx.jar到classpath 1.2配置Filter 1.2.1AuthenticationFilter 1.2 ...
- adb中文乱码问题怎么解决？
1.chcp 65001 执行完命令后 2.在cmd命令弹出的终端页面,右键单击属性设置成字体Lucida Console ,设置完成就解决了 adb 中文乱码问题