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的时候学过 ...
随机推荐
- NOI 2002 贪吃的九头龙
树形dp #include<bits/stdc++.h> #define N 305 using namespace std; struct LEB{ int to,nxt,w; }e[N ...
- [luogu4860][Roy&October之取石子II]
题目链接 思路 这个题和上个题类似,仔细推一下就知道这个题是判断是否是4的倍数 代码 #include<cstdio> #include<iostream> #define f ...
- Django 配置QQ邮箱连接
首先要在settings.py内进行配置 # 邮件服务配置文件 EMAIL_USE_SSL = True # 邮箱服务 EMAIL_HOST = 'smtp.qq.com' # 端口号 EMAIL_P ...
- C实现读写文件
https://www.cnblogs.com/zhanghongfeng/p/7726199.html https://www.cnblogs.com/xudong-bupt/p/3478297.h ...
- jQuery、layer实现弹出层的打开、关闭功能实例详解
本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层, ...
- tar压缩解压文件
查看visualization1.5.tar.gz 压缩包里面的内容: $ tar -tf visualization1.5.tar.gz 解压指定文件JavascriptVisualRelease/ ...
- window下域名解析系统DNS诊断命令nslookup详解
Ping指令我们很熟悉了,它是一个检查网络状况的命令,在输入的参数是域名的情况下会通过DNS进行查询,但只能查询A记录和CNAME(别名)记录,还会返回域名是否存在,其他的信息都是没有的.如果你需要对 ...
- js 各种事件 如：点击事件、失去焦点、键盘事件等
事件驱动: 我们点击按钮 按钮去掉用相应的方法. demo: <input type="button" v ...
- mybatis多数据源报错
2018-12-06 16:58:35,709 [ main ] - [ INFO ] [ org.springframework.core.KotlinDetector : 57 ] - Kotli ...
- 2017-12-15python全栈9期第二天第三节之使用while循环输出0到10不包含7
#!/user/bin/python# -*- coding:utf-8 -*-count = 0while count < 10: count += 1 if count == 7 : con ...