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指令系统的更多相关文章

  1. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  2. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

  3. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  4. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  5. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  6. vue学习第一篇 hello world

    计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...

  7. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  8. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  9. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

随机推荐

  1. Command `bundle` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.

    呃呃,在写下面的代码时出现的问题,解决办法是npm install或者yarn,如果yarn报错,再npm install就可以了 下面的是携程App首页的样式,有轮播,我没有实现出来 代码如下: / ...

  2. Jmeter接口自动化

    基本思路: 在excel中维护测试用例,包括访问协议,服务器名或IP,路径,请求的方法,端口号,提交参数,测试结果等,使用CSV Data Set Config读取请求信息并写入测试结果,后期只要维护 ...

  3. Linux编译安装PHP参数说明

    php各参数配置详解 --prefix=/usr/local/php //指定 php 安装目录 --with-apxs2=/usr/local/apache/bin/apxs //整合apache, ...

  4. 第一节,windows和ubuntu下深度学习theano环境搭建

    先讲解windows下深度学习环境的搭建 步骤一  安装Anaconda Anaconda是一个用于科学计算的python发行版,支持linux,mac,windows系统,提供了包管理和环境管理的功 ...

  5. postman 介绍

  6. 洛谷 P1163"银行贷款"(二分)

    传送门 题解: 二分月利率,假设当前判断的月利率为x: 那么如何判断x是大了还是小了呢? 下面来分析一下Check()函数: bool Check(double x) { double tot=a; ...

  7. nginx 配置两个域名

    1.首先第一步安装: 参考:https://www.cnblogs.com/wyd168/p/6636529.html 启动: /usr/local/nginx/sbin/nginx -c /usr/ ...

  8. (线性dp,LCS) POJ 1458 Common Subsequence

    Common Subsequence Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 65333   Accepted: 27 ...

  9. python自动化开发-[第三天]-编码,函数,文件操作

    今日概要 - 编码详解 - 文件操作 - 初识函数 一.字符编码 1.代码执行过程 代码-->解释器翻译-->机器码-->执行 2.ASCII ASCII:一个Bytes代表一个字符 ...

  10. Nginx+Keeplived双机热备(主从模式)

    Nginx+Keeplived双机热备(主从模式) 参考资料: http://www.cnblogs.com/kevingrace/p/6138185.html 双机高可用一般是通过虚拟IP(漂移IP ...