内容简介

vue.js 是一个用来开发Web界面的前端库。

1.vue.js 是什么

vue.js 是一个构建数据驱动的web界面的库,vue.js 通过简单的API提供高效的数据绑定和灵活的组件系统。

  • vue.js 特性: 体积小,数据绑定,指令
  • vue 不支持低端浏览器ie6/7/8

2.vue 的使用

  • yarn add -D vue

    vue 正式发布于2014/2

3.数据绑定

数据绑定是将数据和视图相关联,当数据发生变化时,可以自动更新视图。

3.1语法
3.1.1 插值

文本插值,使用双大括号,{{}},

  • {{*text}} // 只需渲染一次数据,后续数据变化不再关心,可以通过*实现
  • 变量中是html片段时,可以使用三个大括号来绑定,如果使用两个大括号,html 会被当成是字符串
<span>{{{logo}}}<span>
logo: '<span>AAA</span>'
  • 双大括号也可以放在HTML标签内

    ``

``

注意: vue 指令和自身特性是不可以插值的,如果用错地方,vue会发出警告。

3.2表达式

{{}} 中接受表达式的值,表达式可以由JavaScript表达式和过滤器构成,过滤器可以没有,可以有多个。

表达式是各种数值、变量、运算符的综合体

{{example | filterA | filterB a b}} // 过滤器例子, a b 是参数
3.3指令

指令是带有v-前缀的特殊特性,其值限定为绑定表达式,也就是JavaScript表达式和过滤器。指令的作用是,当表达式的值发生变化时,将这个变化反应在DOM上

<div v-if="show">HHH </div>

另一种不同的指令,指令和表达式之前插入一个参数,用冒号分隔

<a v-bind:href="url"></a>
<div v-on:click="action"></div>
3.4分隔符 {{ | }}

vue 中数据绑定的语法可以配置,如果不喜欢{{}},可以自己设置,可以在Vue.config 中绑定语法,Vue.config是一个对象,包含vue 中的所有全局配置,可以在vue实例化钱修改其中的属性,

【vue 权威指南】 学习笔记 一的更多相关文章

  1. HTTP权威指南-学习笔记

    目录 HTTP权威指南-学习笔记 HTTP: Web的基础 URL与资源 HTTP报文 连接管理 HTTP结构 Web服务器 代理 缓存 集成点: 网关,隧道及中继 Web机器人 识别,认证与安全 客 ...

  2. JavaScript 权威指南-学习笔记(一)

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  3. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  4. Hadoop权威指南学习笔记二

    MapReduce简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.n ...

  5. Hadoop权威指南学习笔记一

    Hadoop简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出.一起学习一起进步. 转载请注明:http://blog.csdn.net/ ...

  6. Hadoop权威指南学习笔记三

    HDFS简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考.有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.net/my ...

  7. IDA Pro权威指南学习笔记(一)

    一直不懂逆向,最近刚好不忙,于是学习逆向,用来做笔记,顺便和大家分享交流. 参考书籍<IAD PRO权威指南> 工具: PETools: ETools 是另一款很好的PE文件编辑工具,以前 ...

  8. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  9. maven权威指南学习笔记(五)—— POM

    1. 简介 Archetype插件通过 pom.xml 文件创建了一个项目.这就是项目对象模型 (POM),一个项目的声明性描述. 当Maven运行一个目标的时候,每个目标都会访问定 义在项目POM里 ...

  10. maven权威指南学习笔记(三)——一个简单的maven项目

    目标: 对构建生命周期 (build  lifecycle),Maven仓库 (repositories),依赖管理 (dependency management)和项目对象模型 (Project O ...

随机推荐

  1. 杭电-------2055An Easy Problem(C语言)

    #include<stdio.h> int main() { int m; int i; scanf("%d", &m); ]; int y; int z; ; ...

  2. nrm安装与配置(nrm管理npm源)

    1.nrm nrm(npm registry manager )是npm的镜像源管理工具,有时候国外资源太慢,使用这个就可以快速地在 npm 源间切换 2.安装nrm 在命令行执行命令,npm ins ...

  3. [WPF 自定义控件]创建包含CheckBox的ListBoxItem

    1. 前言 Xceed wpftoolkit提供了一个CheckListBox,效果如下: 不过它用起来不怎么样,与其这样还不如参考UWP的ListView实现,而且动画效果也很好看: 它的样式如下: ...

  4. Android中使用Notification在状态栏上显示通知

    场景 状态栏上显示通知效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新 ...

  5. redis之master.slave主从复制

    简介 主机数据更新后根据配置和策略,自动同步到备机的master/slave机制,master以写为主,slave以读为主 从库配置 配置从库,不配主库 配置从库: 格式: slaveof 主库ip ...

  6. Redis-位图

    关于位图,可能大家不太熟悉, 那么位图能干啥呢?位图的内容其实就是普通的字符串,也就是byte数组,我们都知道 byte 8 位无符号整数 0 到 255 说个场景.比如你处理一些业务时候,往往会存在 ...

  7. 关于...corresponds to your MySQL server version for the right syntax to use near '?' at line 1的解决办法

    完整报错信息: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual tha ...

  8. Node.js文档-os

    获取操作系统相关信息 引用 const os = require('os') os.cpus() 获取当前机器的CPU信息 console.log(os.cpus()) 打印结果: [ { model ...

  9. 通过/dev/mem操作物理内存

    /dev/mem设备可以用来访问物理内存.下面一段应用程序的代码,实现了通过/dev/mem对物理内存空间中SRAM1的访问. #include <stdio.h> #include &l ...

  10. springboot打成war包并携带第三方jar包

    1.修改打包方式为war     <packaging>war</packaging> 2.添加第三方依赖的jar到pom     我的第三方jar包在resoueces目录下 ...