1.1 第一个Vue程序

一、基础内容

相关网址：
1. 官网：https://cn.vuejs.org/index.html
2. 文档：https://cn.vuejs.org/v2/guide/installation.html

第一个页面

使用引入script方式开始学习

<body>
    <div id="app">{{message}}</div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            }
        })
    </script>
</body>

备注：可以在控制台中修改，比如输入命令：vm.message = 'sss'
回车后，页面的hello world就会变成sss

二、部分常用标签

使用v-bind做动态标签属性

<body>

    <div id="app">{{message}}
        <div v-bind:id="message"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world'
            }
        })
    </script>
</body>

备注：简便方式为:id="message"

todu-list展示v-if与v-else

<body>

    <div id="app">{{message}}
        <div v-bind:id="message"></div>
        <ul>
            <li>
                <span v-if="!item.del">{{item.title}}</span>
                <span v-else style="text-decoration: line-through;">{{item.title}}</span>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world',
                item: {
                    title: '课程1',
                    del: false,
                }
            }
        })
    </script>
</body>

备注：根据条件查看渲染那个内容

v-show加载，并看条件是否展示

<body>

    <div id="app">{{message}}
        <div v-bind:id="message"></div>
        <ul>
            <li>
                <span v-if="!item.del">{{item.title}}</span>
                <span v-else style="text-decoration: line-through;">{{item.title}}</span>
                <button v-show="!item.del">删除</button>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world',
                item: {
                    title: '课程1',
                    del: false,
                }
            }
        })
    </script>
</body>

备注：已经挂载到了dom节点上了，只不过根据内容条件查看是否显示出来

v-for循环展示

<body>

    <div id="app">{{message}}
        <div v-bind:id="message"></div>
        <ul>
            <li v-for="item in list">
                <span v-if="!item.del">{{item.title}}</span>
                <span v-else style="text-decoration: line-through;">{{item.title}}</span>
                <button v-show="!item.del">删除</button>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world',
                list: [{
                    title: '课程1',
                    del: false,
                },{
                    title: '课程2',
                    del: true,
                }]
            }
        })
    </script>
</body>

Previous备注 Next1.2 组件基础及组件注册

Last updated 4 years ago

hashtag一、基础内容

hashtag二、部分常用标签

一、基础内容

二、部分常用标签