手把手教你Vue框架从入门到实战项目（一）

最新推荐文章于 2024-06-12 08:04:17 发布

宋承佑

最新推荐文章于 2024-06-12 08:04:17 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_41535944/article/details/103657552

版权

前端专栏收录该内容

39 篇文章 6 订阅

订阅专栏

第一章 vue的起步

VUE的安装

官方网站：https://cn.vuejs.org

在官网下载最新开发版本的vue.js文件，在开发过程中，我们使用<script>标签进行引入。

使用vue.js实现Hello World

<body>
    <!-- 文本插值 -->
	<div id="app">{{content}}</div>
</body>

{
    let app = new Vue({
        el: '#app',//这是获得管理div的权限
        data: {
            content: 'hello world'
        }
    })
    //2秒后跟世界说拜拜
    setTimeout(function(){
        app.$data.content = 'bye world'
    },2000)
}

使用vue.js实现ToDoList

<!-- View层 -->
<div id='app'>
    <!-- v-model命令可以获取文本内容 数据是双向绑定的 -->
    <input type="text" v-model="inputValue"/>
    <!-- v-on:click绑定了一个点击事件 -->
    <button v-on:click="handelBtnClik">提交</button>
    <ul>
        <!-- 循环读取list数据 -->
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>

{
    //Model层
    let app = new Vue({
        el:'#app',
        data:{
            list:[],
            inputValue:''
        },
        //事件方法需要写在methods对象中
        methods:{
            handelBtnClik:function(){
                this.list.push(this.inputValue);
                this.inputValue="";
            }
        }
    })
}

MVVM模式

在学习MVVM模式之前，我们先了解一下什么是MVP模式。

View–视图层 Presenter–控制层 Model–数据层（模型）
在这里插入图片描述
MVP模式关系图

所谓的MVP模式就是：M层与P层使用ajax进行传输数据，P层通过操作DOM来控制V层的显示内容。

那么在MVVP模式中，没有Presenter层。所以在MVVP模式中，我们是不需要关注VM层是如何实现的，只需要重点关注Model与View层即可，而ViewModel是由VUE已经实现好了的，写的时候VUE会自动帮我们完成DOM的操作。vue实现原理：http://www.imooc.com/article/80343
在这里插入图片描述
MVVP模式关系图

前端组件化

所谓组件化，就是把一个项目中的功能，拆分成N个小功能（组件）。可以说多个组件组成一个项目，一个项目由多个组件构成。这样的好处在于更好维护，因为只要维护组件就可以了。比如说一个网站的导航、轮播图等都可以拆分成组件。

在这里插入图片描述

使用组件化的思想来修改ToDoList

<div id='app'>
    <input type="text" v-model="inputValue"/>
    <button v-on:click="handelBtnClik">提交</button>
    <ul>
        <!-- 1.item遍历获取list的内容，再通过v-bind指令中的变量content传给<todo-item> -->
        <todo-item v-for="item in list" v-bind:content="item"></todo-item>
    </ul>
</div>

//定义全局组件
//Vue.component("todo-item",{
//    props: ['content'],//2.接收子组件传来的值
//    template:"<li>{{content}}</li>"
//})

//01.定义局部组件
let TodoItem={
    props: ['content'],//2.接收子组件传来的值
    template:"<li>{{content}}</li>"
}

let app = new Vue({
    el:'#app',
    //02.注册局部组件
    components:{
        TodoItem:TodoItem
    },
    data:{
        list:[],
        inputValue:''
    },
    //事件方法需要写在methods对象中
    methods:{
        handelBtnClik:function(){
            this.list.push(this.inputValue);
            this.inputValue="";
        }
    }
})

简单的组件间传值

需求：通过点击添加的item 实现删除

<div id="app">
    <!-- 使用v-model指令对数据进行双向绑定 -->
    <input type="text" v-model="inputText">
    <!-- 使用v-on:click指令声明一个点击事件 缩写为 @-->
    <button @click="handleBtnClick">提交</button>
    <ul>
        <!-- 使用V-bind指令对局部组件进行绑定 缩写为 ":"-->
        <todo-item :content="item" :index="index" v-for="(item,index) in list" @delete="handleItemDelete">
        </todo-item>
    </ul>
</div>

//声明局部组件
var TodoItem={
    props:["content","index"],//获取标签组件todo-item绑定的数据
    template:"<li @click='handleItemClick'>{{content}}</li>",//给项目设置一个监听事件
    methods:{
        handleItemClick:function(){
            this.$emit("delete",this.index);//是$emit()向外触发事件
        }
    }
}

var app=new Vue({
    el:"#app",//这是获取标签的id
    components:{//采用对象形式对局部组件进行注册
        TodoItem:TodoItem
    },
    data:{//设置需要的数据
        list:[],//数组数据
        inputText:""//这里可以获取文本框的内容
    },
    methods:{//写事件的时候写在这里面
        handleBtnClick:function(){
            this.list.push(this.inputText);
            this.inputText="";
        },
        handleItemDelete:function(index){
            this.list.splice(index,1);//删除一项
        }
    }
})

本章小结

通过以上的学习，建议去vue官网，仔细阅读介绍下的所有内容。

宋承佑

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
手把手教你Vue框架从入门到实战项目（一）

第一章 vue的起步VUE的安装官方网站：https://cn.vuejs.org在官网下载最新开发版本的vue.js文件，在开发过程中，我们使用使用vue.js实现Hello World<body>  <div id="app">{{content}}</div></body&gt...
复制链接

扫一扫