Jianle2546
Jianle2546

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

使用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文本内容

基本要求

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

源码：


<html>
<head>
    <title>title>
    
    <script src="https://unpkg.com/vue/dist/vue.js">script> 
head>
<body>
    
    <div id="card">
        
        <header>{{ title }}header>
        
        <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 : "哆啦A梦有百宝袋，有竹蜻蜓"
            }

        })
    script>
body>
html>

你可能感兴趣的:(web前端)