Vue基础起步

一、用vue实现helloworld

代码


    
     {
     {content}}
    
    复制代码

浏览器效果如下

知识点

使用vue时，应该用 new Vue 创建一个vue实例，此处用app来接收这个实例

el是指定Vue实例绑定哪个dom标签，就是说vue的操作范围是在哪个标签之内

比如我现在把代码改为如下


      
       {
       {content}}
      
      
       {
       {content}}
      
    复制代码

浏览器效果如下

可以看到只要超出了div#app的范围，vue就不会去渲染数据

vue是数据绑定是通过{
{名字}}实现的，可以渲染出data{名字：数据}中的数据

vue的好处是免去了dom的操作，我们只需要在数据上逻辑上做文章即可

比如我们现在用原生js去实现上面的功能


      
            复制代码

vue是响应式的，只要数据一变化，视图数据就会重新渲染
```
var app = new Vue({            el:"#app",            data:{                content:"hello world"            }        })        setTimeout(function(){            app.$data.content="Bye world!"        },1000)复制代码
```
我们会看到，一秒之后，浏览器中出现了变化
注意

只有data中原本存在的属性被更新时，vue才会重新渲染，如果是app.$data.a=3后续添加data原本不存在的属性与值，vue是不会响应的

Object.freeze(data)这样就会阻止修改限有的属性

二、用vue实现一个简易toDoList

所用知识点如下

v-model可以实现数据的双向绑定，dom中的数据可以影响到vue实例，vue实例的数据可以影响到dom的数据

//vue中的datadata:{    inputValue:''}复制代码

data中的inputValue和v-model中的inputValue 会同时变化，其中一个变化，另一个也跟着变化

v-for="item in list"v-for会去遍历data中的list，item代指每一项

$表示Vue实例所拥有的属性和方法，此外还有$.el,$watch。。。

methods所有的事件都写在methods对象中，v-on:事件="事件函数"

new Vue({	methods:{		btnClick:function(){                    this.list.push(this.inputValue);                    this.inputValue="";                }	}})复制代码

好了现在把代码和效果贴上来喽

效果图

使用组件改造todoList

知识点

全局组件的使用

Vue.component('todoList',{})用来注册一个名字叫todoList的全局组件，{}是要传进去的参数，注意 todoList在html中要写作todo-list

Vue.component('todoList',{        props:['content']，      template:'{
       {content}}
'})复制代码

props:['content']，用来接收父组件传递的值

template:''，必填，展示模板的内容，注意千万不能写<li>this.$data.content</li>，会报错，而要写成<li>{
{content}}</li>

html


      复制代码

v-bind:名字=“值” v-bind可以用来绑定数据，这里是v-for遍历父组件的list数据，用content来接收父组件的list中每一项（item）的值

综上在组件中中，用props:[‘content’] 来接受父组件的传值

代码如下

子组件的使用

形式跟父组件一样

只不过写法不同

var todoList = {            props:['content'],            template:'{
       {content}}
'        },//在vue的实例中new Vue({	components:{		todoList:todoList 	}})复制代码

三、父子组件的简单传值

我们要实现一个功能，点击列表信息时，删除该信息

效果如下

小知识点

v-on:click可以缩写为@click

v-bind:可以缩写为:bind

代码

var todoList = {            props:['content',"index"],            template:'{
     {content}}
',            methods:{                deleteItem:function(){                    this.$emit("delete",this.index);                }            }        }复制代码

在template中加入点击事件@click="deleteItem"

然后我们在子组件的methods加入一个点击事件函数deleteItem
- emit可以用来触发父组件自定义的事件,第一个参数是自定义事件的名字，后面的参数可以传参给父组件

父组件引用子组件的html代码
```
      复制代码
```
@delete是父组件自定义的事件，当点击子组件时，子组件会自动触发该自定义事件，并把参数传过去

父组件的Vue实例中

new Vue({    methods:{        handleDeleteItem:function(index){            this.list.splice(index,1);        }    }})复制代码

index就是子组件中$emit('delete',this.index)中的this.index传过来的参数

全部代码如下

结语

因为本人水平有限，如果有错漏的地方，还请看官多多指正

本文作者胡志武，写于2019/5/11，如果要转载，请注明出处，

如果觉得写的不错，请点个赞吧

Vue基础起步

一 、用vue实现helloworld

二、用vue实现一个简易toDoList

使用组件改造todoList

三、父子组件的简单传值

结语

一、用vue实现helloworld