vue.js入门01

最新推荐文章于 2024-07-09 21:18:14 发布

徐林2333

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量149

点赞数

分类专栏： vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_49071539/article/details/130605391

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>site:{{site}}</h1>
        <h1>url:{{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <script type="text/javascript">
        let vue = new Vue({
            el:'#vue_det',
            data:{
                site:"liner代码",
                url:"www.liner.com",
            },
            methods:{
                details:function (){
                    return this.site+this.url+"--小清华"
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
引入script：

   <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

el：
Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det

data：
用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods ：
用于定义的函数，可以通过 return 来返回函数值。

{{ }}:
用于输出对象属性和函数返回值。

徐林2333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue.js入门01

Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det。用于定义属性，实例中有三个属性分别为：site、url、alexa。用于定义的函数，可以通过 return 来返回函数值。用于输出对象属性和函数返回值。
复制链接

扫一扫