<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <meta http-equiv="x-ua-compatible" content="ie=edge"/>

    <title>Vue.js入门</title>

    <meta name="viewport" content="width=device-width,initial-scale=1" />

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

</head>

<body>

    <h1 id="demo1">hello,{{name}}!</h1>    <!-- View部分 -->

    <h1 id="demo2">hello,china!</h1>

<script>    /*model部分*/

    var app=new Vue({

        el:'#demo1',//声明vue.js管理的边界

        data:{    //data核心作用存放显示在页面中的数据，需要是一个对象。

            name:'jack'

        }

    });

</script>

</body>

</html>

第一步：引入vue.js

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

第二步：Vue.js提供了一个Vue，我们需要创建一个对象。

var app=new Vue({

　　el:'#demo1';　　//声明Vue.js管理的边界

　　data:{　　　　　 //data核心作用是存放显示在页面中的数据，需要的是一个对象。

　　　　name:'jack'

　　}

});

第三步：在用户界面view中，通过{{}}的形式将data中的数据显示在页面中。

在用户界面中，{{}}代码中绑定的data的key，而在页面中显示的是该key的value。

Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。

tips:

app这个变量会代理Vue中的data数据，所以我们访问data中的数据的时候，直接用app.name就可以了。

这样，如果我们要实现前后台交互，只要将从后台得到的数据，放在data中，页面就会自动绑定，这样就实现了从Model -> View的数据流向。

Vue.js入门（一）的更多相关文章

  1. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  2. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  3. Vue.js 入门：从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  4. Vue.js入门

    之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...

  5. Vue.js 入门指南之“前传”（含sublime text 3 配置）

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  6. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  7. vue.js 入门学习

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

  8. [转]Vue.js 入门教程

    本文转自:http://www.runoob.com/w3cnote/vue-js-quickstart.html 什么是 Vue.js? Vue.js 是用于构建交互式的 Web  界面的库. Vu ...

  9. Vue.js入门系列（一）

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

随机推荐

  1. Meshlab

    打开ply文件的软件,Meshlab. 下载 http://yunpan.cn/cgapukD2La9Se (提取码:37f1) http://pan.baidu.com/s/1pJLnWqJ

  2. skimage.io.imread vs caffe.io.load_image

    这两周在跑一个模型,我真的是被折腾的要崩溃了. 最后原因就是数据类型的问题,你说是不是应该管小黑屋啊. skimage.io.imread得到的是uint8的数据,而caffe.io.load_ima ...

  3. 设置禁止网络连接后，jdbc如何连接到数据库

    设置禁止网络连接,可在my.ini文件中添加如下两行 skip-networking enable-named-pipe 可以通过 SHOW VARIABLES LIKE '%skip_ne%' 来查 ...

  4. React Native ref高级用法&&setNativeProps使用

    ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为 callback.这一特性让开发者对ref的使用更加灵活. render() { retu ...

  5. 【Effective C++ 读书笔记】条款04：确定对象使用前已先被初始化

    永远在使用对象之前先将它初始化.对于无任何成员的内置类型,你必须手工完成此事. 至于内置类型以外的任何其他东西,初始化责任落在构造函数身上.规则很简单:确保每一个构造函数都将对象的每一个成员初始化. ...

  6. Linux编译移植Qt5的环境_Xillinx的ZYNQ平台

    Linux编译Qt环境 2017年的十一假期,足不出户,一个人在教研室里面搞Qt的移植.我手里面有Samsung的CortexA8,Samsung的 CortexA53还有Ti的Sitara系列的AM ...

  7. C语言进阶——循环语句07

    循环语句的基本工作方式: 通过条件表达式判定是否执行循环体 条件表达式遵循if语句表达式的原则 do,while,for的区别: do语句先执行后判断,循环体至少执行一次 while语句先判断后执行, ...

  8. 牛客网暑期ACM多校训练营（第四场） F Beautiful Garden

    链接: https://www.nowcoder.com/acm/contest/142/F 题意: n x m的矩形,选个p x q的矩形去掉,两个矩形中⼼重合,去掉后的矩形上下左右对称 求(p, ...

  9. wlr设置 Blog Ping

    ref:http://www.cnblogs.com/zhangyang/archive/2011/07/22/2113856.html 设置 Blog Ping 1.什么是Ping服务(Ping S ...

  10. Android面试收集录8 HandlerThread详解

    1.前言 我们知道在Android系统中,我们执行完耗时操作都要另外开启子线程来执行,执行完线程以后线程会自动销毁. 想象一下如果我们在项目中经常要执行耗时操作,如果经常要开启线程,接着又销毁线程, ...