Vue2.0（第二三周）

最新推荐文章于 2024-11-02 14:29:53 发布

小颖的博客呀

最新推荐文章于 2024-11-02 14:29:53 发布

阅读量101

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/liuyingxiaokeai/article/details/104899785

版权

VUE2.0初学（二）

vue.js

一.用vue实现hello world
1.在<head>部分引用进vue.js的库

<script src="./vue.js"></script>

2.创建一个vue实例

用实例来接管<div id="app">{{content}}</div>
el：确定接管范围
data：确定数据

var app = new Vue({
            el: '#app',
            data:{
                content:'hello world'
            }
        })

3.实现间隔两秒切换content的内容

原方法：

var dom = document.getElementById('app');
dom.innerHTML = 'hello world';

setTimeout(function(){
    dom.innerHTML = 'bye';
},2000)

vue：

setTimeout(function(){
            app.$data.content = 'bye'
        },2000)

MVVM模式：
~~将对dom的改变~~ 变成对data数据的改变

二、用vue实现TodoList
ToDoList是一款非常优秀的任务管理软件，用户可以用它方便地组织和安排计划。

1.v-for

<li v-for="item in list">{{item}}</li>

v-for：告诉vue要去循环list里面的数据并存入item里面

2.v-on
绑定一个函数
注意：方法要写在vue这个实例里面

<button v-on:click="handleBtnClick">提交</button>

var app = new Vue({
    el:'#app',
    data:{
        list:[]
    },
    methods:{
        handleBtnClick:function(){
            alert('click')
        }
    }
})

3.v-model
双向数据绑定
将input里面的value值和data里面的inputValue进行绑定
并将值用push()方法传入list

<input type="text" v-model="inputValue">

data:{
    list:[],
    inputValue:''
        },
methods:{
    handleBtnClick:function(){
         this.list.push(this.inputValue)
         this.inputValue = ''
     }
}

三、MVVM模式

MVC架构

M 层 （ Model ） 模型
V 层 （ View ） 视图
C 层 （ Controller ） 控制器

1.使用mvp模式编写TodoList
MVP架构（jquery）

M 层 （ Model ） 模型
V 层 （ View ） 视图
P 层 （ Presenter ） 主持人

 <script>
    function Page() {

    }
    $.extend(Page.prototype,{
        init:function(){
            this.bindEvents()
        },
        bindEvents:function(){
            var btn = $('#btn');
            btn.on('click',$.proxy(this.handleBtnClick,
                this))
        },
        handleBtnClick:function(){
            var inputElem = $("#input");
            var inputValue = inputElem.val();
            var ulElem = $("#list");
            ulElem.append('<li>' + inputValue + '</li>')
            inputElem.val('');
        }
    })

    var Page = new Page();
    Page.init();
    </script>

V：dom 视图（按钮被点击视图层被操作）
P：控制器（负责业务逻辑调用模型层使用ajax请求）核心：大量代码都在操作dom
在这里插入图片描述
2.使用mvp模式编写TodoList
MVVM架构

M 层 （ Model ） 模型：存储数据
V 层 （ View ） 视图：显示数据
VM 层 （ View Model ） 视图模型：Vue内置，自动监听数据和视图层的变化

在这里插入图片描述
M层：对数据进行操作

优点：简化代码量

四、用组件实现TODOList（3.23-3.30）

1.Vue.component（）
创建全局组件

	子组件模板：template:" <li>todo item</li>"
	
	组件名TodoItem：Vue.component("TodoItem"）
	应用时可以小写todo-item：<todo-item v-for="item in list"></todo-item>

父组件向子组件传入一个绑定值

	v-bind:content="item"
	
	Vue.component("TodoItem",{
            props:['content'],
            template:" <li>{{content}}</li>"
        })
    props:接收这个值（定义外部的值）

2.局部组件
定义一个对象

// 局部组件
        var TodoItem = {
            props:['content'],
            template:" <li>{{content}}</li>"
        }

注册到Vue实例里

components:{
    TodoItem:TodoItem
            },

3.组件间的传值（子组件向父组件传值）
$emit() 子组件向父组件传值（向上一层触发事件）

methods:{
  handleItemClick:function(){
        this.$emit("delete",this.index);
    }
}

父组件中需要监听 @delete=“handleItemDelete”

效果：点击todolist的值页面就会删除这个值

	1.需要子组件向父组件传值
	2.子组件绑定一个点击删除事件
	3.获取到子组件每个值的下标
	4.实现点击删除对应下标的值

2. 3.
<todo-item v-bind:content="item" 
           v-bind:index="index" 
           v-for="(item,index) in list"
           @delete="handleItemDelete">
</todo-item>
1.
methods:{
    handleItemClick:function(){
        this.$emit("delete",this.index);
    }
}
4.
handleItemDelete:function(index){
    this.list.splice(index,1)
}