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 的核心库只关注视图层,不仅 ...
随机推荐
- String,StringBuffer与StringBuilder的区别?? 缓存
转: String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) 简要的说, String 类型和 StringBuffer 类型的主 ...
- 一、查看MVC4还是MVC5
一.查看MVC版本找到那个dll.属性.就可以看到版本 二.MVC添加WebAPI Visual Studio 已向项目“Web”添加 ASP.NET Web API 2 的 全部集合 个依赖项. 项 ...
- ajax基本原理与案例
一.什么是Ajax AJAX即“Asynchronous Javascript And XML”( 异步 JavaScript和XML),AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互 ...
- java篇 之 操作符
操作符:1.赋值操作符 用(+= ,^=...不会改变类型,如果用 = 会进行隐式转换类型) short x = 0; int i = 123456; x += i;//编译通过 x= x + i;/ ...
- ansible命令
ansible 默认提供了很多模块来供我们使用.在 Linux 中,我们可以通过 ansible-doc -l 命令查看到当前 ansible 都支持哪些模块,通过 ansible-doc -s ...
- Hadoop系列（一）：Hadoop集群搭建
环境:CentOS 7 JDK: 1.7.0_80 hadoop:2.8.5 两台机器:master(192.168.56.101) slave(192.168.56.102) 配置基础环境 1. ...
- nuxt npm run dev 报错Solution to the "Error: listen EADDRINUSE 127.0.0.1:8080"
Solution to the "Error: listen EADDRINUSE 127.0.0.1:8080" Hello, Just sharing a solution t ...
- Intellij IDEA 14中使用MyBatis-generator 自动生成MyBatis代码
一:项目建立好及其基本的测试好 二:在maven项目的pom.xml 添加mybatis-generator-maven-plugin 插件 <build> <finalName&g ...
- python之路day10-命名空间和作用域、函数嵌套，作用域链、闭包
楔子 假如有一个函数,实现返回两个数中的较大值: def my_max(x,y): m = x if x>y else y return mbigger = my_max(10,20)print ...
- 【一本通1248：Dungeon Master&&洛谷UVA532 Dungeon Master】
若不会广搜转向[广搜] [题目描述] 这题是一个三维的迷宫题目,其中用‘.’表示空地,‘#’表示障碍物,‘S’表示起点,‘E’表示终点,求从起点到终点的最小移动次数,解法和二维的类似,只是在行动时除了 ...