day 67
Vue框架
Vue的简介
Vue是一套构建用户界面的框架，与Angular、React两个框架相比，Vue吸取了这两个框架的优点，单页面管理，中文设计，数据驱动(DOM驱动)
Vue的使用
- 通过script标签引入vue.js
- 创建vue对象
- 通过el进行挂载
- 通过data定义对象的属性
- 通过method定义对象的方法
<body>
<div id="d1">
{{ msg }}
</div>
<!--通过script标签引入vue-->
<script src="vue/vue.js"></script>
<script>
// 创建vue对象
let vue1 = new Vue({
el: '#d1', // 挂载点:使vue对象和html标签建立联系
data: {
msg: 'message'
},
methods: {
Click : functione () {
alert(123)
}
})
</script>
</body>
插值表达式
`
差值表达式就是在挂载点对应的标签当中,
用{{ }}调用在vue对象中已经定义好的变量也可以对变量进行简单处理
`
<div id="d1">
{{ msg }}
{{ num * 10}}
{{ msg + 1}}
{{ msg[1] }}
{{ msg.split('') }}
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
msg: 'test',
num: 10
}
})
</script>
文本指令
- {{}}
- v-text: 原样输出
- v-html:可以解析html代码
- v-once:当前的标签只能被渲染一次，即使标签内引用的变量发生了变化
<body>
<div id="d1">
<p>{{ msg }}</p>
<p v-text="msg.split('')">12345</p>
<p v-text="info"></p>
<p v-html="info"></p>
<hr>
<!--v-once保证当前标签只渲染一次, 既第一次加载页面的时候, 因此即使msg的值发生了变化, 变迁的内容也不变-->
<p v-on:click="pClick" v-once>{{ msg }}</p>
<p>{{ msg }}</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
msg: 'message',
info: '<h1>info</h1>'
},
methods: {
pClick: function () {
if (this.msg !== '信息') {
this.msg = '信息'
}else {
this.msg = 'message'
}
}
})
</script>
事件指令
- 就是给挂载点内标签绑定事件
v-on:事件名="方法名"也可以简写为@事件名="方法名"
@事件名="方法名"方法名不加括号会自动传入一个$event事件对象@事件名="方法名()方法名加括号时, 不会自动传参
<body>
<div id="d1">
<p @click="f1">{{ click }}</p>
<p @mouseover="f2" @mouseout="f3" @mousedown="f4" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
<hr>
<!--不加括号时, 会自动传入一个参数: 点击事件对象$event-->
<p @click="f8">{{ click }}</p>
<!--加括号时, 不会自动传参, 可以手动传参-->
<p @click="f8($event, '并且传入参数')">{{ click }}</p>
<p></p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
click: '点击事件',
action: '鼠标事件'
},
methods: {
f1() {
this.click = '点击了'
},
f2() {
this.action = '悬浮'
},
f3() {
this.action = '离开'
},
f4() {
this.action = '按下'
},
f5() {
this.action = '抬起'
},
f6() {
this.action = '移动'
},
f7() {
this.action = '右键'
},
f8(ev, arg) {
console.log(ev);
this.click = '点击了' + arg
},
}
})
</script>
属性指令
- 属性指令就是用来控制挂载点内的标签的属性的
v-bind:属性名="变量"也可以简写为:属性名="变量"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: red;
}
.d2 {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="d1">
<!--class属性绑定-->
<p :class="c1">class属性</p>
<!--使用[]绑定多个类-->
<p :class="[c1, c2]">class属性</p>
<!--既支持变量, 也支持常量-->
<p :class="['d1', c2]">class属性</p>
<!--{类名:布尔值}可以控制该类是否其作用-->
<p :class="[c1, {d2: false}]">布尔控制</p>
<p :style="myStyle">style属性</p>
<p :style="{width: w, height: h, backgroundColor: bgc}">style属性</p>
<p></p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
c1: 'd1',
c2: 'd2',
is_true: true,
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'green'
},
w: '100px',
h: '100px',
bgc: 'green'
},
})
</script>
</body>
</html>
--++
day 67的更多相关文章
- P87LPC760/61/62/64/67/68/69/78/79芯片解密单片机破解价格
NXP恩智浦P87LPC760/61/62/64/67/68/69/78/79芯片解密单片机破解 NXP LPC700系列单片机解密型号: P87LPC759.P87LPC760.P87LPC761. ...
- 【UOJ#67】新年的毒瘤 Tarjan 割点
#67. 新年的毒瘤 UOJ直接黏贴会炸... 还是戳这里吧: http://uoj.ac/problem/67#tab-statement Solution 看到这题的标签就进来看了一眼. 想 ...
- UOJ#67. 新年的毒瘤
传送门 练习一下Tarjan的模板. 求一下割点,然后加个约束条件判一下特殊点,剩下的就是所求点. //UOJ 67 //by Cydiater //2016.10.27 #include <i ...
- Scala 深入浅出实战经典 第67讲：Scala并发编程匿名Actor、消息传递、偏函数解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- 重新想象 Windows 8 Store Apps (67) - 后台任务: 推送通知
[源码下载] 重新想象 Windows 8 Store Apps (67) - 后台任务: 推送通知 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 后台任务 推送通 ...
- Effective Java 67 Avoid excessive synchronization
Principle To avoid liveness and safety failures, never cede control to the client within a synchroni ...
- leetcode 67
67. Add Binary Given two binary strings, return their sum (also a binary string). For example,a = &q ...
- Part 67 to 70 Talking about method parameters in C#
Part 67 Optional parameters in c# Part 68 Making method parameters optional using method overloadin ...
- uoj 67 新年的毒瘤 割点
题目链接: 题目 #67. 新年的毒瘤 问题描述 辞旧迎新之际,喜羊羊正在打理羊村的绿化带,然后他发现了一棵长着毒瘤的树. 这个长着毒瘤的树可以用 nn 个结点 mm 条无向边的无向图表示.这个图中有 ...
- http://www.mxchip.com/talk/news/jishuwenzhang/2014-09-11/67.html
http://www.mxchip.com/talk/news/jishuwenzhang/2014-09-11/67.html
随机推荐
- httpHandlers path="*.sky"
<httpHandlers> <add verb="*" path="*.sky" type="WebAppHttpHandlerT ...
- djang小项目过程中的小问题 01（django中的configrarion配置、django自带命名规范）
不知道为什么,明明照着做,但是我就会遇到一些错误问题,但是我觉着自己生下来就是解决问题的. ##1. 第一个是在django运行时,没有配置configration, 这个时候我添加一个django ...
- shell的使用技巧
推荐使用的远程连接软件以及vi编辑器的基本使用 简介:远程连接软件 与 vi命令的基本使用 (1)软件: CRT 已经下载好的压缩包 直接双击 点击新建会话 点击下一步 输入主机名 下一步 ...
- python中使用rsa加密
前提不多说, 为什么使用RSA加密请自行搜索,直接正为: 一. 生成公钥及私钥, 并保存 二. 使用公钥加密, 私钥解密 后记: 通常使用中, 会先对数据进行bas64加密, 再对加密后的内容使用rs ...
- [知识点]最近公共祖先LCA
UPDATE(20180822):重写部分代码. 1.前言 最近公共祖先(LCA),作为树上问题,应用非常广泛,而求解的方式也非常多,复杂度各有不同,这里对几种常用的方法汇一下总. 2.基本概念和暴力 ...
- 【CF1097F】Alex and a TV Show
[CF1097F]Alex and a TV Show 题面 洛谷 题解 我们对于某个集合中的每个\(i\),令\(f(i)\)表示\(i\)作为约数出现次数的奇偶性. 因为只要因为奇偶性只有\(0, ...
- CSP2019 树的重心 题解
本题当然可以通过大力讨论每棵子树的size的大小关系,然后用各种数据结构暴力维护.但是我更倾向于用一种更为性质的做法. 首先讲一下我在考场上想到的做法(没写).就是考虑换根,在换根的过程中计算每一条边 ...
- Linux性能优化实战学习笔记：第四十七讲
一.上节回顾 上一节,我们梳理了,应用程序容器化后性能下降的分析方法.一起先简单回顾下.容器利用 Linux 内核提供的命名空间技术,将不同应用程序的运行隔离起来,并用统一的镜像,来管理应用程序的依赖 ...
- 端口转发之 lcx
lcx.exe是一个端口转发工具,有Windows版和Linux版两个版本,Windows版是lcx.exe,Linux版为portmap Windows版使用方法如下: lcx有两大功能: )端口转 ...
- mysql 类型自动化转换问题
mysql 类型自动化转换问题 背景 有个业务需求,使用到find_in_set函数,简单贴下,如下: SELECT FIND_IN_SET('b','a,b,c,d'); //返回值为2,即第2个 ...