vue 起步

vue 官网

目前最火的前端框架当属Vue.js了，很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授予了这么高的评价的vue.js，也是开源世界华人的骄傲，因为它的作者是位中国人–尤雨溪（Evan You）。

Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

vue 官网：https://cn.vuejs.org/

vue 学习手册：https://cn.vuejs.org/v2/guide/index.html

实现 hello world 程序编辑

vue 不支持 IE8 及以下版本，因为 vue 是用来 IE8 无法模拟的 ECMAScript5 特性，但是它支持所有 ECMAScript5 的浏览器。

vue.js 开发版本地址：https://vuejs.org/js/vue.js

目录结构：

原生 js 写法：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
</head>
<body>
    <div id="app"></div>

    <script>
        var dom = document.getElementById("app");
        dom.innerHTML = "hello world"
    </script>
</body>
</html>

使用 vue.js 编写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
    <!-- 引入 vue.js 库文件 -->
    <script src="vue.js"></script>
</head>
<body>
    <!-- 调用 data 中的 content 对应的数据 -->
    <div id="app">{{content}}</div> 

    <script>
        // 实例化一个vue实例
        var app = new Vue({
            el:'#app', // 配置项，表示实例负责管理的区域，指id=app的div标签。
            data:{
                content:"Hello World" 
            }
        }) 
    </script>
</body>
</html>

文字两秒钟后动态变换

原始js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
    <!-- 引入 vue.js 库文件 -->
    <script src="vue.js"></script>
</head>
<body>
    <div id="app"></div> 

    <script>
        var dom = document.getElementById("app")
        dom.innerHTML="hello world"

        setTimeout(() => {
            dom.innerHTML="by world"
        }, 2000);

    </script>
</body>
</html>

vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
    <!-- 引入 vue.js 库文件 -->
    <script src="vue.js"></script>
</head>
<body>
    <!-- 调用 data 中的 content 对应的数据 -->
    <div id="app">{{content}}</div> 

    <script>

        // 实例化一个vue实例
        var app = new Vue({
            el:'#app', // 配置项，表示实例负责管理的区域，指id=app的div标签。
            data:{
                content:"Hello World" 
            }
        }) 
        
        setTimeout(() => {
            app.$data.content="by world"
        }, 2000);

    </script>
</body>
</html>

使用 Vue.js 实现 TodoList

通过 input 框，想已有列表项中添加一条信息。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDoList</title>
    <!-- 引入库文件 -->
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-model 数据-双向绑定 -->
        <input type="text" v-model="inputValue">
        <!-- v-on vue中用来绑定事件 -->
        <button v-on:click="handleBtnClick">提交</button>
        <ul>

            <!-- <li>第一课的内容</li>
            <li>第二课的内容</li> -->

            <!-- v-for 用来循环 -->
            <li v-for="item in list">{{item}}</li>

        </ul>

    </div>

    <script>
        // 创建一个示例
        var app = new Vue({
            el: '#app',
            // data 用于数据绑定
            data: {
                // 用于存储数据
                list: [],
                // 用于与输入框数据-双向绑定
                inputValue: '',
            },
            // 用于构造方法
            methods: {
                // 提交事件
                handleBtnClick: function () {
                    //  获取 input 框内容.
                    // alert(this.inputValue)

                    // push 向集合list添加数据
                    this.list.push(this.inputValue)
                    // 清空输入框
                    this.inputValue = ''
                }
            }
        })

    </script>

</body>

</html>

添加事件：v-on:click="handleBtnClick"

数据绑定：v-model="inputValue"

数据循环输出：v-for="item in list"

MVVM 模式

一般前端设计的 MVP 模式

　　M：模型层

　　V：视图层

　　P：控制层

VUE 的 MVVM 模式

　　M：模型层

　　V：视图层

　　VM：ViewModel 层

　　总结：以前使用 jQuery 编辑代码的时候主要是使用MVP面向于DOM进行开发，而现在使用MVVM开发的过程中是面向数据进行开发编程。

前段组件化

组件，是个人页面的一部分。分成多个组件，可以将一个大型的项目按照拼积木的方式搭建起来。一个项目很庞大，但是将这个大项目划分成很多组件，使得每个组件很精小，有利于开发和维护。

记住一点，每一个组件其实就是页面上的一个区域。

