vue.js之继续学习

之前看过一点vue.js但是知识点没做记录，现在也差不多不记得了，今天把以前看过的翻一遍，顺便提炼一下知识点

1.vue对象的写法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>


    <script >
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

浏览器显示：

我们在控制台输入一些命令，看他的变化：

看到这，你应该意识到，我们可以通过js来改变这个vue对象的变量值，从而改变浏览器窗口中页面内容的显示。

2.指令系统

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
        <p v-once>这个将不会改变: {{ message }}</p>
        <p v-bind:title="message">绑定了title属性</p>
        <p v-if="seen">if语句</p>
        <p v-bind:id="message">绑定了id</p>
        <a v-bind:href="message">绑定了href</a>
        <p>输出html: <span v-html="rawHtml"></span></p>
        <ol>
            <li v-for="todo in todos">
                <ol>
                    <li v-for="item in todo.list">
                        {{item.key}}
                    </li>
                </ol>
            </li>
        </ol>
        <button v-on:click="reverseMessage">绑定了单击事件</button>
        <button v-bind:disabled="seen">绑定了disabled属性</button>


    </div>


    <script >
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                seen:'true',
                rawHtml:"<a style='color:red' href='##'>content</a>",
                todos: [
                { name: '学习 JavaScript',list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] },
                { name: '学习 Vue' ,list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] },
                { name: '整个牛项目',list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}]  }
                ]
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }

        })
    </script>
</body>
</html>

猜你喜欢