vue 浅解-526互联

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

vue有自己的语法，一般以v- 开头，如：v-for="(item,index) in array 是一个循环。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>HelloVue</title>
    <!--引入Vue.js (注意，这里是为了方便测试，采用这种src引入vue，实际开发中都是npm 安装Vue的)-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>

<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <th><input type="checkbox"></th>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in array">
            <td><input type="checkbox"></td>
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            array:[
                {
                    name:'小红',
                    age:21,
                    sex:'女'
                },
                {
                    name:'小黄',
                    age:21,
                    sex:'男'
                },
                {
                    name:'小蓝',
                    age:21,
                    sex:'男'
                }
            ]
        }
    })
</script>
</body>

</html>

vue