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. 向量 在阅读这本书的时候,你需要熟悉代数和几何 ...
随机推荐
- Java程序性能优化之性能概述
性能的基本概念 一).什么叫程序的性能? 程序运行所需的内存和时间. 二).性能的表现形式: 1).执行速度: 程序的反应是否迅速,响应时间是否足够短. 2).启动时间:程序从运行到可以处理正常业务所 ...
- PostGIS 使用Mysql_fdw同步ArcGIS填坑记录
##实现Mysql_fdw数据同步过程中,出现过很多坑,开此贴记录一下 1.触发器记录 这里insert的时候,采用过insert into f_pressureline select new.*,出 ...
- 程序员需要掌握的七种 Python 代码更易维护的武器
检查你的代码风格 PEP 8 是 Python 代码风格规范,它规定了类似行长度.缩进.多行表达式.变量命名约定等内容.尽管你的团队自身可能也会有稍微不同于 PEP 8 的代码风格规范,但任何代码风格 ...
- 2019-9-29，php基础学习，笔记
cobalt strike简单使用cobalt是一个后渗透测试工具,基于java开发,适用于团队间协同作战,简称"cs"cs分为客户端和服务端,一般情况下我们称服务端为团队服务器, ...
- oracle内存占用过高和修改不当无法启动oracle实例的解决办法
今天,在自己机器上装了oracle 12c,发现Oracle的服务Oracle RDBMS Kenel Executable (OracleServiceORCL)占用内存高达5G,本人电脑内存才1 ...
- 新手学分布式 - Envoy Proxy XDS Server动态配置的一点使用心得
Envoy Proxy 动态API的使用总结 Envoy Proxy和其它L4/L7反向搭理工具最大的区别就是原生支持动态配置. 首先来看一下Envoy的大致架构 从上图可以简单理解:Listener ...
- C# delegate和C# event
在基于Windows平台的程序设计中,事件(event)是一个很重要的概念.因为在几乎所有的Windows应用程序中,都会涉及大量的异步调用,比如响应点击按钮.处理Windows系统消息等,这些异步调 ...
- MySQL 库、表、记录、相关操作（3）
MySQL 库.表.记录.相关操作(3) 单表查询 """ 增: insert [into] [数据库名.]表名[(字段1[, ..., 字段n])] values (数 ...
- LeetCode 5282. 转化为全零矩阵的最少反转次数
地址 https://leetcode-cn.com/submissions/detail/39277402/ 题目描述给你一个 m x n 的二进制矩阵 mat. 每一步,你可以选择一个单元格并将它 ...
- C 可变参数函数的本质
C语言支持定义可变参数的函数,方法是在函数的参数列表最后加上 " ... ",代表变长的参数列表,例如: void Func(int num, ...) { } 需要注意 “... ...