零基础学习 Vue.JS ——（1）

于 2018-08-21 15:16:12 发布
阅读量2.3k 收藏 8
点赞数 5
分类专栏： vue 文章标签： web  vue 前端 基础 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40678503/article/details/81781183
版权

vue.js是一种最近很流行的轻量级MVVM框架。
那什么是MVVM架构呢？
MVVM主要分三部分：View，ViewModel，Model。这里写图片描述
它们之间的关系是两两之间信息双向传递，当View中有信息改变时自动反映在ViewModel，反之也是如此。
这样的设计给我们后期修改以及维护带来了很大的便利。

前端技术近几年的发展可以说是很迅速了，同时对于前端的技术也是越来越高，在做复杂的项目时，我们需要有清晰合理的架构，使项目更易开发和维护。Vue.js的功能完全可以满足我们的需求，帮助我们快速开发原型，也可以混合别的库做更多的事情，比如混合jquery，jquery的DOM操作十分强大。但是Vue.js不能与Angular.js混合使用，会出现冲突！

接下来我们就开始学习vue.js的开发

我们知道实现Vue框架的核心是vue.js.它可以通过构造函数Vue来创建一个实例

var app=new Vue({
});

在实例化Vue时，我们需要传入一个JSON对象，它可以包括数据，模板，方法，回调函数等选项。

下面让我们来写第一个Vue的小例子吧
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="first">
        {{message}} //表达式
        <p>{{student.name}}</p>
    </div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

js代码：

var first=new Vue({
    el:"#first", //获取到html中的div，进行绑定
    data:{ //json,存放数据
        message:"HelloWord",
        student:{
            name:"小米",
            age:"18"
        }
    }
});

el属性与data属性是常用的，html中想要获取的数据都是从data中进行读取。

Vue的实例属性

Vue实例会代理其data对象里所有的属性，如果实例创建之后再添加或者修改属性，视图不会更新。有的人觉得这句话是有问题的，因为如下代码：

<p>{{username}}</p> 
<p>{{sex}}</p>

var first = new Vue({ 
	el: "#first",
	data: {
	username: "xiaoming" 
	}
});

此时视图显示的是xiaoming
当对代码进行修改

var first = new Vue({ 
	el: "#first",
	data: {
	username: "xiaoming" 
	}
}); 
app.username = "TOM";

这时会发现视图显示的就变成了TOM！
可是我们上面不是刚刚说明了vue实例创建完成后再添加或者修改属性，视图不会发生改变吗？
重点就在于vue实例要创建完成！！！
vue对象的创建是十分复杂的，耗费时间，客户端不会等待vue对象以及里面的内容全部创建完再执行下面的代码，所以代码的执行是异步的，像ajax，浏览器在执行ajax时并不会停下来等待ajax的返回值，而是当响应返回回来时再执行回调函数。所以此时Vue对象还没有完全创建成功，还是可以修改里面的内容。
那我们怎么检测当Vue创建成功时是否能修改里面的属性呢？
Vue有一个回调函数ready，当对象创建完成后会执行这个回调函数，所以我们只需要测试以下代码：

var first = new Vue({ 
	el: "#first",
	data: {
		username: "xiaoming" 
	},
	ready: function () {
		this.username = "mike"
	}
});

此时我们会发现，视图上的文字并没有改变，这就证实了实例创建之后再添加或者修改属性，视图的确不会更新。

除了data属性，Vue实例暴露了一些有用的实例属性和方法，这些属性和方法都有前缀$

var first = new Vue({ 
	el: "#first",
	data: {
		username: "xiaoming"
	      }
	}); 
	console.log(first.username); 
	console.log(first.$data.username);//$data属性是所有绑定数据的代理
	console.log(first.$el==document.getElementById("first"));

计算属性
视图层的表达式是非常便利的输出手段,但是它们实际上只用于简单的运 算。在模板中放入太多的逻辑会让表达式过重且难以维护。例如:

<div id="exp">
	{{ message.split('').reverse().join('') }}
</div>

