<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. hibernate和ibatis的区别

    通过别人的资料,进行自己关注的一些扼要点的整理 共同点: 1. 不同点:1. 自动化程度上,hibernate是全自动化的orm框架,提供了对象到数据库的完全映射和sql的内部自动生成,其对象映射是指 ...

  2. myeclipse设置以及快捷键

    http://blog.csdn.net/anxin323/article/details/40214467 如何查看jar包里的源码和doc文档? 1. jar文件右键properties--jav ...

  3. (四)Jquery Mobile表单

    Jquery Mobile表单与列表 一.JM表单      1.表单      普通html表单            效果:          2.只能输入数字的表单           效果:  ...

  4. 转载:ionic+nodejs开发遇到的跨域和post请求数据问题

    转载自:http://www.cnblogs.com/ytu2010dt/p/5471366.html 最近学习ionic+nodejs开发混合app中遇到了一些问题,在此总结一下. 项目地址 htt ...

  5. linux 驱动入门1

    世事艰难,人生不易. 夜深人静时候,回顾过去,往事历历在目.创南京,混苏州,下上海.都付出了巨大的努力.多少个不眠的夜晚,在冥思苦想.天生愚钝.又不是学计算机的.一直没较为深刻的理解 编程什么东西,一 ...

  6. bootstrap switch功能

    bootstrap switch是一个按钮开关,点击时获取其状态可通过以下代码: <input id="email_switch_state" type="chec ...

  7. PHP文件夹操作2

    mkdir("路径文件名"); 创建文件夹 imdir("路径文件名"); 删除文件夹(只能删除空的文件夹) rename("路径",&qu ...

  8. Android线程之异步消息处理机制(二)——Message、Handler、MessageQueue和Looper

    异步消息处理机制解析 Android中的异步消息处理主要有四个部分组成,Message.Handler.MessageQueue和Looper. 1.Message Message是在线程之间传递的消 ...

  9. EasyUI--datebox设置默认时间

    1. html代码: <input id="txtBeginTime" class="easyui-datebox" data-options=" ...

  10. ftp_get_file_and_directory

    class DirectoryItem { public Uri BaseUri; public string AbsolutePath { get { return string.Format(&q ...