Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令
1.vue导入-挂载点
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>vue导入</title>
</head>
<body>
<div id="app">
<hr>
<p class="p1">{{ }}</p>
<hr>
<p class="p2">{{ }}</p>
<hr>
<p id="p">
<b>{{ }}</b>
<i>{{ }}</i>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
console.log(Vue);
// new Vue({
// el: '.p1',
// });
// new Vue({
// el: '.p2'
// });
// new Vue({
// el: '#p'
// })
// el为挂载点，才有css3选择器语法与页面标签进行绑定，决定该vue对象控制的页面范围
// 1.挂载点只检索页面中第一个匹配到的结果，所以挂载点一般都才有id选择器
// 2.html与body标签不可以作为挂载点（组件中解释）
new Vue({
el: '#app',
})
</script>
</html>
2.vue变量
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>变量</title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ info }}</p>
<h3>{{ msg }}</h3>
</div>
<div id="main">
<p>{{ msg }}</p>
<p>{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 实例成员中的data是为vue页面模板通过数据变量的
let app = new Vue({
el: '#app',
data: {
msg: 'message',
info: 'vue变量信息'
}
});
let main = new Vue({
el: '#main',
data: {
msg: 'msg',
info: 'info'
}
});
console.log(app.info);
console.log(main.info);
// 创建vue实例（new Vue）传进去的字典(对象)的key，称之为vue实例成员(变量)
// 访问实例成员，用 vue实例.$成员名, eg：app.$el
console.log(app.$el);
console.log(app.$data);
console.log(app.$data.info);
</script>
</html>
3.vue事件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
body {
/*页面内容不允许被选中*/
user-select: none;
}
.p1:hover {
/*鼠标悬浮变成小手，颜色变红*/
cursor: pointer;
color: red;
}
</style>
</head>
<body>
<div id="app">
<p class="p1" v-on:click="fn">这是一个段落，被点击了{{ count }}下</p>
<p class="p2" v-on:mouseover="overAction" v-on:mouseout="outAction" >该便签被{{ action }}</p>
<div v-on:mouseover="overAction" v-on:mouseout="outAction">div被{{ action }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
count: 0,
action: '渲染',
// fn: function () {
// // console.log(app.count);
// // app.count ++
// console.log(this); // this不是该vue实例对象，是顶级Window对象
// }
},
// methods就是为vue实例提供事件函数的
methods: {
fn: function () {
// console.log(app.count);
// app.count ++;
// console.log(this); // this代表当前该vue实例对象
this.count ++
},
overAction: function () {
this.action = '悬浮'
},
outAction: function () {
this.action = '离开'
}
}
});
</script>
</html>
4.js对象补充
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js的对象</title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script>
// 1.js中没有字典，只要对象类型，可以把对象当做字典来使用
// 2.key本质是属性名，所以都是字符串类型（可以出现1，true），其实都是省略引号的字符串
let sex = '男';
let dic = {
'name': 'Owen',
1: 100,
true: 12345,
age: 18,
// sex: 'sex',
sex,
};
console.log(dic['name']);
console.log(dic['1']);
console.log(dic['true']);
console.log(dic['age']);
console.log(dic.sex);
dic.price = 3.5;
console.log(dic.price);
// 声明类创建对象，类可以实例化n个对象，哪个对象调用，this就代表谁
function People(name, age) {
this.name = name;
this.age = age;
this.eat = function () {
console.log(this.name + '在吃饭');
return 123
}
}
let p1 = new People('Owen', 17.5);
console.log(p1.name);
let res = p1.eat();
console.log(res);
// 直接声明对象，{}内的key都属于当前对象的
// {}中的方法通常会简写
let stu1 = {
name: '张三',
age: 18,
// eat: function () {
// console.log(this.name + '在吃饭');
// }
eat () {
console.log(this.name + '在吃饭');
}
};
stu1.eat()
// 总结：
// 1.{}中直接写一个变量：key与value是同名，value有该名变量提供值
// 2.es5下，所有的函数都可以作为类，类可以new声明对象，在函数中用 this.资源 为声明的对象提供资源
// 3.{}中出现的函数叫方法，方法可以简写 { fn: function(){} } => { fn(){} }
</script>
</html>
5.文本指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文本指令</title>
</head>
<body>
<div id="app">
<!-- 1、插值表达式，能完成变量渲染，变量基础运算，变量方法调用，不能完成复杂运算(一步解决不了的，不能出现；) -->
<p>{{ msg }}</p>
<p>{{ msg + '拼接内容' }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.slice(2, 4) }}</p>
<hr>
<!--2、v-text：将所有内容做文本渲染 -->
<p v-text="msg + '拼接内容'"></p>
<!--3、v-html：可以解析html语法标签的文本 -->
<p v-text="'<b>' + msg + '</b>'"></p>
<p v-html="'<b>' + msg + '</b>'"></p>
<p v-text="`<b>${msg}</b>`"></p>
<p v-html="`<b>${msg}</b>`"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本信息'
}
})
</script>
</html>
vue过滤器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="app">
<!-- 默认将msg作为参数传给filterFn -->
<p>{{ msg | filterFn }}</p>
<!--过滤器串联-->
<p>{{ num | f1 | f2 }}</p>
<!--可以同时对多个变量进行过滤，变量用，分割，过滤器还可以额外传入参数辅助过滤-->
<!--过滤器方法接收所有传入的参数，按传入的位置进行接收-->
<p>{{ msg, num | f3(666, '好的') }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本内容',
num: 1
},
filters: {
filterFn(v1, v2) {
// console.log(v1);
// console.log(v2);
return `<b>${v1}</b>`;
},
f1(v1) {
return v1 * 100;
},
f2(v1) {
return v1 * 100;
},
f3(v1, v2, v3, v4) {
console.log(v1);
console.log(v2);
console.log(v3);
console.log(v4);
}
}
})
</script>
</html>
7.事件指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="app">
<!--事件指令：v-on:事件名="事件函数" -->
<!--简写：@事件名="事件函数" -->
<p v-on:click="f1">被点击了{{ count }}下</p>
<hr>
<p @click="f2">{{ p2 }}</p>
<hr>
<!--绑定的事件函数可以添加()，添加括号就代表要传递参数-->
<ul>
<li @click="f3(100)">{{ arr[0] }}</li>
<li @click="f3(200)">{{ arr[1] }}</li>
<li @click="f3(300)">{{ arr[2] }}</li>
</ul>
<ul>
<li @click="f4(0)">{{ arr[0] }}</li>
<li @click="f4(1)">{{ arr[1] }}</li>
<li @click="f4(2)">{{ arr[2] }}</li>
</ul>
<hr>
<!--绑定的事件函数如果没有传递参数，默认传入 事件对象 -->
<div class="box" @click="f5"></div>
<hr>
<!--事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event -->
<div class="box" @click="f6(10, $event)"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0,
p2: '第二个p',
arr: [1, 2, 3],
},
methods: {
f1() {
this.count ++
},
f2() {
console.log(this.p2)
},
f3(num) {
console.log(num);
},
f4(index) {
console.log(this.arr[index]);
},
f5(ev, b) {
console.log(ev);
console.log(b);
},
f6(num, ev) {
console.log(num);
console.log(ev);
}
},
})
</script>
</html>
8.属性指令
<!DOCTYPE html>
<html lang="zh" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>属性指令</title>
<style>
.b1 {
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
width: 150px;
height: 150px;
background-color: darkturquoise;
transition: .3s;
}
.box2 {
width: 300px;
height: 100px;
background-color: darkgoldenrod;
transition: .3s;
}
.circle {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<!--1.下方的class、id、title、abc等是div标签的属性，属性指令就是控制它们的-->
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
<!--2.属性指令：v-bind:属性名="变量"，简写方式 :属性名="变量" -->
<!--3.属性指令操作 style 属性-->
<div style="width: 200px;height: 200px;background-color: greenyellow"></div>
<!-- 通常：变量值为字典 -->
<div :style="mys1"></div>
<!-- 了解：{中可以用多个变量控制多个属性细节} -->
<div :style="{width: w,height: '200px',backgroundColor: 'deeppink'}"></div>
<!--重点：一般vue都是结合原生css来完成样式控制 -->
<!--<div :class="c1"></div>-->
<!--class可以写两份，一份写死，一份有vue控制, 有两个类的时候，选择最新的一个，即第二个，根据第二个类来显示-->
<div class="box1" :class="c2"></div>
<!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用，两个类同时为true，则选择第二个-->
<div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>
<!--[]控制多个类名-->
<div :class="[c3, c4]"></div>
</div>
<br><br><br><br><br><br><br><br><br><br>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
title: '12345',
xyz: 'opq',
mys1: {
width: '200px',
height: '200px',
// 'background-color': 'greenyellow'
backgroundColor: 'pink',
},
w: '200px',
c1: 'box1',
c2: 'circle',
cable: false,
c3: 'box1',
c4: 'circle'
},
methods: {
changeCable(n) {
this.cable = n;
}
}
});
setInterval(function () {
// app.c1 = app.c1 === 'box1' ? 'box2' : 'box1';
if (app.c1 === 'box1') {
app.c1 = 'box2';
} else {
app.c1 = 'box1';
}
}, 300)
</script>
</html>
Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令的更多相关文章
- 向JS对象添加和删除事件
this.removeEventListener = function (obj, ename, func) { var store = obj[this.addEventListener.pre + ...
- 使用变量作为js对象的属性名
<script> var test={aa:12,bb:34};//或者var test={}; var cc= "acqId" test[cc]=12; alert( ...
- Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
- js中的DOM事件与对象
概念图 document.getElementById("bb"); 根据id找到bb,只能找一个哦 var aa = document.getElementById(" ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- js登录页面的 回车事件
js登录页面的 回车事件 js登录页面的 回车事件(2012-12-26 10:37:03)转载▼标签: jseventkey回车事件登录 分类: js.jquery //回车事件 第一种docum ...
- 关于js里的那一堆事件
分类 事件名 触发描述 一般事件 onclick 鼠标点击事件 ondbclick 鼠标双击事件 onmousedown/up 鼠标按下/松开事件 onmouseover/move/out 鼠标悬浮/ ...
- Vue框架:挂载点-过滤器-事件指令-表单指令
近期学习安排 1.Vue框架 前台html+css+js框架,是不同于js与JQuery的数据驱动框架, 学习的知识点:指令 | 实例成员 | vue项目 2.drf框架 django的插件,完成前 ...
- Vue.js学习 Item8 -- 方法与事件处理器
方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...
随机推荐
- csps2019记
Day0: 上午疯狂颓板子(树状数组,KMP)屁都没考,感觉海星. 上午坐大巴去了德州,中午和skyh凑钱吃饭(其实是我请他)rp++. 下午在火车上和侯神打扑克,拉火车之神Get. 到燕大试机,敲了 ...
- 插头Dp总结
T1 HDU1693:Eat the Trees 题目大意:给出n*m的方格,有些格子不能铺线,其它格子必须铺,可以形成多个闭合回路.问有多少种铺法? 插头Dp板子题,题目要求可以是多个回路, 只需要 ...
- tsar使用说明
常用命令 tsar --nginx --live -i 1 查询1秒的状态每秒采样一次 系统模块 cpu 字段含义 user: 表示CPU执行用户进程的时间,通常期望用户空间CPU越高越好. ...
- SpringDataRedis入门Demo
步骤: 约定>配置>代码 在pom.xml中导入依赖(redis和jedis以及其他所需的依赖) > 配置相关配置文件(redis-config.properties 和applic ...
- 记一次内存无法回收导致频繁fullgc机器假死的思路
确定挂机 络绎不绝的来不同类型的bug 当bug滚滚而来时,不要怀疑,你的发布的应用基本是不可用状态了.观察哨兵监控数据,特别是内存打到80%基本就挂机了,或者监控数据缺失也基本是挂机了.此时应当马上 ...
- Elastic Stack核心产品介绍-Elasticsearch、Logstash和Kibana
Elastic Stack 是一系列开源产品的合集,包括 Elasticsearch.Kibana.Logstash 以及 Beats 等等,能够安全可靠地获取任何来源.任何格式的数据,并且能够实时地 ...
- Logstash：把MySQL数据导入到Elasticsearch中
Logstash:把MySQL数据导入到Elasticsearch中 前提条件 需要安装好Elasticsearch及Kibana. MySQL安装 根据不同的操作系统我们分别对MySQL进行安装.我 ...
- Logstash：Data转换，分析，提取，丰富及核心操作
Logstash:Data转换,分析,提取,丰富及核心操作 Logstash plugins Logstash是一个非常容易进行扩张的框架.它可以对各种的数据进行分析处理.这依赖于目前提供的超过200 ...
- Java学习——反射
Java学习——反射 摘要:本文主要讲述了什么是反射,使用反射有什么好处,以及如何使用反射. 部分内容来自以下博客: https://www.cnblogs.com/tech-bird/p/35253 ...
- JMeter性能测试入门--简单使用
1.JMeter整体简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试 ...