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. 向量 在阅读这本书的时候,你需要熟悉代数和几何 ...
随机推荐
- 如何打造一款m3u8视频爬虫
0.前言 m3u8是一种很常见的网页视频播放器的视频源,比如说中国大学MOOC中课程就是使用了该种视频格式. 随便打开一门课程,就可以发现在网络请求中存在一个m3u8的文件,在preview中预览,它 ...
- vux组件的样式变量的使用
使用x-header,查看文档发现有个样式变量,可以改变x-header的样式 这玩意怎么用呢? 1.在项目中创建一个.less样式文件,例如我这里是创建一个src/style/vux_theme.l ...
- python：利用celery分布任务
Celery是一个功能完备即插即用的任务队列.它使得我们不需要考虑复杂的问题,使用非常简单.celery看起来似乎很庞大.celery适用异步处理问题,当发送邮件.或者文件上传, 图像处理等等一些比较 ...
- Java流程控制之（四）中断
目录 break continue return 标签 在程序设计时,循环直接的跳转显得十分重要,虽然Java没有提供goto语句去控制程序的跳转,但为了控制循环,Java提供了continue,br ...
- Sql server中用现有表中的数据创建Sql的Insert插入语句
之前,在Codeproject发表过一篇关于用现有表中数据创建Insert的Sql语句的存储过程,今天将其搬到这里来,注意本存储过程仅适用于SQL SERVER. 介绍 一些时候,你想导出一些现有表中 ...
- day 38 高级选择器
1.高级选择器 一.高级选择器 1-后代选择器 ***** 儿子.孙子.重孙子 1. .father .wu{ color: red; } 选择父类中特定的子类 2. .father p{ #后代中间 ...
- 程序员的算法课（6）-最长公共子序列（LCS）
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...
- Django中间件详解
Django中间件详解 中间件位置 WSGI 主要负责的就是负责和浏览器和应用之家沟通的桥梁 浏览器发送过来一个http请求,WSGI负责解包,并封装成能够给APP使用的environ,当app数据返 ...
- 作为UIApplication单例对象的方法 openURL方法的变化
作为UIApplication单例对象的方法 openURL: 在iOS开发中经常用来实现在当前应用打开外部链接的需求比如跳转到其他应用,跳转应用隐私设置界面;还有相关API canOpenURL: ...
- pod install速度慢解决方案
相信大家已经感受到pod install速度越来越慢了,网上提供了几种解决方案,但是都没有完全解决速度慢的问题. 使用国内镜像的Specs 在pod install时使用命令pod install - ...