Vue.js学习笔记(代码)
##v-cloak v-text v-html v-bind v-on的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用v-cloak可以解决 插值表达式闪烁的问题 -->
<p v-cloak>{{ msg }}</p>
<h4 v-text="msg"></h4>
<!-- 默认v-text是没有闪烁问题的 -->
<!-- v-tsxt会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空 -->
<div v-html="msg2"></div>
<!-- v-html也会覆盖元素中原本的内容,会把目标内容按html格式解析 --> <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'" /> -->
<!-- v-bind:是vue中提供的用于绑定属性的指令,就是告诉title要把mytitle当成变量处理,而不是普通字符串,缩写是 : -->
<!-- v-bind中可以写合法的JS表达式 --> <input type="button" value="按钮" @click="show" />
<!-- vue中提供了 v-on: 事件绑定机制 缩写是 @ -->
</div> <script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'123',
msg2:'<h1>hhhhh</h1>',
mytitle:'这是一个自己定义的title'
},
methods:{ //这个methods属性中定义了当前vue实例所有可用的方法
show:function(){
alert('hello')
}
}
}) </script>
</body>
</html>
##跑马灯的简单实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<!-- 1.导入vue包 -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<h4>{{ msg }}</h4>
<input type="button" value="浪起来" @click="lang"/>
<input type="button" value="别浪" @click="stop"/> </div>
<!-- 2.创建一个要控制的区域 -->
<script type="text/javascript">
//注意:在vm实例中如果想要获取data上的数据或者想调用methods中的方法,必须通过this.数据属性名或this.方法名来进行访问,
// 这里的this,就表示我们new出来的vm实例对象
var vm = new Vue({
el:'#app',
data:{
msg:'猥琐发育，别浪~~！',
intervalId:null //在 data上定义定时器Id
},
methods:{
lang(){
if(this.intervalId != null)return;
//判定,避免每次点击都重新开启一个定时器
this.intervalId = setInterval( () => { //定时器
// => 箭头函数,让内部的this与外部的vm实例保持一致,避免访问不到vm实例中的数据
//获取到头的第一个字符
var start = this.msg.substring(0,1)
//获取到后面的所有字符
var end = this.msg.substring(1)
//重新拼接得到新的字符串,并赋值给this.msg
this.msg = end + start
},400) //注意:vm实例会监听自己身上data中的数据改变,只要数据一发生改变,就会自动把最最新的数据从data上同步到页面中
// 程序员只需要关心数据,不用考虑怎样重新渲染dom
},
stop(){ //停止计时器
clearInterval(this.intervalId)
this.intervalId = null;
//每当清除了定时器之后需要吧intervalId置为null,否则无法再次开启定时器
}
} }) // 分析:
// 1.给[浪起来]按钮绑定一个点击事件
// 2.按钮的时间处理函数中写相关的业务逻辑代码:拿到msg字符串,然后调用字符串的substring方法进行字符串的截取操作,吧第一个字符截取出来放到最后一个位置
// 3.为了实现点击一下按钮自动截取的功能,需要把步骤2中的代码放到一个定时器中
</script>
</body>
</html>
##事件修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
<style type="text/css">
.inner{
height: 150px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div id="app">
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler"/>
使用 .stop 阻止冒泡(多层元素从里到外依次触发事件)
</div> --> <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a>
使用 .prevent 阻止默认行为 --> <!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler"/>
使用 .capture 实现捕获事件的触发机制
</div> --> <!-- <div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler"/>
使用 .self 实现只有点击当前元素时才会触发事件处理函数,阻止自身的冒泡行为(不阻止其他元素的冒泡),
</div> --> <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a>
使用 .once 实现只触发一次事件处理函数
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{ },
methods:{
// div1Handler(){
// console.log('这是触发 inner div的点击事件')
// },
// btnHandler(){
// console.log('这是触发了 btn按钮的点击事件')
// }
linkClick(){
console.log('触发了链接的点击事件')
}
}
});
</script>
</body>
</html>
##v-model指令实现双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<!-- <input type="text" :value="msg" style="width: 100%;"/> -->
<!-- v-bind只能实现单向数据绑定,从M自动到绑定到V,无法实现双向数据绑定 --> <input type="text" v-model="msg" style="width: 100%;"/>
<!-- 使用 v-model 指令可以实现双向数据绑定
注意:只能用于 表单元素(能与用户实现交互的元素)中 -->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'大家都是好boy'
},
methods:{ }
})
</script>
</body>
</html>
##利用双向数据绑定做简易计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1" /> <select 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" 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>
</html>
Vue.js学习笔记(代码)的更多相关文章
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- Vue.js——学习笔记（一）
Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
- Vue.js 学习笔记之二：数据驱动开发
在 Vue.js 框架中,与 HTML 页面元素的交互方式没有像原生 JavaScript 接口那么直接,它是通过先在 HTML 元素标签中嵌入一系列类似于普通标签属性的 Vue 指令属性来绑定数据, ...
- Vue.js 学习笔记之三：与服务器的数据交互
显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...
- Vue.js 学习笔记之四：Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
- Vue.js 学习笔记之五：编译 vue 组件
正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器, ...
- Vue.js——学习笔记
Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
随机推荐
- position: fixed; ios 无法滑动解决
添加以下代码搞定 -webkit-overflow-scrolling: touch; overflow-y: scroll;
- OO第一次单元总结
第一次总结性博客 16071070 陈泽寅 2019.3.23 一.第一单元所学总结 首先先来总结一下第一单元我所学到的知识以及所感所悟.第一个单元,是我第一次接触JAVA语言,并且再使用了几次之后, ...
- 使用 PHP SOAP 来创建一个简单的 Web Service。
访问: http://www.debug.com/php-soap-demo.php?client=22 结果: apache: <VirtualHost _default_:80> Do ...
- awk 计算某一列的和
awk 计算某一列的和 我需要通过nova list 显示所有虚拟机的cpu总和,即用awk计算某一列的综合 [root@control01 ~]# nla | awk -F '|' 'BEGIN{s ...
- [mooc]open course on github
来自多位GitHub网友在GitHub分享的几组学习课程项目, 学习课程包含清华,北大,浙大,中科大,上海交大, 等中国多所名校的英语,AI高数,人工智能等课程以及一些讲义考题. 如果你想了解这些大学 ...
- api跨域
1.找方法名称是get开头的2.找get请求类型的 自定义webapi的路由规则,控制到action 1.跨域设置:(服务端)webconfig文件中,system.webServer节点下添加 &l ...
- （转）ReentrantLock实现原理及源码分析
背景:ReetrantLock底层是基于AQS实现的(CAS+CHL),有公平和非公平两种区别. 这种底层机制,很有必要通过跟踪源码来进行分析. 参考 ReentrantLock实现原理及源码分析 源 ...
- Educational Codeforces Round 63 (Rated for Div. 2) D. Beautiful Array（动态规划.递推）
传送门 题意: 给你一个包含 n 个元素的序列 a[]: 定义序列 a[] 的 beauty 为序列 a[] 的连续区间的加和最大值,如果全为负数,则 beauty = 0: 例如: a[] = {1 ...
- 关于 iOS 性能优化方面的面试题，
这是我前面几天碰到的面试题: 如何对定位和分析项目中影响性能的地方?以及如何进行性能优化? 我的答案: 定位方法: instruments 在iOS上进行性能分析的时候,首先考虑借助instrum ...
- Django web编程2 -- 编辑页面内容
你将创建一些表单,让用户能够添加主题和条目,以及编辑既有的条目.你还将学习Django如何防范对基于表单的网页发起的常见攻击,这让你无需花太多时间考虑确保应用程序安全的问题. 然后,我们将实现一个用户 ...