Vue学习第一天：Vue.js指令系统
1. 如何使用Vue.js?
1.1 直接引入
- <script src="./statics/vue.min.js"></script>
- 引入之后在全局就会有一个Vue Function
- cdn
-npm
1.2 vue的使用
<!DOCTYPE html>
<html>
<head>
<!--第一步：引入Vue，全局暴露一个Vue Function-->
<script src="./statics/vue.min.js"></script>
</head>
<body>
<!--第二步：声明领地（作用范围）
<div id="app">xxxx</div>
<script>
// 第三步：创建一个Vue实例
new Vue({
// 第四部：查找作用域（必须的参数）
el: "#app",
data: {
xxxx: "今晚去我家"
}
})
</script>
</body>
</html>
2. Vue.js的模板语法
<p>{{ xxxxx + xxxxx }}</p>
<p>{{ '今晚去我家' }}</p>
<p>{{ {'name': "鑫姐" } }}</p>
<p>{{ 1 > 2 ? "大于" : "傻逼" }}</p>
<p>{{ python + linux }}</p>
<p>{{ totalScore }}</p>
3. Vue.js指令系统
3.1 指令以v-开头，用来操作标签的文本值，操作标签的属性，绑定事件
- 操作标签的文本值
v-text: 渲染文本值
v-html: 渲染原始标签
v-for: 处理丰富的数据结构
v-if, v-else-if, v-else: 判断标签是否显示
v-show：判断标签是否显示
渲染的开销
v-if：低
v-show：高
切换的开销
v-if：appendChild, removeChild 高
v-show：低
- 操作标签的属性（class，href，src）
v-bind:href=""
v-bind:class=""
小结：对于属性的操作，一定是通过动态的数据来进行增加或者删除的
- 绑定事件
v-on:click="myClick"
注意：属性通过vue绑定的时候，必须加上冒号
- 计算属性
- 可以监听多个值（只要数据修改，就触发重新计算）
- 页面一加载就计算
- 双向数据绑定
v-model
4. 轮播图
Vue学习第一天：Vue.js指令系统的更多相关文章
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
- day 80 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- vue学习第一篇 hello world
计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
随机推荐
- ArcGIS for qml - 地址地标转换为经纬度（地理编码）
实现输入地址地标转换为其经纬度 本文链接:地理编码 作者: 狐狸家的鱼 Github: 八至 一.地理编码 1.地理编码含义 地址编码(或地理编码)是使用地址中包含的信息来插入地图上的相应位置的过程. ...
- 前端JS Excel导出
本文转载自:https://blog.csdn.net/plmzaqokn11/article/details/73604705 下载table2Excel插件 <input type=&quo ...
- JavaScript ES6 核心功能一览
JavaScript 在过去几年里发生了很大的变化.这里介绍 12 个你马上就能用的新功能. JavaScript 历史 新的语言规范被称作 ECMAScript 6.也称为 ES6 或 ES2015 ...
- [luogu3391][文艺平衡树]
题目链接 思路 splay区间操作的裸题. 假如要对l-r这段区间操作,那么就先把l-1伸展到根节点,然后把r +1伸展为根的儿子.这样r + 1的左儿子就是要操作的区间了.只要在上面打上标记,以后每 ...
- Linux：不同文件相同列字符合并文件（awk函数）
存在file1.txt,其内容如下: H aa 0 0 1 -9 H bb 0 0 2 -9 H cc 0 0 2 -9 存在file2.txt,其内容如下: H aa 0 0 0 -9 asd qw ...
- 第二十六节，滑动窗口和 Bounding Box 预测
上节,我们学习了如何通过卷积网络实现滑动窗口对象检测算法,但效率很低.这节我们讲讲如何在卷积层上应用这个算法. 为了构建滑动窗口的卷积应用,首先要知道如何把神经网络的全连接层转化成卷积层.我们先讲解这 ...
- ElasticSearch6.5.0 【安装IK分词器】
不得不夸奖一下ES的周边资源,比如这个IK分词器,紧跟ES的版本,卢本伟牛逼!另外ES更新太快了吧,几乎不到半个月一个小版本就发布了!!目前已经发了6.5.2,估计我还没怎么玩就到7.0了. 下载 分 ...
- adb 查看包名或其他
http://blog.sina.com.cn/s/blog_5b478f870102v5bo.html
- POJ 2528 Mayor's posters (线段树+离散化）
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions:75394 Accepted: 21747 ...
- jQuery中mouseleave和mouseout的区别详解
很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p> ...