入门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介绍与使用