JavaScript的强大不必多言。做为一名后端开发工程师，不会前端是不行的，这年头走哪都讲究个全栈么。Angular、React、Vue等js库的出现，彻底颠覆了后端开发对前端的认识。本人最近自学了一些Vue的皮毛，写下这篇博客不是为了哗众取宠，权当是为自己做一个Vue学习笔记。这篇博客主要记录了我学习Vue基础知识，完成一个TodoList小功能的开发过程。
首先进入Vue的官网下载Vue.js(Vue官网下载)开发版本，由于是学习基础知识，就不使用CDN了。保存vue.js之后，新建index.html文件：
Vue入门var my_vue = new Vue({
el:"#root",
data:{
msg:"hello world"
}
})
在这个index.html文件中，使用引入
image
我们还可以在my_vue中定义模板template，在其中可以指定具体的html内容，此时挂载点中内容就是模板中的内容。
在data中还可以定义其他的数据，在挂载点中用v-text或v-html的形式进行显示：
二者的区别在于v-text会进行转译，而v-html不会
vue中可以使用@符号对元素绑定事件，例如@click，然后在vue实例中添加methods，在其中定义具体的方法：
{{msg}}
...
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实例中的值：
...
...
var v1 = new Vue({
el:"#root",
data:{
content:"this is content"
}
})
可以使用computed指令表示计算属性，使用watch指令表示侦听器：
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++
}
}
})
上面这段代码中，fullName就是计算属性，它是通过firstName和lastName计算得来，而侦听器的作用是当fullName发生时，使count加1
我们可以使用v-if和v-show来控制元素的显示与否，二者的区别在于：当传入的显示值是false时，v-if会在页面上将控制的dom删除掉，而v-show会改变dom的css为display：none
toggle
var v1 = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
使用v-for来循环展示list：
- {{item}}
var v1 = new Vue({
el:"#root",
data:{
list:[1,2,3]
}
})
其中item表示循环中具体的每一项元素，index表示该元素的下标，这里我们需要为循环体指定一个key属性以提高渲染的效率，这里使用index作为key的值(实际上这不是一个好的选择)
现在，我们需要明白组件的概念。组件其实就是指页面上的某一部分。在Vue中，组件就是实例，实例就是组件。组件之间也是可以互相通信的。可以使用下面的代码定义一个全局组件：
Vue.component('todo-item',{
template:'
abc'})
最后，进行一个TodoList的功能的开发，附上代码：
Vue入门3.4-11111TodoList的删除功能-----提交
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
Vue.component('todo-item',{
props:['content','index'],
template:'
{{content}}',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);
}
}
})
在这段代码中，我们实现了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中对应的元素删除即可。
997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
