VUE2.X全教程--入门篇(一)

最新推荐文章于 2024-05-28 00:40:57 发布

无~痕

最新推荐文章于 2024-05-28 00:40:57 发布

阅读量2k

点赞数 2

分类专栏：前端文章标签：前端框架 vue.js

本文链接：https://blog.csdn.net/qq_27820551/article/details/86600338

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

主要内容：

vue基础语法

MVP及MVVM设计模式的介绍

组件的简单使用

一：下载

进入官网

新建vue项目--用vue实现第一个hello world

    <script src="vue.js"></script>
</head>
<body>
    <div id="app">{{content}}</div>
<script>
//    var app = document.getElementById("app");
//    app.innerHTML='hello world';
//    setTimeout(function(){
//        app.innerHTML = 'bye hello'
//    },2000);

    var app = new Vue({
//    el表示限制接管的范围区域，表示接管了id为App的元素
        el:'#app',
        data:{
            content:'hello world'
        }
    });
    //两秒以后会变化
    setTimeout(function(){
        app.$data.content='bye world'
    },2000);

用vue实现一个todoList

        <div id="app">
            <!--v-model:表示数据的双向绑定，当input中的数据发生绑定的时候，data中的inputValue也会发生改变-->
            <input type="text" v-model="inputValue"/>
            <!--v-on绑定事件：绑定的事件需要定义在vue data的 methods中-->
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <!--把list中的每一项都放在item中 list表示data中的list，item表示循环中的每一项的内容-->
               <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
        <script>
            var app = new Vue({
                el:'#app',
                data: {
                    list: [],
                      inputValue:''
                },
                methods:{
                    handleBtnClick: function () {
                        this.list.push(this.inputValue);
                        this.inputValue = '';
                    }
                }
            });
        </script>

MVP设计模式：view（视图层） model（模型层） presenter（表现层）

<!--视图层-->
<div><input type="text" id="ipt"/>
    <button id="btn">提交</button>
    <ul id="list">
    </ul>
</div>
<script>
    //    M  模型层   V视图  P 控制器
    //      流程：视图发起事件转到控制器去交互  大部分都是在做dom操作
    function Page() {
    }
    $.extend(Page.prototype, {
        init: function () {
            this.bindEvents();
        },
        bindEvents: function () {
            var btn = $('#btn');
//                低版本不支持on进行绑定  控制器
            btn.bind('click', $.proxy(this.handleBtnClick, this))
        },
        handleBtnClick: function () {
            var inputValue = $("#ipt").val();
            var ulElem = $("#list");
            ulElem.append('<li>' + inputValue + '</li>');
            $('#ipt').val("");
        }
    });
    var page = new Page();
    page.init();
</script>

MVVM设计模式

M V VM(vue) dom的操作交给了vue进行处理，我们值需要关注处理数据就可以了

前端组件化：

作用：将每一个出现的功能模块进行划分为每一个组件，方便后期进行维护

组件使用：

全局组件：

<!-- 将li标签当做一个组件进行处理-->
           定义一个全局组件Vue.component  TodoItem 直接可以在模板中使用todo-item
//            Vue.component("TodoItem",{
//                  接收内容
//                props:['content'],
//                template:"<li>{{content}}</li>"
//            })

局部组件

局部组件
                var TodoItem = {

                    props:['content'],
                    template:"<li>{{content}}</li>"
                }

局部组件需要在范围中进行注册

var app = new Vue({
                el:'#app',
//                局部组件注册
                components:{
                    TodoItem:TodoItem
                },

组件使用

<!--v-bind:表示进行传值给子组件-->
                <todo-item v-bind:content="item" v-for="item in list">
                </todo-item>

简单的组件间的传值

父组件向子组件传值： v-bind：... 其中v-bind可以省略

v-bind:index="index"

//                    props:子组件接收父组件的值
                    props:['content','index'],

子组件通过事件触发的方式向父组件进行传值

                    methods:{
                        handleItemClick:function(){
//                           子组件向父组件传值用 $emit的方式传值
                            this.$emit("delete",this.index);
                        }
                    }

父组件监听事件接收子组件传递过来的参数

@delete="handleItemDelete"

 handleItemDelete:function(index){
//                        删除当前的那一项
                        this.list.splice(index,1);
                    }

如下便是所有的demo代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
        <div id="app">
            <!--v-model:表示数据的双向绑定，当input中的数据发生绑定的时候，data中的inputValue也会发生改变-->
            <input type="text" v-model="inputValue"/>
            <!--v-on绑定事件：绑定的事件需要定义在vue data的 methods中-->
            <button v-on:click="handleBtnClick">提交</button>
            <ul>
                <!--把list中的每一项都放在item中 list表示data中的list，item表示循环中的每一项的内容-->
               <!--<li v-for="item in list">{{item}}</li>-->
                <!--TodoItem进行改写显示格式-->
                <!--v-bind:父组件向子组件传值  v-bind可以省略-->
                <!-- @delete="handleItemDelete"表示父组件监听删除方法-->
                <todo-item v-bind:content="item"
                           v-bind:index="index"
                           v-for="(item,index) in list"
                           @delete="handleItemDelete">
                </todo-item>

            </ul>
        </div>
        <script>

//            <!-- 将li标签当做一个组件进行处理-->
           定义一个全局组件Vue.component  TodoItem 直接可以在模板中使用todo-item
//            Vue.component("TodoItem",{
//
//                props:['content'],
//                template:"<li>{{content}}</li>"
//            })
//                局部组件
                var TodoItem = {
//                    props:子组件接收父组件的值
                    props:['content','index'],
                    template:"<li @click='handleItemClick'>{{content}}</li>",
                    methods:{
                        handleItemClick:function(){
//                           子组件向父组件传值用 $emit的方式传值
                            this.$emit("delete",this.index);
                        }
                    }
                }

            var app = new Vue({
                el:'#app',
//                局部组件注册
                components:{
                    TodoItem:TodoItem
                },
                data: {
                    list: [],
                      inputValue:''
                },
                methods:{
                    handleBtnClick: function () {
                        this.list.push(this.inputValue);
                        this.inputValue = '';
                    },
                    handleItemDelete:function(index){
//                        删除当前的那一项
                        this.list.splice(index,1);
                    }
                }
            });
        </script>
</body>
</html>

无~痕

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
VUE2.X全教程--入门篇(一)

主要内容：vue基础语法MVP及MVVM设计模式的介绍组件的简单使用一：下载进入官网新建vue项目--用vue实现第一个hello world &lt;script src="vue.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt; &lt;div id="app"&gt;{{c
复制链接

扫一扫