一 什么是VUE

它是一个构建用户界面的JavaScript框架,自动生成(js,css,HTML文件)

二 如何使用VUE

1.  应用vues.js

<script src="vue.js"></script>

2.  展示html

<div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
</div>

3.  建立vue对象

<script>
    new Vue({
        el:"#app",    // 表示在当前这个元素内开始使用VUE
        data:{
            msg:''
        }
    })
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
</div>


<script>
    new Vue({
        el:"#app",    // 表示在当前这个元素内开始使用VUE
        data:{
            msg:''
        }
    })
</script>
</body>
</html>
input输入自动显示

相关文章: