vue 第一天（基本的结构）

以你之姓@ 2022-11-03 04:06 186阅读 0赞

# 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>

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

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue入门第一天-----Vue概述及基本使用

一、Vue概述 > Vue是国产框架，尤雨溪是Vue.js的创建者。2014年2月，Vue.js正式发布；2015年10月27日，正式发布1.0.0版本；2016年4月2

本是古典何须时尚/ 2023年07月07日 08:03/ 0 赞/ 34 阅读

相关 Vue — 第一天（极速入门）

基本介绍 vue是什么 > 目标：了解vue的一些基础概念。官方网站： https://cn.vuejs.org/ vue是：渐进式javascript框架。

迈不过友情╰/ 2023年03月13日 05:48/ 0 赞/ 88 阅读

相关 Vue初学（第一天笔记）

1：Vue是一个渐进式框架，可以对项目进行一点一点的重构。 2：Vue有很多高级的功能 1：解耦数据和视图 2：可复用组件 3：前端路由技术

傷城~/ 2022年12月16日 09:23/ 0 赞/ 147 阅读

相关 vue 第一天（基本的结构）

vue 第一天（基本的结构） el：就像我们的选择器一样里面是 \ 就是id选择器里面是 . 就是class选择器直接写标签就是标签选择器也可以id+class

以你之姓@/ 2022年11月03日 04:06/ 0 赞/ 187 阅读

相关 vue入门第一天

Vue 是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层，不仅易于上手，还便于与第

逃离我推掉我的手/ 2022年09月08日 10:25/ 0 赞/ 310 阅读

相关 vue.js的学习总结第一天

1.插值表达式写法 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

冷不防/ 2022年02月19日 13:23/ 0 赞/ 246 阅读

相关 Vue的第一天

使用CDN引入 <script src="https://cdn.jsdelivr.net/npm/vue"></script> Vue实例 ![1411757-2

分手后的思念是犯贱/ 2022年01月07日 19:19/ 0 赞/ 264 阅读

相关 PHP5.4第一天—基本语法

<html> <head> <title>PHP5.4</title> </head> <body> <?php

矫情吗；*/ 2021年12月22日 09:11/ 0 赞/ 263 阅读

相关第一天

在网页中触发右键设置用oncontextmenu，不能触发设置οncοntextmenu="return false" 禁止鼠标右键：οncοntextmenu="ret

妖狐艹你老母/ 2021年09月20日 14:12/ 0 赞/ 622 阅读

相关 vue第一天 Vue指令

前言：Vue.js 是一套构建用户界面的框架，\\只关注视图层\\，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

╰+哭是因爲堅強的太久メ/ 2021年09月19日 08:32/ 0 赞/ 409 阅读