Vue.js入门

Vue.js是一个轻量级的前端框架，让开发者不必在于视图层，更多的在于数据层的展现和交互，减少了Dom的操作；

1.简单入门和讲解

1.1案例1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Vue基础知识练习</title>
    <meta charset="utf-8"></head>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<body>
    <div id = "app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data : {
                message: 'Hello World'
            }
        })
    </script>
</body>
</html>
image.png

讲解：

  • {{message}}:定义了一个名为message的变量，值需要在data数据域中确定；
  • el:绑定某个id，指定某个控件
  • data：数据域，可以在这里进行数据的初始化

1.2：案例2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta charset="utf-8"></head>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <di id = "app">
        <input type="text" v-model="inputValue"/>
        <button v-on:click="handleBtnClick">提交</button>
        <ol>
            <li v-for="item in list">
                {{item}}
            </li>
        </ol>
    </di>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data: {
                inputValue:"",
                list : []
            },
            methods:{
                handleBtnClick: function () {
                    this.list.push(this.inputValue);
                    //添加完后记得社为空
                    this.inputValue = "";
                }
            }
        })

    </script>
</body>
</html>
image.png

这个案例是可以在输入框里面，输入数据，然后按提交，这样会在界面里面回显刚刚提交的数据；这里引入几个知识点：

  • 双向绑定：v-model,这是vue的一个指令，和元素结合使用；当我们修改input中的值的时候，data中值也会修改，同样的我们修改data里面的值也会影响v-model中的值
  • 循环：v-for也是一个vue的指令，用来处理循环的数据，比如我们上面的列表
  • methods：我们自定义的一些方法都放在这里，然后配合v:on来绑定事件
  • 使用this关键字来获取data中的数据，在app这个作用域里面的话，我们可以通过this来获取到data中的值
  • 通过案例我们可以看出，我们更多的是关注数据的变换，DOM的操作我们不必关注

2. MVVM的介绍

我们以前用Jquery的时候，用是MVC架构去写；M：Model，就是数据层，可以简单理解为后台传过来的数据；V：View，就是视图层，就是我们展现在页面上的内容；C:Controller,处理业务逻辑；以前我们写前端的业务代码的时候很多的时候都是操作DOM来改变页面上展示的内容，这使得代码量很大，也难以维护；
MVVM的出现则更多的关注Model:数据层阶段，看下图：


mvvm.png

我们在用vue的时候更多的是关注Model层，至于如何将数据和View进行交互则由中间的VM来解决；而中间这一块则由Vue来实现；至于里面的实现逻辑则要看源码了。

3.组件的入门

什么是组件？来看看下面的图


image.png

假设简书的主页分为以下三块，这三块就是组件；所以，我们可以认为组件是构建整个页面的一些部分；因此我们在用vue开发的时候，可以将一些页面的内容抽取出来，做成组件的形式，这样如果其他页面要用的话，直接引用就好了，大大减少了我们的代码开发量。下面会通过一个案例展示一下组件的运用；

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta charset="utf-8"></head>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <di id = "app">
        <input type="text" v-model="inputValue"/>
        <button v-on:click="handleBtnClick">提交</button>
        <ol>
           <todo-item
                   v-for = "item in list"
           >

           </todo-item>
        </ol>
    </di>

    <script type="text/javascript">
        //父组件
        var app = new Vue({
            el:'#app',
            data: {
                inputValue:"",
                list : []
            },
            methods:{
                handleBtnClick: function () {
                    this.list.push(this.inputValue);
                    //添加完后记得社为空
                    this.inputValue = "";
                }
            }
        })
        //子组件
        Vue.component("TodoItem",{
            template: "<li>I am Item</li>"
        })

    </script>
</body>
</html>
image.png

我们每次按提交的时候也会可以实现之前我们看到的效果，来分析一下知识点

  • Vue.component:这是全局组件，可以让其他页面也使用，既然有全局的那就有局部的（本页面的），实现我们等会展示
  • 我们在命名的时候一定要遵守命名规范，字母开头大写，然后后面的单词也要大写，这样才能在页面的时候使用<todo-item>这个标签来引入，否则是无法使用的

优化

我们从上面的例子可以看到数据出来是出来，但是并不酷，因为他是静态的，我们想让数据动态生成，怎么实现呢？这就要解决一个问题就是，如何从父组件把值传递到子组件中；Vue给我们提供了一个参数"props"；对于上面的代码我们需要做两步操作：
1.在组件定义中，添加参数，并赋值：

