<div id="app" class="app">
       <p>{{ message }}</p>
       <p>{{ info }}</p>
     <!-- 等价于下面的写法-->
       <div v-html="message"></div>
       <div v-html="info"></div>
 </div>
 <script src="js/vue.js"></script>
 <script>
     new Vue({
           el: '.app',  // #app也是可以的
           data: {
             message: 'hello The World',
             info:'我是九九'
           }
     })
 </script>

在看vue.js的API的过程中,我发现在选择作用对象时,只提及了#app,我就想通过.app可以不呢?结果一试也可以。

对于data对象中变量的引用也是提供了两种方法。一:数据绑定最常见的形式就是使用{{}}的文本插值;二:使用v-html指令用于输出htm代码。

另外,指令是带有v-前缀的特殊属性,用于在表达式的值改变时,将某些行为应用到DOM上。

vue.js学习第一节的更多相关文章

  1. vue.js学习第一天,了解vue.js

    vue.js是一个前端框架,他与jquery不同,jquery是一个js库,而vue.js是js的前端框架. vue.js对我们前端页面入侵比较大,而jquery则不然.那我们还为什么要使用vue.j ...

  2. Vue.js开始第一个项目

    前端架构之路:使用Vue.js开始第一个项目   Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...

  3. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  4. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  5. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  6. MapServer Tutorial——MapServer7.2.1教程学习——第一节:MapServer的基本配置管理,静态地图应用以及MapFile文件

    MapServer Tutorial——MapServer7.2.1教程学习——第一节:MapServer的基本配置管理,静态地图应用以及MapFile文件 前言 万事开头难,有了<MapSer ...

  7. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  8. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  9. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

随机推荐

  1. Bash shell 的算术运算有四种方式

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~1:使用 expr 外部程式加法 r=`expr 4 + 5`echo $r注意! '4' '+' '5' 这三者之间要有空白r=`e ...

  2. iOS10适配——相机,通讯录,麦克风等权限设置

    崩溃:[access] This app has crashed because it attempted to access privacy-sensitive data without a usa ...

  3. 自己实现的sax XML解析,可能会有误

    package com.agatha.bean; public class OrderInfoBean { private String order_id; private String room_t ...

  4. FZU 2112 Tickets

    这个问题可以转变一下,先要知道有几个连通块,连通块之间肯定需要添加一条边, 还需要知道每个连通块内部需要添加几条边,这个问题等价于求一张图至少需要几笔画成,这个问题的答案是度为奇数的点的个数/2 #i ...

  5. LPC2478中断控制器以及串口详解

    LPC2478的中断系统 LPC2478使用的是ARM PrimeCell向量中断控制器,一共支持32个中断向量,处于AHB空间便于系统快速访问,在中断向量的硬件优先级上还有一层可以用户自己设计的软件 ...

  6. iOS开发之监听键盘高度的变化 分类: ios技术 2015-04-21 12:04 233人阅读 评论(0) 收藏

    最近做的项目中,有一个类似微博中的评论转发功能,屏幕底端有一个输入框用textView来做,当textView成为第一响应者的时候它的Y值随着键盘高度的改变而改变,保证textView紧贴着键盘,但又 ...

  7. 【转】Linux 上的最佳 C/C++ IDE

    IDE介绍收藏篇: 个人linux下开发经验不多,一般也都使用shell远程连接使用命令行模式开发.如果自己在自己机器上开发还是有IDE要方便很多,看到这篇帖子就果断的转过来先收藏下,之前自己使用过E ...

  8. python内置函数all使用的坑

    在代码的改造过程中,因为忽略了一个问题导致数据异常,在改造的过程中以及后续的review中都没注意到这个问题,单元测试也没有覆盖到,记录如下.这个坑在于all的使用上,如果参数为空元组或空列表时,返回 ...

  9. 微信小程序之----底部菜单action-sheet

    action-sheet action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是 ...

  10. u-boot源码下载

    1. 使用git下载u-boot源码  1.1 clone u-boot源码仓库 可以使用git.HTTP.和 rsync协议来下载u-boot源码.你可以使用如下方法来克隆源码树: $ git cl ...