入門VUE

時間 2019-12-04

標籤入門 vue 简体版

原文原文鏈接

下面的實例包含如下知識點：html

<!--vue

v-model 雙向綁定app

v-bind 綁定html的標籤屬性，簡寫：this

v-on 事件綁定簡寫 @雙向綁定

計算屬性code

-->htm

<html>
    <head>
        <title>雙向綁定與計算屬性</title>
        <meta charset="utf-8">
        <script src="vue.js"></script>
    </head>
    <body>
        <!-- 
            v-model 雙向綁定 
            v-bind  綁定html的標籤屬性 ，簡寫 ：
            v-on    事件綁定            簡寫 @
            計算屬性
        -->
        <div id="root">
            姓: <input v-model="firstName"/>
            名: <input v-model="lastName"/>
            <div>{{fullName}}</div>
            <input type="button" v-bind:value="title" v-on:click="get()" />
        </div>
        <script>
           new Vue({
               el: "#root",
               data: {
                   //雙向綁定
                   firstName: '',
                   lastName: '',
                   //綁定標籤屬性
                   title: "提交"
               },
               //綁定事件
               methods:{
                    get:function(){
                        alert("click happen");
                    }
                },
                //計算屬性
               computed: {
                   fullName: function(){
                       return this.firstName + ' ' + this.lastName;
                   }
               }
           })
        </script>
    </body>
</html>

1. Vue入坑——vue-router（vue路由）入門
2. Vue入門篇
3. Vue入門
4. vue入門
5. VUE入門
6. vue入門（一）
7. vue入門一
8. Vue 入門
9. Vue CLi3入門
10. VUE 入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。