image.png

2.用v-bind指令绑定我们刚刚定义的参数名，然后获得item的值
image.png

效果
image.png

从上面的案例中我们进行分析：

  • props的运用：props可以获取从父组件中传过来的值，然后可以赋值给模板中的变量名；
  • v-bind的应用：v-bind就是将等号右边的值绑定到指定的参数中，如：v-bind:content = “item”就是父组件中的item绑定到了content这个参数中

使用变量的方式创建组件

上面我们说到不是全局组件的组件怎么创建呢，也是非常简单的,下面我们演示一下：
只要将代码改成下面的就好了，效果如上图，图这里就不贴啦~


image.png

优化2

从上面的例子我们可以看到我们已经可以把新增的item添加到子组件了，但是如果我想删除item呢？显示子组件是没法实现的，这个时候我们就要考虑和将子组件的值传回给父组件，让父组件去做操作；下面是实现步骤：
1.给组件绑定一个事件，当我们点击item的时候就可以触发事件；
2.触发点击事件的时候，同事告诉父组件要进行删除操作，并把变量的值传递给父组件中，让父组件去进行操作
具体实现：

1.
image.png

我们在上面定义的组件多定义了一个index值，这个是用来保存下标值的；然后再子组件中添加了一个方法handleDeleteClick同时在Li标签中绑定了这个事件，因此当我们点击item值的时候，就会触发handleDeleteClick这个方法，然后会调用名为声明为"delete"的事件，同时也把index值传过去；

image.png

既然我们新增了参数，我们也一定要在循环的时候获取到index的值
3.
image.png

最后自然的要在父组件里面添加对应的处理方法
4.补充：
我们可以看到我们把v-on直接改成了@，这也是绑定事件~
完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta charset="utf-8">
</head>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<di id="app">
    <input type="text" v-model="inputValue"/>
    <button @click="handleBtnClick">提交</button>
    <ul>
        <todo-item
                v-bind:content = "item"
                v-bind:index = "index"
                v-for="(item,index) in list"
                @delete = "handleDeleteItem"
        >

        </todo-item>
    </ul>
</di>

<script type="text/javascript">
            var TodoItem = {
                props:['content','index'],
                template: "<li @click = 'handleDeleteClick'>{{content}}</li>",
                methods:{
                    //当用户点击的item的时候触发这个事件，这个事件随之调用父组件的方法
                    handleDeleteClick : function () {
                        this.$emit("delete",this.index);
                    }
                }
            }
    //子组件
//    Vue.component("TodoItem", {
//        props:['content'],
//        template: "<li>{{content}}</li>"
//    })

    //父组件
    var app = new Vue({
        el: '#app',
        data: {
            inputValue: "",
            list: []
        },
        components: {
            TodoItem:TodoItem
        },
        methods: {
            handleBtnClick: function () {
                this.list.push(this.inputValue);
                //添加完后记得社为空
                this.inputValue = "";
            },
            handleDeleteItem:function (index) {
                this.list.splice(index,1);
            }
        }
    })


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

3.总结

看了一下入门教程，这里做一个总结：

  • Vue.js是mvvm模式实现的轻量级框架，非常好使，让我们开发的是哦户更多的注重数据的变化，而非频繁的操作DOM；
  • v-bind,v-for,v-on指令的操作，记住一点，指令往往是在元素中使用的；
  • 组件有全局和本页面的组件之分，全局的话用Vue.component实现。本页面的话直接定义就好了；
  • 子组件，父组件之前的数据传递问题：
    父传子的话比较简单，绑定变量同时在props中定义就好了;
    子传父的话，通过触发父组件方法的方式传递
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue.js入门指南
    最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容...
    忘川慕白阅读 5,981评论 7赞 113
  • Vue.js入门学习
    Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue...
    纯情_小火鸡阅读 508评论 1赞 2
  • Vue.js 2.0 Official Guide Note
    这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0赞 29
  • Vue现代化使用方法(二)
    vue概述 在官方文档中，有一句话对Vue的定位说的很明确：Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,276评论 0赞 25
  • 松
    这棵松树，是山上唯一一株，它还年幼，这个冬天，将是它所经历的第一个冬。此时已是深秋，冬天不远了。 ...
    gsjxuer阅读 268评论 0赞 0