实例化语法

var vm = new Vue({

  // 选项

})

Vue 构造器中的内容

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Vue 测试实例</title>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

<body>

    <div id="vue_det">

        <h1>site : {{site}}</h1>

        <h1>url : {{url}}</h1>

        <h1>{{details()}}</h1>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: '#vue_det',

            data: {

                site: "我的第一个Vue应用",

                url: "www.xxxxx.com",

                alexa: "10000"

            },

            methods: {

                details: function() {

                    return  this.site + " - 学的既是技术，更是梦想！";

                }

            }

        })

    </script>

</body>

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：

<div id = "vue_det"></div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

如何定义数据对象

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">

    <h1>site : {{site}}</h1>

    <h1>url : {{url}}</h1>

    <h1>{{details()}}</h1>

</div>

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

<div id="vue_det">

    <h1>site : {{site}}</h1>

    <h1>url : {{url}}</h1>

    <h1>Alexa : {{alexa}}</h1>

</div>

<script type="text/javascript">

// 我们的数据对象

var data = { site: "我的第一个Vue应用", url: "www.xxxxxxx.com", alexa: 10000}

var vm = new Vue({

    el: '#vue_det',

    data: data

})

// 它们引用相同的对象！

document.write(vm.site === data.site) // true

document.write("<br>")

// 设置属性也会影响到原始数据

vm.site = "Runoob"

document.write(data.site + "<br>") // Runoob

// ……反之亦然

data.alexa = 1234

document.write(vm.alexa) // 1234

</script>

一些有用的实例属性与方法

它们都有前缀 $，以便与用户定义的属性区分开来。例如：

<script type="text/javascript">

// 我们的数据对象

var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}

var vm = new Vue({

    el: '#vue_det',

    data: data

})

document.write(vm.$data === data) // true

document.write("<br>") // true

document.write(vm.$el === document.getElementById('vue_det')) // true

</script>

Vue（四）：实例化第一个Vue应用的更多相关文章

  1. 一、vue：如何新建一个vue项目

    比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须 ...

  2. Vue系列——如何运行一个Vue项目

    声明 本文转自:如何运行一个Vue项目 正文 一开始很多刚入手vue.js的人,会扒GitHub上的开源项目,但是发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境 ...

  3. Vue.js——2.第一个Vue程序

    代码 <div id="app"> <p>{{msg}}</p> </div> <script> let vm=new ...

  4. vue学习笔记-初始化一个vue项目(1)

    1.cnpm install -g vue-cliUsage:vue init <template-name> <project-name> 2.我们一般使用webpack模版 ...

  5. VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

  6. 【vue】创建一个vue前端项目，编译，发布

    npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...

  7. vue 学前班002(创建一个实例)

    创建一个Vue实例 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么,它是怎么做到的,我们的代码要怎 ...

  8. Vue学习第一天：Vue.js指令系统

    1. 如何使用Vue.js? 1.1 直接引入 - <script src="./statics/vue.min.js"></script> - 引入之后在 ...

  9. 前端框架Vue------＞第一天学习、Vue学习的路径、Vue官网（1）

    文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...

随机推荐

  1. linux C++ 莫名奇异的段错误(segmentation fault)，无法调用其他函数

    进来在linux下开发C++项目,遇到了非常奇怪的bug. 项目须要多线程实现,在写好代码后,每当执行到线程函数内部,当内部调用其他函数如printf.fopen等时就会提示段错误(segmentat ...

  2. 〖Android〗屏幕触屏事件录制与回放

    需求: 不管是做自动化测试的,还是传媒技术的,自动化操作Android App是一种操作需求: 自动化的操作可以节省很多的人力资源投入: 实现: Android UI界面的自动化,通常有两个方法: 1 ...

  3. 【DB2】清理日志文件db2diag.log

    在数据库运行过程中,会产生很多的日志,进而使日志文件db2diag.log变大 当占用磁盘空间太大的时候,应该怎么处理呢? 方法一: db2inst1@Linux:/db2home/db2inst1/ ...

  4. 【AIX】用户、组合安全管理

    用户介绍 用户的概述 比如:我们在使用AIX系统的时候,同事需要使用我的计算机,但是我不想让他用我的用户登录,我的用户存在一些特殊信息,只能自己查看,此时就可以建立一个普通用户给他使用即可. 1.单用 ...

  5. 7、redis之使用spring集成commons-pool来操作常见数据类型

    环境的搭建参见:http://www.cnblogs.com/yangzhilong/p/4729857.html 下面直接贴具体的测试代码: package com.yzl; import java ...

  6. mysql匹配模式

    “_”:匹配任何单个字符“%”:匹配任意数目字符(包括零字符)“[abc]”:匹配“a”.“b”或“c”.为了命名字符的范围,使用一个“-”.“[a-z]”:匹配任何字母“[0-9]”:匹配任何数字“ ...

  7. 【TP5.0】model的操作方法

    tp5 中 model 的新增方法 //默认主键为自动识别,如果需要指定,可以设置属性: namespace app\index\model; use think\Model; class User ...

  8. E325 注意 发现交换文件

    git中的 交换文件应该是保持当前git的session的一种文件. git中,如果出现这个有两种原因: 1.你开了两个git客户端对同一个git仓库进行了操作.如果是这样的话,退出一个.正常退出,不 ...

  9. 支持向量机-SVM 学习

    一 .支持向量机(SVM) 1.1 符号定义 标签 y 不再取 0 或 1,而是: y∈{-1, 1} 定义函数: 向量,没有第 0 个维度,b 为截距,预测函数定义为: 1.2 函数间隔与几何间隔 ...

  10. 九款命令行工具助力Linux环境下的数据分析

    对于大多数熟悉了图形工作环境的朋友来说,电子表格工具无疑是第一选项.但命令行工具同样能够更快更高效地解决问题——且只须稍微学习即可上手. 大部分此类工具冻严格局限于Linux,而多数可同样运行在Uni ...