通过组件化，优化 ToDOList 功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDoList</title>
    <!-- 引入库文件 -->
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-model 数据-双向绑定 -->
        <input type="text" v-model="inputValue">
        <!-- v-on vue中用来绑定事件 -->
        <button v-on:click="handleBtnClick">提交</button>
        <ul>

            <!-- <li>第一课的内容</li>
            <li>第二课的内容</li> -->

            <!-- v-for 用来循环 -->
            <!-- <li v-for="item in list">{{item}}</li> -->

            <!-- 与TodoItem绑定 -->
            <!-- v-bind通过变量content将item传给TodoItem子组件 -->
            <todo-item v-bind:content="item" v-for="item in list"></todo-item>

        </ul>

    </div>

    <script>
        // 创建全局组件,名字叫做TodoItem，内容是li标签。全局组件不需要在vue示例中注册
        // Vue.component("TodoItem", {
        //     // 接受前段绑定的content数据
        //     props: ['content'],
        //     template: "<li>{{ content }} </li>",
        // })

        // 局部组件,在示例中必须被注册，全局组件不需要
        var TodoItem = {
            // props是指外部传递回来的数据
            props: ['content'],
            template: "<li>{{ content }}</li>",
        }



        // 创建一个示例
        var app = new Vue({
            el: '#app',
            // 将局部组件注册到示例中。
            components: {
                TodoItem: TodoItem,
            },
            // data 用于数据绑定
            data: {
                // 用于存储数据
                list: [],
                // 用于与输入框数据-双向绑定
                inputValue: '',
            },
            // 用于构造方法
            methods: {
                // 提交事件
                handleBtnClick: function () {
                    //  获取 input 框内容.
                    // alert(this.inputValue)

                    // push 向集合list添加数据
                    this.list.push(this.inputValue)
                    // 清空输入框
                    this.inputValue = ''
                }
            }
        })

    </script>

</body>

</html>

组件间传值

父子组件传值问题，案例，在 ToDoList 案例中添加，点击列项删除功能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDoList</title>
    <!-- 引入库文件 -->
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-model 数据-双向绑定 -->
        <input type="text" v-model="inputValue">
        <!-- v-on vue中用来绑定事件 -->
        <button v-on:click="handleBtnClick">提交</button>
        <ul>

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

            </todo-item>

        </ul>

    </div>

    <script>

        var TodoItem = {
            props: ['content','index'],
            // @click=  等同于 v-on:oclick=,方法写在子组件方法当中。
            template: "<li @click='handleItemClick'>{{ content }}</li>",
            methods: {
                // 子组件点击方法
                handleItemClick: function () {
                    //当子组件按下，向外触发一个事件。
                    this.$emit("delete",this.index)
                }
            }
        }



        // 创建一个示例
        var app = new Vue({
            el: '#app',
            // 将局部组件注册到示例中。
            components: {
                TodoItem: TodoItem,
            },
            // data 用于数据绑定
            data: {
                // 用于存储数据
                list: [],
                // 用于与输入框数据-双向绑定
                inputValue: '',
            },
            // 用于构造方法
            methods: {
                // 提交事件
                handleBtnClick: function () {
                    //  获取 input 框内容.
                    // alert(this.inputValue)

                    // push 向集合list添加数据
                    this.list.push(this.inputValue)
                    // 清空输入框
                    this.inputValue = ''
                },
                // 父组件删除选项,index为列表元素的下标
                handleItemDelete: function (index) {
                    // 从传进的下标位置开始删除一项。
                    this.list.splice(index,1)
                }
            }
        })

    </script>

</body>

</html>

　　@click= 等同于 v-on:oclick=

　　:content= 等同于 v-bind:content=

posted @ 2019-01-10 21:28 我是+V 阅读(213) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

我是+V

学习记录仅供参考不可尽信

vue 起步

vue 官网

实现 hello world 程序编辑

文字两秒钟后动态变换

使用 Vue.js 实现 TodoList

MVVM 模式

一般前端设计的 MVP 模式

VUE 的 MVVM 模式

前段组件化

通过组件化，优化 ToDOList 功能

组件间传值

公告

我是+V

学习记录 仅供参考 不可尽信

vue 起步

vue 官网

实现 hello world 程序编辑

文字两秒钟后动态变换

使用 Vue.js 实现 TodoList

MVVM 模式

一般前端设计的 MVP 模式

VUE 的 MVVM 模式

前段组件化

通过组件化，优化 ToDOList 功能

组件间传值

公告

学习记录仅供参考不可尽信