vue 第一天（基本的结构）

vue 第一天（基本的结构）el：就像我们的选择器一样里面是 # 就是id选择器里面是 . 就是class选择器直接写标签就是标签选择器也可以id+class 或多个id 等data：相当于我们 el 表达式或者 thymeleaf 一样上面格式用 {{key}} 下面在data里面定义key和valuedata中可以写数组还有对象。methods：里面定义方法就像js里的函数一样&l

彼岸锋

111504人浏览 · 2021-02-26 15:26:10

彼岸锋 · 2021-02-26 15:26:10 发布

vue 第一天（基本的结构）

el：就像我们的选择器一样里面是 # 就是id选择器里面是 . 就是class选择器直接写标签就是标签选择器也可以id+class 或多个id 等
data：相当于我们 el 表达式或者 thymeleaf 一样上面格式用 {{key}} 下面在data里面定义key和value
data中可以写数组还有对象。
methods：里面定义方法就像js里的函数一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="javascript" src="../lib/vue.js"></script>
</head>
<body>
<div id="vue_one">
    <h1>site : {{site}}</h1>
    <h1>{{url}}</h1>
    <h1>{{details()}}</h1>
    <h1>{{no()}}</h1>
    <h1>{{shuzu}}</h1>
    <h1>{{obj}}</h1>
</div>
<script type="text/javascript">
    const obj = {
        duixiang : "我是对象那个",
        duixiang2 : "我也是"
    }
    const vm = new Vue({
        el: '#vue_one',
        data: {
            site: "我的第一个vue程序",
            url: "网址吗还没定",
            shuzu : ["篮球","足球","动漫"],
            obj
        },
        methods: {
            details: function() {
                return this.site + "- 要坚持下去";
            },
            no :function () {
                return this.details() +"- 没有什么不可以";
            }
        }
    })
</script>
</body>
</html>

花开一千年,花落一千年,花叶永不见

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^