Vue基础起步

一、用vue实现helloworld

代码

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

浏览器效果如下

知识点

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

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就不会去渲染数据

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

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

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

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

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的数据

<input type="text" v-model="inputValue">//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:事件="事件函数"

<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

知识点

全局组件的使用

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>

子组件的使用

形式跟父组件一样

只不过写法不同

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

三、父子组件的简单传值

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

效果如下

小知识点

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);
                }
            }
        }

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

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

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

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

父组件的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，如果要转载，请注明出处，

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

Vue基础起步

Vue基础起步

一 、用vue实现helloworld

二、用vue实现一个简易toDoList

使用组件改造todoList

三、父子组件的简单传值

结语

一、用vue实现helloworld