Vue基础简介
vue基础
一、导入vue
补充：vue的语句以及导入js文件一般写在</body>和</html>中间。
二、vue挂载点
<div id='app'></div>
<script>
new Vue (){
el:'#app',
}
</script>
// el是element的缩写。为挂载点，采用css3选择器与页面标签进行绑定，决定该vue对象控制的页面范围，控制范围包括内部所有子标签
// 挂载点只检索el中第一个匹配到的结果，所以挂载点一般都采用id选择器，有唯一性
// html与body标签不可以作为挂载点
三、vue变量
<div id="app">
<p>{{ msg }}</p>
<p>{{ info }}</p>
<h3>{{ msg }}</h3>
</div>
<script>
new Vue (){
el:'#app',
data:{
msg:'信息',
info:'渲染'
}
}
console.log(app.$el);
console.log(app.$data);
</script>
// 实例成员中的data为挂载点内部提供数据
// 访问实例成员可以用 vue实例.$成员名
// 声明的实例是否用一个变量接收
// 1、在实例内部不需要，用this就代表当前vue实例本身
// 2、在实例外部或其他实例内部需要，定义一个变量接收new Vue()产生的实例
四、vue事件
实例1：给P1标签添加点击事件，记录点击次数
<body>
<div id="app">
<p class="p1" @click="fn">这是一个段落，被点击了{{ count }}下</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0,
},
methods: {
fn() {
this.count++;
console.log(this.count);
}
}
});
</script>
实例2：给P2标签添加鼠标悬停、移除鼠标、点击等事件
<body>
<div id="app">
<p @click="f1" @mouseover="f2" @mouseout="f3" @mousedown="f4" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
action: '鼠标事件',
},
methods: {
f1 () {
this.msg = '点击了'
},
f2 () {
this.action = '悬浮';
},
f3 () {
this.action = '离开'
},
f4 () {
this.action = '按下'
},
f5 () {
this.action = '抬起'
},
f6 () {
this.action = '移动';
},
f7 () {
this.action = '右键';
}
}
})
</script>
</html>
补充: v-on:事件 = ”变量“ | @事件=”变量“ | @事件=“变量()” | @事件=“变量($event,...)”
事件变量，不添加()，默认会传事件对象: $event
事件变量，添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象
methods就是为vue实例提供事件函数的
this代表当前该vue实例对象
绑定事件用 v-on:事件名="触发函数名"，也可使用简写：@事件名="触发函数名"
五、vue文本指令
<!--v-text：将所有内容做文本渲染 -->
<p v-text="msg + '拼接内容'"></p>
<!--v-html：可以解析html语法标签的文本 -->
<p v-html="'<b>' + msg + '</b>'"></p>
<p v-html="`<b>${msg}</b>`"></p>
<!-- v-once：只解析一次的文本 -->
六、vue事件指令
<p @click="f1">被点击了{{ count }}下</p>
// 当事件函数没有传参数，默认传入事件对象
<div class="box" @click="f2(10, $event)"></div>
// 事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event
methods: {
f1(ev, b) {
this.count ++;
console.log(ev); // MouseEvent
console.log(b); // undefined
},
f2(num, ev) {
console.log(num); // 10
console.log(ev); // MouseEvent
}
},
七、vue属性指令
<!--1.下方的class、id、title、abc等是div标签的属性，属性指令就是控制它们的-->
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
<!--2.属性指令：v-bind:属性名="变量"，简写方式 :属性名="变量" -->
<!--只要是属性指令，属性值就为一个变量，需要在data成员中初始化 -->
<!--class可以写两份，一份写死，一份有vue控制-->
<div class="box1" :class="c2"></div>
<!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用-->
<div :class="{box2:true, circle:cable}"></div>
<!--[]控制多个类名-->
<div :class="[c3, c4]"></div>
Vue基础简介的更多相关文章
- Vue --- 基础简介
目录 Vue简介 1.什么是Vue 2.为什么要学习Vue 3.special -- 特点 4.如何使用vue Vue使用 1.如何使用vue 2.插值表达式 3.文本指令 4.事件指令 5.属性指令 ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- 1216 Vue基础
目录 前端框架 Vue 1.简介 1.1 优点 2 使用 2.1 基础 2.2 文本指令 2.3 事件指令 2.4 属性指令 JS面向对象补充 前端框架 angular ---更新程度太快,且不向下兼 ...
- Vue基础（1）
Vue简介 1.JavaScript框架 2.简化Dom操作 3.响应式数据驱动 Vue基础 通过下面代码引用vue: <script src="https://cdn.jsdeliv ...
- Vue基础开发入门之简单语法知识梳理（思维导图详解）
基于个人写的以下关于Vue框架基础学习的三篇随笔,在此基础上,做一个阶段性的知识总结,以此来检验自己对Vue这一段时间学习的成果,内容不多,但很值得一看.(思维导图详解)
- vue - vue基础/vue核心内容
终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还 ...
- 现代3D图形编程学习-基础简介(2) (译)
本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...
- 现代3D图形编程学习-基础简介(1) (译)
本书系列 现代3D图形编程学习 基础简介 并不像本书的其他章节,这章内容没有相关的源代码或是项目.本章,我们将讨论向量,图形渲染理论,以及OpenGL. 向量 在阅读这本书的时候,你需要熟悉代数和几何 ...
随机推荐
- Oracle '26-2月 -19 03.34.47.000000 下午' 字符串日期解析
Oracle数据库, 时间字段是varchar2类型, 存储了 '26-2月 -19 03.34.47.000000 下午' 格式(TIMESTAMP 数据类型)的字符串日期, 将其解析为yyyy-M ...
- Rust 入门 (一)
Rust 语言的介绍.特性什么的都不说了,如有需要,请自行了解.这里我们直接进去正题. 一.开发环境 mac或linux系统,在命令行安装 curl https://sh.rustup.rs -sSf ...
- go中的关键字-go(下)
1. goroutine源码分析 1.1 初始化 go程序的启动流程分为四步 call osinit, 这里就是设置了全局变量ncpu = cpu核心数量 call schedinit make &a ...
- logistic回归介绍以及原理分析
1.什么是logistic回归? logistic回归虽然说是回归,但确是为了解决分类问题,是二分类任务的首选方法,简单来说,输出结果不是0就是1 举个简单的例子: 癌症检测:这种算法输入病理图片并且 ...
- 安装iris框架
1.导语 目前Go语言已经为大多数人所熟知,越来越多的开发人员选择使用Go语言来进行开发,但是如何使用 Go来进行web开发,在其他编程语言中都有对应的开发框架,当然在Go中也有,就是即将要介绍的-- ...
- python logging模块小记
1.简单的将日志打印到屏幕 import logging logging.debug('This is debug message') logging.info('This is info messa ...
- CSRF（Cross-site request forgery）跨站请求伪造
CSRF是什么 CSRF(Cross-site request forgery)跨站请求伪造,也被称为"One Click Attack"或者Session Riding,通常缩写 ...
- df命令、du命令、磁盘分区 使用介绍
第4周第1次课(4月9日) 课程内容:4.1 df命令4.2 du命令4.3/4.4 磁盘分区 4.1 df命令 汇报磁盘空间使用情况,linux磁盘挂载点是无法直接访问的. df 和 df -h区别 ...
- C语言博客作业11
一.本周教学内容&目标 第5章 函数 要求学生掌握各种类型函数的定义.调用和申明,熟悉变量的作用域.生存周期和存储类型. 二.本周作业头 这个作业属于那个课程 C语言程序设计II 这个作业要求 ...
- 爬取豆瓣热销书榜前250 生成.csv文件
from lxml import etreeimport requestsimport csvfp = open('E:/doubanbook.csv','wt',newline='',encodin ...