Vue基础起步

Vue基础起步

一 、用vue实现helloworld

代码

<div id="app">{{content}}</div> <script> var app = new Vue({ el:"#app", data:{ content:"hello world" } }) </script>复制代码

浏览器效果以下

知识点

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

2. el是指定Vue实例绑定哪一个dom标签，就是说vue的操做范围是在哪一个标签以内

   好比我如今把代码改成以下

   <div id="app">{{content}}</div> <div>{{content}}</div> <script> var app = new Vue({ el:"#app", data:{ content:"hello world" } }) </script> 复制代码

   浏览器效果以下

   

   
   

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

3. vue是数据绑定是经过{{名字}}实现的，能够渲染出data{名字：数据}中的数据

4. vue的好处是免去了dom的操做，咱们只须要在数据上逻辑上作文章便可

   好比咱们如今用原生js去实现上面的功能

   <div id="app"></div> <script> var app = document.getElementById("app"); app.innerHTML = "hello world", </script> 复制代码

5. 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)这样就会阻止修改限有的属性

2、用vue实现一个简易toDoList

所用知识点以下

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

<input type="text" v-model="inputValue">//vue中的datadata:{    inputValue:''}复制代码

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

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

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

3. methods全部的事件都写在methods对象中，v-on:事件="事件函数"

   <button v-on:click="btnClick">提交</button> new Vue({ methods:{ btnClick:function(){ this.list.push(this.inputValue); this.inputValue=""; } } })复制代码

好了如今把代码和效果贴上来喽

 <div id="app"> <input type="text" v-model="inputValue"> <button v-on:click="btnClick">提交</button> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> var app = new Vue({ el:"#app", data:{ list:[], inputValue:'' }, methods:{ btnClick:function(){ this.list.push(this.inputValue); this.inputValue=""; } } }) </script>复制代码

效果图

使用组件改造todoList

知识点

1. 全局组件的使用

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

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

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

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

   html

   <todo-list  v-bind:content="item" v-for="item in list"></todo-list>复制代码

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

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

   代码以下

   <div id="app"> <input type="text" v-model="inputValue"> <button v-on:click="btnClick">提交</button> <ul> <!-- <li v-for="item in list">{{item}}</li> --> <todo-list v-bind:content="item" v-for="item in list"></todo-list> </ul> </div> <script> Vue.component('todoList',{ props:['content'], template:'<li>{{content}}</li>' }) var app = new Vue({ el:"#app", data:{ list:[], inputValue:'' }, methods:{ btnClick:function(){ this.list.push(this.inputValue); this.inputValue=""; } } }) </script>复制代码

2. 子组件的使用

   形式跟父组件同样

   只不过写法不一样

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

3、父子组件的简单传值

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

效果以下

小知识点

v-on:click能够缩写为@click

v-bind:能够缩写为:bind

代码

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

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

2. 而后咱们在子组件的methods加入一个点击事件函数deleteItem

   • emit能够用来触发父组件自定义的事件,第一个参数是自定义事件的名字， 后面的参数能够传参给父组件

3. 父组件引用子组件的html代码

   <todo-list :content="item" :index="index" v-for="(item,index) in list" @delete="handleDeleteItem"></todo-list>复制代码

   @delete是父组件自定义的事件，当点击子组件时，子组件会自动触发该自定义事件，并把参数传过去

4. 父组件的Vue实例中

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

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

所有代码以下

<div id="app"> <input type="text" v-model="inputValue"> <button v-on:click="btnClick">提交</button> <ul> <todo-list :content="item" :index="index" v-for="(item,index) in list" @delete="handleDeleteItem"></todo-list> </ul> </div> <script> var todoList = { props:['content',"index"], template:'<li @click="deleteItem">{{content}}</li>', methods:{ deleteItem:function(){ this.$emit("delete",this.index); } } } var app = new Vue({ el:"#app", components:{ todoList:todoList }, data:{ list:[], inputValue:'' }, methods:{ btnClick:function(){ this.list.push(this.inputValue); this.inputValue=""; }, handleDeleteItem:function(index){ this.list.splice(index,1); } } }) </script>复制代码

结语

由于本人水平有限，若是有错漏的地方，还请看官多多指正

本文做者胡志武，写于2019/5/11，若是要转载，请注明出处，

若是以为写的不错， 请点个赞吧