Vue的基本使用

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script>
    window.onload = function(){
        // vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。
        var vm = new Vue({
            el:'#app',   // 设置当前vue对象要控制的标签范围。
            data:{  //  保存vue.js中要显示到html页面的数据。
              message: 'hello world!',
            }
        });
    }
    </script>
</head>
<body>
<div id="app">
    <!-- 设置vue可以操作的html内容范围，值一般就是css的id选择器。 -->
    <p>{{ message }}</p>
</div>
</body>
</html>

　　

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

 

基本使用总结：

1. vue的使用要从创建Vue对象开始
   var vm = new Vue();
   
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
   var vm = new Vue({
        el:"#app",
        data(){      // js里面对象的方法
            return { // vue中需要操作和控制的所有数据都要在这里先声明病初始化
                数据变量:"变量值",
                数据变量:"变量值",
                数据变量:"变量值",
            }
        }
   });

　　

posted @ 2021-10-01 20:28  映辉  阅读(42)  评论(0)    收藏  举报