Vue语法

Vue.js：用于构建用户界面的渐进式框架。

• vue基础语法

1.导入Vue.js:

(1)绝对路径导入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

(2)下载Vue.js相对路径导入 <script src="../js/vue.js"></script>

2.创建Vue实例：

  var  vue=new Vue({});

或  new Vue({});

3.vue数据绑定方式：双向数据绑定 (给实例化数据赋值会影响界面数据，修改界面值也会影响实例化值)

Eg:  var data={

name:”张三”

};

 var vm=new Vue({

data:data

});

修改data数据：

data.name=”李四”;

console.log(vm.name);//李四

vm.name=”王二”;

console.log(data.name);//王二

双向数据绑定原理原理

利用object.defineProperty()方法的set()  get() 属性方法实现

var obj={name:””};

Object.defineProperty(obj,’name’,{

//对象 参数

set:function(value){

//为属性设置值

name=value;

}

get:function(){

//获取属性设置的值

console.log(name);

return name;

}

});

obj.name=”tom”;

console.log(obj.name);//tom

 

Object.freeze()阻止数据双向绑定 阻止修改现有属性的特性和值，并阻止添加新属性

返回值是传递给函数的对象。

 

 

4.使用vue的标志符进行数据区分 $

console.log(vm.$data===data);//true

  区分vue实例里面的元素选择器  和js里面获取的元素是否一致

    var vm=new Vue({

        el:"#app"   //el属性确认vue单页面程序的执行对象

    });

console.log(vm.$el===document.getElementById("app"));//true*/

 

1. watch:{属性:function(){}} 监听器  监听数据的变化  (只有数据有变化时有作用)

var em=new Vue({

el:”#app”,

data:{

name:”john”

},

watch:{

name:function(newvalue,oldvalue){

console.log(newvalue);

console.log(oldvalue);

}

}

});

 

6.生命周期钩子函数 created:function(){}

  new Vue({

     el:”#app”,

 created:function(){

      //在实例被创建后执行  也可以发送数据请求(ajax)

}

  data:{

sex:”man”

},

watch:{

sex:function(){

console.log(this);  //this=>sex

}

}

})

 

7.计算属性方法 computed:{属性:function(){}}

new Vue({

el: ”#app”,

data:{

msg:”123456”,

name:”lisi”

},

computed:{

//可以帮助快速进行逻辑运算，这个里面的方法不能被事件调用，只能用于{ {}}中直接计算

msgData:function(){

       return  this.msg.split('').reverse().join('');

       //return  this.$data.msg;

},

showData:function(){

             console.log(this.msg