zoukankan      html  css  js  c++  java
  • Vue.js入门(一)

    <!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的数据流向。

  • 相关阅读:
    HashCode和equal方法的区别和联系 [转]
    Linux makefile 教程 [转]
    gcc: multiple definition of [转]
    conda虚拟环默认路径
    terrasolid修改背景颜色
    台式机无法开机可能的原因
    TensorFlow2.1中计算平方函数的tf.square()的用法
    Terrasolid 安装教程
    如何解决Pytorch的GPU driver is too old的问题?
    使用 TensorBoard 可视化进行监督
  • 原文地址:https://www.cnblogs.com/zhongjiang/p/6442336.html
Copyright © 2011-2022 走看看