xinggevip

Vue2.x_1.1实例化对象和属性绑定
实例化Vue对象app.js// 实例化vue对象 new Vue({ el:"#vue-ap...
扫描右侧二维码阅读全文
15
2019/05

Vue2.x_1.1实例化对象和属性绑定

实例化Vue对象app.js

//  实例化vue对象
new Vue({
    el:"#vue-app",

    data:{
        name:"米斯特吴",
        job:"老师",
        website:"https://www.qiangssvip.com",
        newweb:"<a href='https://www.qiangssvip.com'>百度</a>",
    },

    methods:{
        greet: function (name) {
            return 'Good Morning ' + name + this.name;
        }
    }
});
/*
* el:element 需要获取的元素,一定是Html中的跟容器元素
*data:用于数据的存储
* methods:用于存储各种方法
* data-binding:给属性绑定对应的值
* */

Html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lesson01</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- vue-app是根容器 -->
    <div id="vue-app">
        <h1>{{ greet('xiaoming') }}</h1>
        <p>Name:{{ name }}</p>
        <p>Job:{{ job }}</p>
        <a v-bind:href="website">高公子</a>
        <input type="text" v-bind:value="job">
        <p v-html="newweb"></p>
    </div>

    <script src="app.js"></script>
</body>
</html>

效果

http://hao.qiangssvip.com/vuestudy/Lesson01

Last modification:May 21st, 2019 at 09:21 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment