<!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. chrome插件离线包下载和安装

    添加扩展一般会有个url https://chrome.google.com/webstore/detail/axure-rp-extension-for-ch/dogkpdfcklifaemcdfb ...

  2. 发现2017年最好的CSS框架

    如今,无数的框架出现在定期而少数人喜欢自助,Foundation和angular.js主宰了整个世界的发展.CSS代表用于描述HTML(或XML)文档表示的样式表语言.一个框架被定义为一个包,它由一组 ...

  3. 关于bazel使用笔记

    当我们在build一个文件时,需要另外的放置cache时,我们需要: bazel --output_user_root=/path/to/directory build //foo:bar  

  4. 信用评分及模型原理解析（以P2P网贷为例）

    本博文将针对消费贷款领域的信用评分及其模型进行相关研究探讨.虽然人人都可以通过对借款方在Lending Club(国外最大的P2P网站)和Prosper上的历史借贷数据进行分析,但我相信,了解消费信贷 ...

  5. 设置 WPF 的内容支持触摸直接滚动

    在滚动内容上设置属性 ScrollViewer.PanningMode 的值即可. 另外可重写 OnManipulationBoundaryFeedback 方法来替换系统默认的滚动到最上最下时触发的 ...

  6. python – 基于pandas中的列中的值从DataFrame中选择行

    如何从基于pandas中某些列的值的DataFrame中选择行?在SQL中我将使用: select * from table where colume_name = some_value. 我试图看看 ...

  7. tf更新tensor/自定义层

    修改Tensor特定位置的值 如 stack overflow 中提到的方案. TensorFlow不让你直接单独改指定位置的值,但是留了个歪门儿,就是tf.scatter_update这个方法,它可 ...

  8. linux 测试网络url命令

    1.curl 地址 或者 wget url地址 [hxxxx@iZ23vy2msooZ ~]$ curl www.baidu.com<!DOCTYPE html><!--STATUS ...

  9. 【中间件安全】IIS6安全加固规范

    1. 适用情况 适用于使用IIS6进行部署的Web网站. 2. 技能要求 熟悉IIS配置操作,能够利用IIS进行建站,并能针对站点使用IIS进行安全加固. 3. 前置条件 1. 根据站点开放端口.进程 ...

  10. 关于vmware 11.1安装windows 7操作系统时报错 Unist specified don’t exist. SHSUCDX can’t install

    笔者今天在vmware 11.1 虚拟机下使用光驱安装windows 7 32位操作系统时,报错: Unist specified don’t exist. SHSUCDX can’t install ...