vue框架学习（一）之vue实例

1，安装vue

引入cdn，

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2，vue实例的data属性

新建一个vue对象，data属性里写的是一个函数或一个object，函数返回的是对象字面量，并且对象字面量里面只能包含数据，不能定义方法。

 <script> var vm = new Vue({ //data里面定义属性 data:function () { return { //对象字面量的属性messageA,对应属性值'hello'。 messageA:'hello', messageB:'world', } } }); alert(vm.messageA);//通过vm对象访问其属性 </script>

3,vue对象methods属性

methods属性里面定义是对象字面量，对象字面量里面定义一个或多个函数，通过
对象名加点加函数名的方法调用。如果函数要引用自身的属性，得用this.属性名的方式。

<script> var vm = new Vue({ methods:{ //采用对象字面量的形式，对象字面量里面定义多个函数。 showMessageA:function () { alert('hello') }, }, }); vm.showMessageA(); </script>

4，vue对象的el属性

el属性里面定义object或者sring，将页面上存在的dom元素作为vue实例的挂载目标。挂载之后，dom元素可以通过vm.$el访问。

<div id="app">

        </div>
         <script> var vm = new Vue({ el:'#app', }); //vm.$el就代表了div这个dom元素了，所以可以访问其属性id alert(vm.$el.id); </script>