vue学习----Cap-1

在html里，{{a}}，这个格式可以将a的文本内容渲染到div中。
同时，我在这里也把vue的文件放在head当中，这样做的好处就是，在尾部的js代码块中，可以直接使用vue的语法
不用担心会出现未定义等其他错误情况
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
   <div id="app">
       {{a}}
   </div>
</body>
<script src="./js/js.js"></script>

</html>

 

/接下来 
 1 var data = {
 2     a : 1,
 3 }
 4 
 5 
 6 var vm = new Vue({
 7     el: '#app',
 8     data: data,
 9 
10     //在实例初始化之后，在数据观测（data Observer），event和watch之前被调用的函数
11    beforeCreate: function() {
12         console.log('beforeCreate');
13    },
14    //在实例完成后立刻被调用。
15    //在这一步，实例已经完成以下配置：数据观测（data Observer）， 属性和方法的运算，watch/event事件的回调。
16    //然而挂载事件还没有开始，$el属性当前不可见
17    created: function() {
18        console.log('created');
19    },
20    //在挂载之前被调用，相关的渲染函数首次被调用
21    beforeMount: function() {
22        console.log('beforeMount');
23    },
24    //el被新建的vm.$el替代，挂载成功
25    Mounted: function() {
26        console.log('Mounted');
27    },
28    //数据更新时调用
29    beforeUpdate: function() {
30        console.log('beforeUpdate')
31    },
32    //组件DOM已经更新，组件更新完毕
33    updated: function(){
34        console.log('update');
35    }
36 
37 })
38 vm.a = 'beforeCreate';
39 setTimeout(() => {
40     vm.a = 'changed';
41 }, 2000);

这里面的代码时vue的学习文档中的，如果有疑问，可以私信我，或者直接去官网查，但是，官网好像和我是一样的。。。

这里是官网的网址--->https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

posted on 2020-07-20 11:19  Edwords  阅读(132)  评论(0)    收藏  举报

导航