这是我参与「第五届青训营」笔记创作活动的第4天。

学习笔记四 vue.js框架入门

首先贴出本次练习所用代码

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="../script/vue.js"></script>
        <div id="app">
            <ul>
                <a v-text="topNav.first"></a>
                <!-- 频繁的切换使用v-show，反之如果是不频繁的切换则使用v-if（因为v-show的切换性能消耗更小） -->
                <a v-html="html" v-show="state"></a>
                <li v-for="(item,index) in arr">
                    <p>{{item}}是arr数组中的第{{index}}个元素</p> 
                </li>
            </ul>
            {{message}}
            
            <br>
            <button value="修改首页" type="button" @click="change"></button>
            <button value="改变状态" type="button" @click="reverseState"></button>
        </div>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    message: "Hello Vue!",   
                    topNav:{
                        first : "首页",
                        second : "个人信息"
                    },
                    html: "<a href='https://www.baidu.com/'>FIRST</a>",
                    state: true,
                    arr: ["菊花","梅花","兰花","竹子"]
                },
                methods:{
                    change : function(){
                        alert("change !");
                        this.topNav.first = "被修改过的首页";

                    },
                    reverseState: function(){
                        this.state = !this.state;
                    }

                }
            })
    </script>

    </body>
    
</html>

首先是数据保存方式，我们可以将各种变量与事件交由Vue管理。下面介绍各个部分代表的意思。

el:用于指定绑定标签的选择器，可以是类选择器或者id选择器等等，一般推荐使用类选择器。
data:用于存放各种类型的数据，比如列表、对象、简单数据类型等等。
methods:用于存放各种事件。

使用data中的数据的方式有两种。
第一种，使用两个花括号{{}}：这种方式会将花括号中的内容替换为data中对应的数据，例如练习代码中将topNav.second替换为"个人信息"。
第二种,使用v-text属性，这种方式会将标签中的所有文字内容替换为data中对应的数据。

**为元素绑定事件的方式也有两种**
第一种，使用v-on属性，格式为v-on:事件名=函数名。
第二种，是第一种方式的缩写，用@代替v-on:改写为@事件名=函数名。

例如练习中在methods中写了两个函数change和reverseState。前者是用来改变第一个元素a的中的文字内容，后者是用来改变第二个元素a的显示状态。

触发前状态

触发后状态

最后是这两个事件具体实现中的一些问题
1.修改ui的状态不需要DOM操作，Vue框架会自动帮我们实现。我们只需要通过this指针修改data中的数据值即可。
2.可以通过v-show来修改元素的展示效果，其原理是修改元素的display属性。

javascript学习记录二 | 青训营笔记

学习笔记四 vue.js框架入门