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 的核心库只关注视图层,不仅 ...
随机推荐
- 微信小程序爬坑
1.app.json配置信息是怎样的? { "pages":[ "pages/页面1/页面1", "pages/页面2/页面2", ], & ...
- Java代理模式之Cglib代理
Cglib代理,也叫做子类代理.在内存中构建一个子类对象从而实现对目标对象功能的扩展. CGLIB包的底层是通过使用一个小而快的字节码处理框架ASM,来转换字节码并生成新的类.不鼓励直接使用ASM,因 ...
- Java中的String，StringBuilder，StringBuffer
String被final修饰,不可变,每次更改其实是重新创建了一个对象.StringBuilder,StringBuffer是可变的. StringBuffer是线程安全的,StringBuilder ...
- mysql-笔记 架构
1 第一层:连接处理.授权认证.安全 2 第二层:内置函数.解析.优化.跨存储引擎的功能:存储过程.触发器.视图 3 第三层:数据在存储和提取,底层函数(如开始事务)不解析sql.存储引擎之间不相互通 ...
- BZOJ2127Happiness
题目描述 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友如果能同时选文 ...
- laravel 配置MySQL读写分离
前言:说到应对大流量.高并发的解决方案的时候,总会有这样的回答,如:读写分离,主从复制...等,数据库层今天先不讨论,那么今天我们就来看看怎么在应用层实现读写分离. 框架:laravel5.7(所有配 ...
- 深度学习二、CNN（卷积神经网络）概念及理论
一.卷积神经网络(CNN) 1.常见的CNN结构有:LeNet-5.AlexNet.ZFNet.VGGNet.ResNet等.目前效率最高的是ResNet. 2.主要的层次: 数据输入层:Input ...
- 【游戏开发】基于VS2017的OpenGL开发环境搭建
一.简介 最近,马三买了两本有关于“计算机图形学”的书籍,准备在工作之余鼓捣鼓捣图形学和OpenGL编程,提升自己的价值(奔着学完能涨一波工资去的).俗话说得好,“工欲善其事,必先利其器”.想学习图形 ...
- 【转载】VS写汇编程序01：VS2015配置汇编语言开发环境
https://blog.csdn.net/qq_28249373/article/details/83475107
- jenkins 自动化部署执行shell
# -*- coding:utf-8 _*-""" @author:Administrator @file: new_app_publish.py @time: 2018 ...