JavaScript的强大不必多言。做为一名后端开发工程师，不会前端是不行的，这年头走哪都讲究个全栈么。Angular、React、Vue等js库的出现，彻底颠覆了后端开发对前端的认识。本人最近自学了一些Vue的皮毛，写下这篇博客不是为了哗众取宠，权当是为自己做一个Vue学习笔记。这篇博客主要记录了我学习Vue基础知识，完成一个TodoList小功能的开发过程。
首先进入Vue的官网下载Vue.js（Vue官网下载）开发版本，由于是学习基础知识，就不使用CDN了。保存vue.js之后，新建index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- -->
<div id="root">{{msg}}</div>
<script>
var my_vue = new Vue({
<span style="white-space:pre;"> </span>el:"#root",
<span style="white-space:pre;"> </span>data:{
<span style="white-space:pre;"> </span>msg:"hello world"
<span style="white-space:pre;"> </span>}
})
</script>
</body>
</html>
在这个index.html文件中，使用引入<script>将刚才下载的vue.js嵌套进来。创建一个id="root"的div，称之为挂载点，然后在js代码中创建名为my_vue的vue实例( var my_vue = new Vue({...}) )，其中el表示接管的DOM对象，此时我们创建的my_vue就和这个div进行了绑定。我们还在my_vue中定义了data，其中msg的值为"hello world"，而在div中接收时，需要使用{{msg}}（插值表达式）的形式进行接收。浏览器中的效果如图：
image
我们还可以在my_vue中定义模板template，在其中可以指定具体的html内容，此时挂载点中内容就是模板中的内容。
在data中还可以定义其他的数据，在挂载点中用v-text或v-html的形式进行显示：
<h1 v-text="msg"></h1>
<h1 v-html="msg"></h1>
二者的区别在于v-text会进行转译，而v-html不会
vue中可以使用@符号对元素绑定事件，例如@click，然后在vue实例中添加methods，在其中定义具体的方法：
<h1 @click="handleClick">{{msg}}</h1>
...
var v1 = new Vue({
el:"#root",
data:{
msg:"hello world"
},
methods:{
handleClick:function(){
this.msg = "你好，世界"
}
}
})
此时，点击"hello world"之后，其内容就会变成"你好，世界"。这里，我们发现一个现象，当msg的值改变之后，我们不需要直接操作dom，vue实例会监听到数据的改变，自动对dom进行更新，页面也自动发生了改变。
我们可以使用 ： 进行属性的绑定，将vue实例中的数据绑定到挂载点的属性值中。使用v-model指令进行双向绑定，即页面中的值发生改变时，会改变vue实例中的值：
...
<input v-model="content"/>
<div>{{content}}</div>
...
var v1 = new Vue({
el:"#root",
data:{
content:"this is content"
}
})
可以使用computed指令表示计算属性，使用watch指令表示侦听器：
<div id="root">
<div>
<input v-model="firstName"/>
<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
</div>
<script>
var v1 = new Vue({
el:"#root",
data:{
firstName:"",
lastName:"",
count:0
},
computed:{
fullName:function(){
return this.firstName +" "+ this.lastName
}
},
watch:{
fullName:function(){
return this.count++
}
}
})
</script>
上面这段代码中，fullName就是计算属性，它是通过firstName和lastName计算得来，而侦听器的作用是当fullName发生时，使count加1
我们可以使用v-if和v-show来控制元素的显示与否，二者的区别在于：当传入的显示值是false时，v-if会在页面上将控制的dom删除掉，而v-show会改变dom的css为display：none
<div id="root">
<div v-if="show">hello world</div>
<div v-show="show">你好，世界</div>
<button @click="handleClick">toggle</button>
</div>
<script>
var v1 = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
使用v-for来循环展示list：
<div id="root">
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
var v1 = new Vue({
el:"#root",
data:{
list:[1,2,3]
}
})
</script>
其中item表示循环中具体的每一项元素，index表示该元素的下标，这里我们需要为循环体指定一个key属性以提高渲染的效率，这里使用index作为key的值（实际上这不是一个好的选择）
现在，我们需要明白组件的概念。组件其实就是指页面上的某一部分。在Vue中，组件就是实例，实例就是组件。组件之间也是可以互相通信的。可以使用下面的代码定义一个全局组件：
<script>
Vue.component('todo-item',{
template:'<li>abc</li>'
})
</script>
最后，进行一个TodoList的功能的开发，附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门3.4-11111TodoList的删除功能-----</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!--<li v-for="(item,index) of list" :key="index">{{item}}</li>-->
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item><!--订阅 监听delete 监听之后调用handleDelete方法-->
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index); //发布 标志为delete
}
}
})
var v1 = new Vue({
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handleSubmit:function(){
if(this.inputValue.trim() == ""){
alert("请输入内容");
this.inputValue = "";
return ;
}
this.list.push(this.inputValue);
this.inputValue="";
},
handleDelete:function(index){
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>
在这段代码中，我们实现了TodoList非常简单的功能：在input框中输入内容，点击提交之后，就会以ul的形式展示出来，当点击ul中的li时，就会将其删除掉。
首先我们使用v-model指令将input框的值和vue实例v1中的inputValue进行了双向绑定，然后提供了提交按钮的click事件和方法。然后我们定义了名为'todo-item'的组件，在其中定义了其模板是一个li标签，并对其进行了v-for循环。在todo-item元素中，我们给了他一个属性content其值为item，也就是循环的list中的元素，而这个content元素是通过父组件传给他的，所以需要写成：content（我们可以认为id="root"的div为父组件，而todo-item为子组件），同样的，父组件通过index属性将循环中的index传给了子组件。而子组件想要接收content和index这两个属性，就需要在props中定义（props:['content','index']）而这就是父子组件之间的通信：父组件将值以属性的形式传给子组件。然后，子组件再其模板中将content元素以差值表达式的形式显示出来。这样我们就实现TodiList的添加功能。
而要实现TodoList的删除功能，我们首先需要明确，其实我们就是通过子组件的click时间，将自己的下标告诉父组件，然后在父组件中将list中的对应下标的一项删掉即可，而这就是父子组件之间的通信：子组件将值传给父组件。这里我们需要用到发布/订阅模式，在子组件的每一个li中，我们已经从父组件那里接收到了自己的index值，所以只需要定义一个handleClick方法，在这个方法中，我们使用发布模式（this.$emit('delete',this.index)），以delete为标记，将index值发布出去。而在父组件中，通过@delete的形式发起订阅，当监听到delete的发布之后，调用父组件自身的handleDelete方法，然后在该方法中将list中对应的元素删除即可。
网友评论