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基础简介的更多相关文章

  1. Vue --- 基础简介

    目录 Vue简介 1.什么是Vue 2.为什么要学习Vue 3.special -- 特点 4.如何使用vue Vue使用 1.如何使用vue 2.插值表达式 3.文本指令 4.事件指令 5.属性指令 ...

  2. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  3. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  4. 1216 Vue基础

    目录 前端框架 Vue 1.简介 1.1 优点 2 使用 2.1 基础 2.2 文本指令 2.3 事件指令 2.4 属性指令 JS面向对象补充 前端框架 angular ---更新程度太快,且不向下兼 ...

  5. Vue基础(1)

    Vue简介 1.JavaScript框架 2.简化Dom操作 3.响应式数据驱动 Vue基础 通过下面代码引用vue: <script src="https://cdn.jsdeliv ...

  6. Vue基础开发入门之简单语法知识梳理(思维导图详解)

    基于个人写的以下关于Vue框架基础学习的三篇随笔,在此基础上,做一个阶段性的知识总结,以此来检验自己对Vue这一段时间学习的成果,内容不多,但很值得一看.(思维导图详解)

  7. vue - vue基础/vue核心内容

    终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还 ...

  8. 现代3D图形编程学习-基础简介(2) (译)

    本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...

  9. 现代3D图形编程学习-基础简介(1) (译)

    本书系列 现代3D图形编程学习 基础简介 并不像本书的其他章节,这章内容没有相关的源代码或是项目.本章,我们将讨论向量,图形渲染理论,以及OpenGL. 向量 在阅读这本书的时候,你需要熟悉代数和几何 ...

随机推荐

  1. windows 10 上使用pybind11进行C++和Python代码相互调用 | Interfacing C++ and Python with pybind11 on windows 10

    本文首发于个人博客https://kezunlin.me/post/8b9c051d/,欢迎阅读! Interfacing C++ and Python with pybind11 on window ...

  2. 2019-9-12:渗透测试,基础学习,Linux下用户管理笔记

    linus用户管理/etc/passwd 保存用户信息/etc/shadow 保存密码信息,第二部分 !表示密码没有设置 cat /etc/passwd | grep xxx:查看特定账户信息 use ...

  3. day20191104笔记

    MyBatis笔记: 一.MyBatis半自动ORM映射框架, 将数据库中的数据和程序中的数据进行自动映射的前提条件 1. 数据库中的字段必须和程序中的属性保持一致 2. 程序中属性的数据类型必须是基 ...

  4. Android项目依赖库管理方式简介

    在实际的android项目开发过程中,我们一般都会用一些现有的第三方库来实现我们的需求,避免重复造轮子.普遍使用到的,例如:网络请求库.图片处理库.界面UI库(自定义View.动画效果等).各种第三方 ...

  5. mysql 插入string类型变量时候,需要注意的问题,妈的,害我想了好几个小时!!

    很多人在用php+MySQL做网站往数据库插入数据时发现如下错误: 注册失败!Unknown column '1a' in 'field list' 结果发现用数字提交是没有问题的,其他如char型就 ...

  6. Linux的ftp安装及使用

    FTP服务器的安装与配置(Ubuntu)1.查询是否安装vsftpd:  rpm -qa |grep vsftpd (rpm的安装:apt-get install rpm) 或者查询当前ftp进程:p ...

  7. python 协程与go协程的区别

    进程.线程和协程 进程的定义: 进程,是计算机中已运行程序的实体.程序本身只是指令.数据及其组织形式的描述,进程才是程序的真正运行实例. 线程的定义: 操作系统能够进行运算调度的最小单位.它被包含在进 ...

  8. mysql视图的基本操作

    1. 创建视图 CREATE VIEW 视图名 AS 查询语句 [WITH CHECK OPTION] - 这里WITH CHECK OPTION要求插入或者更新要满足查询语句where后面的条件 2 ...

  9. 【实用工具】使用Java封装可执行exe应用全过程

    目录 编写java代码 打包 创建exe文件 压缩 总结 本文将使用exe4j将java项目封装为可以发送给他人使用的工具为例,来记录将java项目封装为exe文件的全过程 编写java代码 目标:创 ...

  10. iOS开发-Apple Pay-苹果支付

    转自:http://www.open-open.com/lib/view/open1471952847228.html Apple Pay,是苹果公司在2014年苹果秋季新品发布会上发布的一种基于NF ...