Vue学习笔记1 —— 入门

最近在学习Vue.js，自己做一些学习笔记，一是为了温故知新，二是加深自己的理解。想了解更多信息请各位看官直接看Vue.js官网或者其他更详细，更专业的课程。

关于Vue入门，就直接上实例代码了，重点在注释！！！

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>vue</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
    </head>
    <body>
        
        <div class="sese">
            <div>
                姓名：{{name}}
            </div>
            <div>
                性别：{{sex}}
            </div>
            <ul>
                <li v-for="s in news">
                    {{s}}
                </li>
            </ul>
            <div v-if="isShow">
                显示1
            </div>
            <div v-else>
                显示2
            </div>
            <button @click="change">change</button>
        </div>
        
        <script type="text/javascript">
            /*
             * 1.定义一个vue对象 new Vue({})
             * 2.el获取一个对象：只有一个，一般为最外层的元素
             * 3.数据值写在data:{}里面，再通过{{***}}调用
             * 4.循环：先定义数组，再用v-for循环，如 v-for="s in news"
             * 5.判断：v-if...v-elseif...v-else
             * 6.事件：
             * 需要绑定事件的元素里面写：v-on:事件名=方法 或者  @+事件名="方法"，如v-on:click="change" 或 @click="change"
             * Vue.js通过methods:{}来定义事件，如：
             * methods:{
             *     change(){}
             * }
             * 总结：
             * v-*** 称为指令
             
             */
            new Vue({
                el:'.sese',
                data:{
                    name:'haha',
                    sex:'女',
                    news:['111','222','333'],
                    isShow:true,
                },
                methods:{
                    change(){
                        this.isShow = !this.isShow
                    }
                }
            })
        </script>
        
    </body>
</html>

记得多动手写写哦~~

Vue学习笔记1 —— 入门

猜你喜欢