Vue：入门1 创建一个 Vue 实例

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。

###加载JS文件(所有的案例都是在加载了这个文件的基础下进行的)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

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

</script>

<!-- 生产环境版本，优化了尺寸和速度 -->

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

基本语法(注意截取的是部分代码)

案例1

<script>

   var vueData = {a:1};

   // 每个Vue应用都需要创建一个实例

   var vm = new Vue({

       data: vueData

   });

   // 设置对应属性值
   vm.a = 2;

   //结果 data.a=2
   console.log('data.a='+vueData.a);   

   // 也可以这样设置
   vueData.a = 3;
   
   console.log('data.a='+vueData.a);// data.a=3

   // 添加新字段
   vm.b = 'hi';
   console.log('vm.b='+vm.b);//vm.b=hi

</script>

案例2

<div id="app">
   <p>{{foo}}</p>
   <button v-on:click = "foo='baz'" >change it</button>
</div>
<script>

   var obj = {foo:'bar'};

   //  Object.freeze()会阻止修改obj的里foo的值

   Object.freeze(obj);

   // 在谷歌浏览器中开发者模式中会提示
   // [Vue warn]: Error in v-on handler: "TypeError: Cannot assign to read only property 'foo' of object '#<Object>'"
   var vm2 = new Vue({

       el: '#app',

       data: obj

   });

</script>

案例3，Vue定义了一些实例属性和方法，通过$进行调用

<div id="example">

   <p>{{a}}</p>

</div>

<script>

   var data3 = {a:1};

   var vm3 = new Vue({

       el: '#example',

       data : data3

   });

   // 会得到data对象
   console.log(vm3.$data);
   // vm3.$el 相当于 document.getElementById('example')
   console.log(vm3.$el);

   // watch方法会在a的值改变会触发
   // newValue：新的值  oldValue：旧的值
   // 最简单的改变a的方法可以在谷歌浏览器的Console下进行vm3.a = 'test2222'进行设置
   vm3.$watch('a',function (newValue, oldValue){

       console.log('in watch ');

       console.log(newValue);

       console.log(oldValue);

   });
</script>

案例4

<script>

 // 每个Vue在创建的时候都会有一系列的初始化过程，

 // 在这个过程中如果我们想在这个过程中做一些个性化代码 。可以用"生命周期钩子的函数"比如：created钩子会在实例创建之后执行

 var vm4 = new Vue({

     data: {

         a:1

     },

     created: function(){

         // this 代表的是vm的实例

         this.a = 'new a val';

         console.log('a is:'+this.a); //a is:new a val

     }

 });

</script>