<!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. Ant之build.xml配置详解【转】

    原文:https://blog.csdn.net/mevicky/article/details/72828554 前言国内关于build.xml的配置资料太零散了,实在是受不了,故而将自己的笔记整理 ...

  2. 处理器 趣事 CPU/GPU/TPU/DPU/BPU

    有消息称,阿里巴巴达摩院正在研发一款神经网络芯片——Ali-NPU,主要运用于图像视频分析.机器学习等AI推理计算.按照设计,这款芯片性能将是目前市面上主流CPU.GPU架构AI芯片的10倍,而制造成 ...

  3. shell符号解释

    #符号详解 () 在子shell中运行 (a=1);echo $a,结果是空,因为a=1不是在当前shell中运行的(a=1);(echo $a)也是空的 小技巧:(cd $path, do some ...

  4. c# 非调试状态下面执行

    #if !DEBUG                View("ErrorSimple").ExecuteResult(ControllerContext);#endif

  5. Nginx防压力测试

    一.ab压力测试方式为: $ab -n 1000 -c 100 http://www.abc.com:80/ 二.直接简单的方法限制同一个IP的并发最大为10:(以宝塔管理工具为例) 1.打开Ngin ...

  6. 【Vegas原创】MAC下，idea手动maven jar包的方法

    1,到自己的项目目录下 Vegass-MacBook-Air:gms-boyol Vegas$ pwd/Users/Vegas/SynologyDrive/Coding/workspace/gms-b ...

  7. Nmap备忘单

    #在推特上看到,感觉做的相当不错就转一波. 目标规格 开关 例 描述   nmap 192.168.1.1 扫描一个IP   nmap 192.168.1.1 192.168.2.1 扫描特定的IP地 ...

  8. 码云git 使用配置

    码云git 使用配置:www.gitee.com安装:1.Git-2.18.0-64-bit.exe:2.GitExtensions-2.51.04.msi:3.GitExtensionsVSIX.v ...

  9. Python3字典

  10. 消息中间件系列五：RabbitMQ的使用场景（异步处理、应用解耦）

    一.异步处理 场景: 用户注册,写入数据库成功以后,发送邮件和短信. 准备工作: 1)安装RabbitMQ,参考前面的文章 2)新建一个名为RabbitMQAsyncProc的maven web工程, ...