<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Vue 学习</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="app">

  <p>{{ print_message() }}</p>

  <p>{{ say_name() }}</p>

  <p>{{ age }}</p>

</div>

<script>

    var data = { message: 'Hello Vue.js!', name: 'rao', age: 19 } //data的所有属性都会响应式地添加到app中的data，即使没有的属性

    var app = new Vue({

      el: '#app',

      data: data,

      methods: {

          print_message: function(){

              return this.message;

          },

          say_name: function(){

              return this.name;

          }

      }

    });

    document.write(data.fuck === app.fuck) //true

    document.write(app.name); //data的属性这样引用

    document.write(app.$el === document.getElementById('app')); //实例属性前要加$

    document.write(app.$data === data); //实例属性前要加$

</script>

</body>

</html>

vue构造器的内容的更多相关文章

  1. 2、Vue构造器和扩展

    1.VUE构造器简介 VUE构造器是一个非常重要的语法. 每个Vue.js应用都是通过构造函数Vue创建一个根实例. New了Vue对象,然后调用了这个vue对象的构造器,并向构造器传入了数据. 在实 ...

  2. vue.js主要内容

    vue的主要内容 1.了解vue 2.vue开发环境的搭建和脚手架工具的使用 3.vue具体的指令和项目实战 1.了解vue 1.具备基础:html.css.js,模块化概念.ES6语法(简单即可) ...

  3. vue构造器以及实例属性

    一.构造器 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项对象): 3.参数:选项对象可 ...

  4. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  5. VUE 实现复制内容到剪贴板功能

    注: 依赖第三方插件 clipboard 一.安装插件 npm install vue-clipboard2 --save 二.全局注入(main.js) import VueClipboard fr ...

  6. 在sublime text 3中让.vue文件的内容变成彩色

    直接上步骤: 1.按住ctrl + shift + p 2.输入install Package 3.输入Vue Syntax Highlight 执行完以上3步,再次打开.vue文件,会发现里面的内容 ...

  7. 006——VUE中的内容与属性中使用javascript表达式的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Vue中slot内容分发

    <slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性 <!DOCTYPE html> <html> <head> <meta ...

  9. 使用slot-scope复制vue中slot内容

    有时候我们的vue组件需要复制使用者传递的内容. 比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果 使用者关注轮播内容的静态效果,组件负责让其滚动起来 组件: <div cl ...

随机推荐

  1. 【Android自己定义控件】圆圈交替，仿progress效果

    还是我们自定View的那几个步骤: 1.自己定义View的属性 2.在View的构造方法中获得我们自己定义的属性 3.重写onMesure (不是必须) 4.重写onDraw 自己定义View的属性 ...

  2. RSEG用法和汇编问号的涵义

    RSEG是段选择指令,要想明白它的意思就要了解段的意思.段是程序代码或数据对象的存储单位.程序代码放到代码段,数据对象放到数据段.段分两种,一是绝对段,一是再定位段.绝对段在汇编语言中指定,在用L51 ...

  3. TLB的作用及工作原理

    TLB的作用及工作过程 以下内容摘自<步步惊芯——软核处理器内部设计分析>一书 页表一般都很大,并且存放在内存中,所以处理器引入MMU后,读取指令.数据需要访问两次内存:首先通过查询页表得 ...

  4. mac 上安装 openJDK11

    紧接上篇,mac现在基本上作为开发者的主力机,当然也要安装jdk的 首先需要卸载原来的jdk8,如下: ls /Library/Java/JavaVirtualMachines/ sudo rm -r ...

  5. Fortran一个获取硬件系统信息的函数库

    此函数库提供了 Visual Fortran 上获取硬盘ID,CPU编号,windows安装时间及文件头部校验的四个函数.可用于简单的程序加密.(但切勿用于商业性很强的地方)              ...

  6. Python中的__name__和类

    1.   python中if __name__ == '__main__': 的解析 经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是 ...

  7. 《Essential C++》读书笔记 之 目录导航

    <Essential C++>读书笔记 之 目录导航 2014-07-06 第一章:<Essential C++>读书笔记 之 C++编程基础 第二章:<Essentia ...

  8. C++ 函数模板默认的模板参数

    函数的默认模板参数 你可以为模板参数定义默认值,它们被称作 default template arguments(默认模板参数). 它们甚至可以指向前一个模板参数. 1. 可以直接使用 operato ...

  9. "title_activity_dist" is not translated in "zh-rCN" (Chinese: China)

    根据报错提示,是说我没有对string文件做国际化翻译操作,但是我报错的项目并没有做国际化,所以并没有values-zh-rCN和values-zh-rTW两个文件夹,最后我发现原来是当前项目引用的一 ...

  10. hdoj：2085

    核反应堆 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...