使用vue开发web app - 1 - 初步使用vue创建组件

最新推荐文章于 2024-05-10 17:57:11 发布

Jianle2546

最新推荐文章于 2024-05-10 17:57:11 发布

阅读量3.2k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/lele9001/article/details/53954178

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用vue开发web app - 1 - 初步使用vue创建组件

课程参考视频：https://egghead.io/lessons/javascript-create-a-basic-component-using-vue-js

目的：

· 初步使用vue创建组件
1. 通过el元素，进行数据绑定
2. 通过”{{ }}”访问data中的数据字段
3. 学会使用v-html

步骤：

· 引入vuejs文件
1. 创建div，展示文本
2. 进行数据绑定
3. 通过控制台动态修改html文本内容

基本要求

了解json数据格式；
了解基本html使用；

源码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- 引入cdn的vue.js文件 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
</head>
<body>
    <!-- 创建card的div -->
    <div id="card">
        <!-- 展示vue数据data中的title字段 -->
        <header>{{ title }}</header>
        <!-- 展示vue数据data中的content字段 -->
        <div v-html="content">{{ content }}</div>
    </div>

    <script type="text/javascript">
        var card = new Vue({
            // 进行控件绑定(el->element)，绑定html页面中id为card的控件，相当于document.getElementById("card")
            el:"#card",
            data: {
                //通过{{title}}访问
                title : "哆啦A梦",
                //通过{{content}}访问   
                content : "<strong>哆啦A梦</strong>有<em>百宝袋</em>，有<em>竹蜻蜓</em>"
            }

        })
    </script>
</body>
</html>