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 的核心库只关注视图层,不仅 ...
随机推荐
- axios拦截http拦截
一,判断登录页面 const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: ' ...
- 其他综合-内网下Yum仓库搭建配置
内网下Yum仓库搭建配置 1.实验环境 虚拟机环境: VMware 12 版本虚拟机 网络环境: 内网 IP 段:172.16.1.0 外网 iP 段(模拟):10.0.0.0 实验基础:(能够上网, ...
- sql语句基础
数据库库(DataBase):就是一个存储数据的仓库.为了方便数据的存储和管理,它将数据按照特定的规律存储在磁盘上.通过数据库管理系统,可以有效的组织和管理存储在数据库中的数据.SQL(Structu ...
- MongoDB启动报错 32-bit servers don't have journaling enabled by default. Please use --journal if you want durability. 【转】
之前MongoDB启动的时候是蛮正常的,不知道后来启动报错了,就把粘贴出来查询了.最后才知道是由于自己不正常的关闭导致的这个情况. --摘录:MongoDB非正常关闭后修复记录 mongod没有后台执 ...
- ILRuntime_NewbieGuide—导读
Welcome to the ILRuntime_NewbieGuide wiki! 入门篇:做个简单的案例 https://www.cnblogs.com/kerven/p/10237280.htm ...
- python学习日记（面向对象——组合）
组合指的是,在一个类中以另外一个类的对象作为数据属性,称为类的组合 圆环是由两个圆组成的,圆环的面积是外面圆的面积减去内部圆的面积.圆环的周长是内部圆的周长加上外部圆的周长.这个时候,我们就首先实现一 ...
- CAN通信帧ID如何设定？
CAN总线ID是包含在报文帧中的. 1.主要用作CAN总线的仲裁使用,所以一般来说网络上的每个节点(向总线上发送)的ID应该有所不同.ID值越低,报文优先级越高,在两组不同ID报文同时上线时候,仲裁机 ...
- 深入理解JVM(6)——Java内存模型和线程
Java虚拟机规范中定义了Java内存模型(Java Memory Model,JMM)用来屏蔽掉各种硬件和操作系统的内存访问差异,以实现让Java程序在各种平台下都能达到一致的内存访问效果(“即Ja ...
- ML笔记-sklearn.classification_report
主要用于显示主要分类指标的文本报告,在报告中显示每个类的精确度.召回率.F1等信息 首先数据测试结果分为以下4种情况: TP:预测为正,实现为正 FP:预测为正,实现为负 FN:预测为负,实现为正 T ...
- python学习笔记之元祖
#元祖 只读列表,可循环查询,可切片.#儿子不能改,孙子可能可以改. tu = (1,2,3,'alex',[2,3,4,'taibai'],'egon') print(tu[3]) print(tu ...