美文网首页
极客时间Vue开发实战笔记(当前进度04|第一个vue程序)

极客时间Vue开发实战笔记(当前进度04|第一个vue程序)

作者: 杨闯 | 来源:发表于2020-02-08 17:15 被阅读0次

基础篇: Vue核心知识点

{{}}中只能指定表达式,不能指定语句
v-bind
v-if
v-else
v-show
v-for

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{message}}{{message + message}}
        <div :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</button>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{//数据
                message:"htllo world",
                list:[{
                    title:"课程1",
                    del:false,
                },{
                    title:"课程2",
                    del:true,
                }],
            }
        })
    </script>
</body>
</html>

生态篇:大型Vue项目所需的周边技术

实战派:开发基于Vue的Ant Design Pro

福利片:Vue 3.0 相关知识点介绍

相关文章

网友评论

      本文标题:极客时间Vue开发实战笔记(当前进度04|第一个vue程序)

      本文链接:https://www.haomeiwen.com/subject/uvpixhtx.html