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

vue.js

Jianle2546

3294人浏览 · 2016-12-31 10:40:06

Jianle2546 · 2016-12-31 10:40:06 发布

使用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>

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}$/, //不连续的两位字母// /^