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 的核心库只关注视图层,不仅 ...
随机推荐
- C#给字符串赋予字面值——字符串插入、转义序列的使用
1.占位符.字符串插入 给字符串赋予字面值时,经常遇见在字符串中包含变量的情况,用连接符进行拼接.转换的方式比较麻烦.还容易出错.C#提供了较为便捷的处理方式,即‘占位符’,以及C#6的新功能‘插入字 ...
- Django内存管理的6种方法
一.django的缓存方式有6种: 1.开发者调试缓存 2.内存缓存 3.文件缓存 4.数据库缓存 5.Memcache缓存(使用python-memecached模块) 6.Memcache缓存(使 ...
- react native 左边固定，右边横向滑动左右自适应高度
要实现的效果 https://zuobaiquan.github.io/blogImg/201903/01.gif
- [WC2006]水管局长（LCT）
题目大意: 给定一张图,支持删边,求两点的路径中所有权值的最大值的最小值,貌似很绕的样子 由于有删边,不难想到\(LCT\),又因为\(LCT\)不支持维护图,而且只有删边操作,于是我们考虑时间回溯. ...
- mvn test报错
1 Scenarios (1 passed) 4 Steps (4 passed) 0m11.846s [INFO] Tests run: 1, Failures: 0, Errors: 0, Ski ...
- I/O模型系列之五：IO多路复用 select、poll、epoll
IO多路复用之select.poll.epoll IO多路复用:通过一种机制,一个进程可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作. 应用:适用于针 ...
- [源码分析]StringBuffer
[源码分析]StringBuffer StringBuffer是继承自AbstractStringBuilder的. 这里附上另外两篇文章的连接: AbstractStringBuilder : ht ...
- Asp.Net Core 新篇章
一. 二. 三. 系列章节 第一节:.Net Core环境的安装和常用指令 第X节:XXXXXXXXXXXXXXXXXXXXXXXXXXXX 第X节:XXXXXXXXXXXXXXXXXXXXXXXXX ...
- 字符串join函数跟+号测试
字符串join函数for循环+区别: 原因是这样的,字符串是不可变对象,当用操作符+连接字符串的时候,每执行一次+都会申请一块新的内存,然后复制上一个+操作的结果和本次操作的右操作符到这块内存空间,因 ...
- python excel写入及追加写入
# -*- coding:utf-8 _*- """ @author:Administrator @file: excel.py Description :如果行数是10 ...