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. （一）flask-sqlalchemy的安装和配置

    在使用flask-sqlalchemy之前要先了解ORM模型,什么叫做ORM模型 一.什么是ORM ORM 全拼Object-Relation Mapping. 称为对象-关系映射 主要实现模型对象到 ...

  2. Codeforces Round #508 (Div. 2) C D

    C: C - Gambling 给你两个数列  每一回合A可以选择从第一个序列里面选一个数或者清除第二个序列里面选一个数 同理B能从第二序列里面选数或者清除第一个序列里面一个数 然后 求A所选的数之和 ...

  3. Vue -- 双向过滤器去除html标签

    <div id="box"> <input type="text" v-model="msg | filterHtml"& ...

  4. 洛谷P3354 河流

    有点权边权的树,选出k个关键点,根必须选.每个点的贡献为点权 * 到最近的关键祖先的距离.求最小总贡献. 解:树形DP是最毒瘤的算法...... 设fxij表示以x为根的子树中选了j个关键点,且x的最 ...

  5. 关于在JTextPane(或JEditorPane)中返回文本部分(Text)

    今天遇到这样的一个问题,我需要取得当前JTextPane()中的文件,但是 JTextPane.getText()返回的是网页的HTML源代码,在网上搜索了一下,找到了一个方法: //返回消息框的无格 ...

  6. Django（十三）ajax 与 Bootstrap,font-awesome

    prop,attr,val font-awesome:字体,图标库 对话框添加,删除,修改: 添加: Ajax偷偷向后台发请求: 1. 下载引入jQuery 2. $.ajax({ url: '/ad ...

  7. 在gitlab新建空项目，将本地的git仓库的内容上传

    gitlab新建了这个项目. 按照官网的步骤上传代码 一:将本地代码上传到本地仓库 1.进入项目文件夹 git init 2.项目代码添加到本地git git add . 3.提交到stage区域 g ...

  8. 《Apache kafka实战》读书笔记-kafka集群监控工具

    <Apache kafka实战>读书笔记-kafka集群监控工具 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如官网所述,Kafka使用基于yammer metric ...

  9. Centos 7 下监控与告警部署

    微信消息自动推送 注册企业微信 企业微信地址:https://work.weixin.qq.com 注意:上面我只是做个范例,我实际是有自己的企业微信的,下面的企业微信配置和上面的企业微信名称对不上, ...

  10. JDBC-Batch 批量执行

    JDBC 批处理 SQL 语句 首先在 jdbc 的 url 中加上 rewriteBatchedStatements=true,只有开启了这个 Mysql 才会执行批处理,否则还是一条一条执行 St ...