zoukankan      html  css  js  c++  java
  • 创建Vue.js对象:我的第一个Vue.js输出信息

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=”utf-8″>
    <title>Vue第一条信息</title>
    <script src=”js/vue.js”></script>
    </head>
    <body>
    <div id=”app”>
    <p>{{ message }}</p>
    </div>

    <script>
    new Vue({
    el: ‘#app’,
    data: {
    message: ‘Hello Vue.js!’
    }
    })
    </script>
    </body>
    </html>

    new Vue()相当于新建了一个Vue对象。

    el: ‘#app’,是选择器

    data: {
        message: 'Hello Vue.js!'
    }

    是数据,如果要增加数据,在data添加就可以:

    data: {
    message: ‘Hello Vue.js!’,
    name:’简庆旺’
    }

    我们输出下:

    <div id=”app”>
    <p>{{ message }}</p>
    <p>{{name}}</p>
    </div>

    得到:

    Vue.js

    创建多个vue.js对象:

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
                name:'简庆旺'
            }
        })
        
        new Vue({
            el:'#school',
            data:{
                school_name:'永定一中',
                address:'福建省龙岩市永定区',
                type:'高中'
    
            }
        })
    </script>

    我们来看看两个绑定的div:

    <div id=”app”>
    <p>{{ message }}</p>
    <p>{{name}}</p>
    </div>
    <div id=”school”>
    <p>{{ school_name }}</p>
    <p>{{ address }}</p>
    <p>{{ type }}</p>
    </div>

    输出结果:

    vue.js新建多个对象

    第一个绑定的 对象el: ‘#app’对应<div id=”app”></div>,第二个绑定的 对象el:’#school’对应<div id=”school”></div>。好了,到这里我们总结下,每次新建一个js对象都是 new Vue(),不同的只是el对应绑定的模块。

    本人博客地址:创建Vue.js对象:我的第一个Vue.js输出信息   原文:http://www.wangtuizhijia.com/archives/196

  • 相关阅读:
    iOS ARC编译器规则和内存管理规则
    Servlet与JSP的关系
    传统javabean与spring中的bean的区别
    servlet学习笔记
    JAVA里面"=="和euqals的区别
    java垃圾回收
    java中初始化块、静态初始化块和构造方法
    抽象类与接口的区别
    Servlet 与 CGI 的比较
    spring的事务传播特性
  • 原文地址:https://www.cnblogs.com/jianqingwang/p/6896788.html
Copyright © 2011-2022 走看看