Vue.js入门
2018-08-15 本文已影响110人
__y
Vue.js是一个轻量级的前端框架，让开发者不必在于视图层，更多的在于数据层的展现和交互，减少了Dom的操作；
1.简单入门和讲解
1.1案例1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Vue基础知识练习</title>
<meta charset="utf-8"></head>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id = "app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data : {
message: 'Hello World'
}
})
</script>
</body>
</html>
image.png
讲解：
- {{message}}:定义了一个名为message的变量，值需要在data数据域中确定；
- el:绑定某个id，指定某个控件
- data：数据域，可以在这里进行数据的初始化
1.2：案例2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta charset="utf-8"></head>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<di id = "app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ol>
<li v-for="item in list">
{{item}}
</li>
</ol>
</di>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data: {
inputValue:"",
list : []
},
methods:{
handleBtnClick: function () {
this.list.push(this.inputValue);
//添加完后记得社为空
this.inputValue = "";
}
}
})
</script>
</body>
</html>
image.png
这个案例是可以在输入框里面，输入数据，然后按提交，这样会在界面里面回显刚刚提交的数据；这里引入几个知识点：
- 双向绑定：v-model,这是vue的一个指令，和元素结合使用；当我们修改input中的值的时候，data中值也会修改，同样的我们修改data里面的值也会影响v-model中的值
- 循环：v-for也是一个vue的指令，用来处理循环的数据，比如我们上面的列表
- methods：我们自定义的一些方法都放在这里，然后配合v:on来绑定事件
- 使用this关键字来获取data中的数据，在app这个作用域里面的话，我们可以通过this来获取到data中的值
- 通过案例我们可以看出，我们更多的是关注数据的变换，DOM的操作我们不必关注
2. MVVM的介绍
我们以前用Jquery的时候，用是MVC架构去写；M：Model，就是数据层，可以简单理解为后台传过来的数据；V：View，就是视图层，就是我们展现在页面上的内容；C:Controller,处理业务逻辑；以前我们写前端的业务代码的时候很多的时候都是操作DOM来改变页面上展示的内容，这使得代码量很大，也难以维护；
MVVM的出现则更多的关注Model:数据层阶段，看下图：
mvvm.png
我们在用vue的时候更多的是关注Model层，至于如何将数据和View进行交互则由中间的VM来解决；而中间这一块则由Vue来实现；至于里面的实现逻辑则要看源码了。
3.组件的入门
什么是组件？来看看下面的图
image.png
假设简书的主页分为以下三块，这三块就是组件；所以，我们可以认为组件是构建整个页面的一些部分；因此我们在用vue开发的时候，可以将一些页面的内容抽取出来，做成组件的形式，这样如果其他页面要用的话，直接引用就好了，大大减少了我们的代码开发量。下面会通过一个案例展示一下组件的运用；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta charset="utf-8"></head>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<di id = "app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ol>
<todo-item
v-for = "item in list"
>
</todo-item>
</ol>
</di>
<script type="text/javascript">
//父组件
var app = new Vue({
el:'#app',
data: {
inputValue:"",
list : []
},
methods:{
handleBtnClick: function () {
this.list.push(this.inputValue);
//添加完后记得社为空
this.inputValue = "";
}
}
})
//子组件
Vue.component("TodoItem",{
template: "<li>I am Item</li>"
})
</script>
</body>
</html>
image.png
我们每次按提交的时候也会可以实现之前我们看到的效果，来分析一下知识点
- Vue.component:这是全局组件，可以让其他页面也使用，既然有全局的那就有局部的（本页面的），实现我们等会展示
- 我们在命名的时候一定要遵守命名规范，字母开头大写，然后后面的单词也要大写，这样才能在页面的时候使用<todo-item>这个标签来引入，否则是无法使用的
优化
我们从上面的例子可以看到数据出来是出来，但是并不酷，因为他是静态的，我们想让数据动态生成，怎么实现呢？这就要解决一个问题就是，如何从父组件把值传递到子组件中；Vue给我们提供了一个参数"props"；对于上面的代码我们需要做两步操作：
1.在组件定义中，添加参数，并赋值：
image.png
2.用v-bind指令绑定我们刚刚定义的参数名，然后获得item的值
image.png
效果
image.png
从上面的案例中我们进行分析：
- props的运用：props可以获取从父组件中传过来的值，然后可以赋值给模板中的变量名；
- v-bind的应用：v-bind就是将等号右边的值绑定到指定的参数中，如：v-bind:content = “item”就是父组件中的item绑定到了content这个参数中
使用变量的方式创建组件
上面我们说到不是全局组件的组件怎么创建呢，也是非常简单的,下面我们演示一下：
只要将代码改成下面的就好了，效果如上图，图这里就不贴啦~
image.png
优化2
从上面的例子我们可以看到我们已经可以把新增的item添加到子组件了，但是如果我想删除item呢？显示子组件是没法实现的，这个时候我们就要考虑和将子组件的值传回给父组件，让父组件去做操作；下面是实现步骤：
1.给组件绑定一个事件，当我们点击item的时候就可以触发事件；
2.触发点击事件的时候，同事告诉父组件要进行删除操作，并把变量的值传递给父组件中，让父组件去进行操作
具体实现：
image.png
我们在上面定义的组件多定义了一个index值，这个是用来保存下标值的；然后再子组件中添加了一个方法handleDeleteClick同时在Li标签中绑定了这个事件，因此当我们点击item值的时候，就会触发handleDeleteClick这个方法，然后会调用名为声明为"delete"的事件，同时也把index值传过去；
image.png
既然我们新增了参数，我们也一定要在循环的时候获取到index的值
3.
image.png
最后自然的要在父组件里面添加对应的处理方法
4.补充：
我们可以看到我们把v-on直接改成了@，这也是绑定事件~
完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta charset="utf-8">
</head>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<di id="app">
<input type="text" v-model="inputValue"/>
<button @click="handleBtnClick">提交</button>
<ul>
<todo-item
v-bind:content = "item"
v-bind:index = "index"
v-for="(item,index) in list"
@delete = "handleDeleteItem"
>
</todo-item>
</ul>
</di>
<script type="text/javascript">
var TodoItem = {
props:['content','index'],
template: "<li @click = 'handleDeleteClick'>{{content}}</li>",
methods:{
//当用户点击的item的时候触发这个事件，这个事件随之调用父组件的方法
handleDeleteClick : function () {
this.$emit("delete",this.index);
}
}
}
//子组件
// Vue.component("TodoItem", {
// props:['content'],
// template: "<li>{{content}}</li>"
// })
//父组件
var app = new Vue({
el: '#app',
data: {
inputValue: "",
list: []
},
components: {
TodoItem:TodoItem
},
methods: {
handleBtnClick: function () {
this.list.push(this.inputValue);
//添加完后记得社为空
this.inputValue = "";
},
handleDeleteItem:function (index) {
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>
3.总结
看了一下入门教程，这里做一个总结：
- Vue.js是mvvm模式实现的轻量级框架，非常好使，让我们开发的是哦户更多的注重数据的变化，而非频繁的操作DOM；
- v-bind,v-for,v-on指令的操作，记住一点，指令往往是在元素中使用的；
- 组件有全局和本页面的组件之分，全局的话用Vue.component实现。本页面的话直接定义就好了；
- 子组件，父组件之前的数据传递问题：
父传子的话比较简单，绑定变量同时在props中定义就好了;
子传父的话，通过触发父组件方法的方式传递