在这种情况下，模板就不再清晰和简单了，所以对于任何复杂逻辑，我们应当使用计算属性。

计算属性就是在模板中调用函数输出结果

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>工资：</p>
    <input type="text" v-model="salary" placeholder="输入工资...">
    //v-model是指令这里是获取文本框的输入内容与模型层建立连接
    <p v-text="Tax"></p>
    //v-text指令与{{Tax}}表达式结果相同
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    data:{
       salary:0
    },
    computed:{
        Tax:function(){ //定义一个计算函数
            var base=3500;
            var temp=this.salary-base;
            var tax=0;
            if(temp<=0){
                tax=0;
            }
            else if(temp>0&&temp<=1500){
                tax=temp*0.03-0;
            }
            else if(temp>1500&&temp<=4500){
                tax=temp*0.10-105;
            }
            else if(temp>4500&&temp<=9000){
                tax=temp*0.20-555;
            }
            else if(temp>9000&&temp<=35000){
                tax=temp*0.25-1005;
            }
            else if(temp>35000&&temp<=55000){
                tax=temp*0.30-2755;
            }
            else if(temp>55000&&temp<=80000){
                tax=temp*0.35-5505;
            }
            else{
                tax=temp*0.45-13505;
            }
            return Math.ceil(tax*100)/100; //返回计算结果
        }
    }
});

以上是一个计算个人所得税的小例子。
<p>{{Tax}}</p>表达式的缺点，会在网页短时间显示表达式文字内容本身，当vue对象创建完成后才会显示计算属性的结果，而v-text="Tax"则没有这个缺点。

vue的方法调用
上面计算个人所得税的小例子用方法调用也可以实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>工资：</p>
    <input type="text" v-model="salary" placeholder="输入工资...">
    <p>{{Tax()}}</p>
    <p v-text="Tax()"></p>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    data:{
       salary:0
    },
    methods:{
       Tax:function(){
            var base=3500;
            var temp=this.salary-base;
            var tax=0;
            if(temp<=0){
                tax=0;
            }
            else if(temp>0&&temp<=1500){
                tax=temp*0.03-0;
            }
            else if(temp>1500&&temp<=4500){
                tax=temp*0.10-105;
            }
            else if(temp>4500&&temp<=9000){
                tax=temp*0.20-555;
            }
            else if(temp>9000&&temp<=35000){
                tax=temp*0.25-1005;
            }
            else if(temp>35000&&temp<=55000){
                tax=temp*0.30-2755;
            }
            else if(temp>55000&&temp<=80000){
                tax=temp*0.35-5505;
            }
            else{
                tax=temp*0.45-13505;
            }
            return Math.ceil(tax*100)/100;
        }
    }
});

计算属性和方法调用的区别

虽然二者最后的结果相同，但是不同的是,计算属性是基于缓存的,计算属性只有在它的相关依赖发生改变时,才会重新求值;函数恰好相反,它是没有缓存的。

我们通过一个例子能更深刻的了解

计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p><input type="button" value="添加" @click="add"></p>
    <p v-for="one in list">{{now}}</p>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
   el:"#app",
    data:{
       list:[]
    },
    methods:{
       add:function(){
           this.list.push("ok");
       }
    },
    computed:{
       now:function(){
           return new Date().toLocaleString();
       }
    }
});
 //输出一样的结果因为输出的都是缓存的数据，所以时间是不变的

方法调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app">
    <p><input type="button" value="添加" @click="add"></p>
    <p v-for="one in list">{{now()}}</p>
</div>

<script src="../vue.js"></script>
<script src="main2.js"></script>
</body>
</html>

var app=new Vue({
   el:"#app",
    data:{
       list:[]
    },
    methods:{
       add:function(){
           this.list.push("ok");
       },
        now:function(){
            return new Date().toLocaleString();
        }
    }
});

使用计算属性当点击按钮时输出的时间是不变的，但是方法调用的时间是在不断的更新的，这就说明了计算属性输出的值是缓存的，而函数相反，没有缓存值。

不认输的西瓜
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值