Vue快速上手的第一个项目—— todo-list

前言

在上大学那阵子,jQuery正流行,于是凭借着“一边百度一边敲代码的本领”,怎能把自己想要的效果显示出来,但是jQuery背后疯狂操纵dom的事实,和日后难维护的问题,当时并没有顾及太多(但是当时我就发现了,想要变换个什么功能,在代码里面找起来,是真的费劲)。
等开始实习的时候,实习单位使用的是Angular(刚入职的时候使用的AngularJs 后来使用了Angular4 这两个的关系就像是猫和熊猫的关系,根本不是一回事。)他们把Js代码军团组织的更加完整了,分离出来了MVC(Model,View,Controller)。使用起来给我们提供了很多的方便。但是总感觉他们并不是我的菜,怎么也提不起来对他们的兴趣。
直到后来我接触了Vue,简直就是前端各种框架的一股清流,引入了MVVM(Model,View,View-Model)。全文上下,变量,方法,组件,包裹在实例中,被安排的明明白白。由原来的事件作为驱动力,改为了数据作为驱动力,View的数据变动,通过View-Model修改了Model,同样的,Model的变化,通过View-Model修改了View的显示。View-Model像是一个桥梁一样连接着View和Model。
这是我学Vue的第一个小练习—— todo-list。

正文

学习一门技术,官网永远是最好的老师。
这里是官网教程入口
这里是讲解MVVM结构的入口,廖雪峰老师官方网站

简单例子引入

我们首先由一个简单的例子引入,在这里不使用Vue-Cli,只是通过CDN的方式引入。
先创建一个空的html文件,在其中输入以下代码:


<html>
    <head>
        <!--通过CDN引入vue.js源代码-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <h3>element:root</h3>
        <div id="root">
            <div>
                {{msg}}
            </div>
            <!-- v-html 可以把data中的数据以html形式显示出来-->
            <div v-html="htmlInput">

            </div>
            <!-- v-text直接显示数据, 并不是在意以什么形式显示出来-->
            <div v-text="textInput">

            </div>
            <!-- v-on: (事件绑定),也可以写为@click="clickFunction"可以简写为"@"符号,-->
            <div v-on:click="clickFunction">
                {{clickText}}
            </div>
        </div>
        <hr>
        <h3>element:app-2</h3>
        <div id="app-2">
            <!-- v-bind(属性绑定) 直接可以简写为":"-->
            <span v-bind:title="message">
                鼠标悬停几秒钟查看此处动态绑定的提示信息!
            </span>
            <br>
            <!-- v-bind 用于单向绑定,数据驱动页面的变化,但是页面变化不会同时对应到后台上-->
            <input :value="content">
            <!-- v-model 用于双向绑定-->
            <input v-model="content">
            <div>{{content}}</div>
        </div>
        <hr>
        <h3>element:app-3</h3>
        <div id="app-3">
            first name:<input v-model='firstname'/>
            last name:<input v-model='lastname'/>
            <br>
            full name:<div >{{fullname}}</div>
        </div>
        <script type="text/javascript">
            //创建一个vue实例,这是整个vue的灵魂,这就是传说中的mvvm中的vm——viewmodel
            var root = new Vue({
                el:"#root",
                data:{
                    msg: "harry is worderful",
                    htmlInput: "<b>this is a test text</b>",
                    textInput: "<b>this is a test text</b>",
                    clickText: "you can click it"
                },
                methods:{
                    clickFunction:function(){
                        root.clickText = "congretulation";
                    }
                }
            });

            var app2 = new Vue({
              el: '#app-2',
              data: {
                message: '页面加载于 ' + new Date().toLocaleString(),
                content: "this is a content"
              }
            });

            new Vue({
                el: "#app-3",
                data: {
                    firstname: '',
                    lastname: ''
                },
                computed: {
                    fullname: function(){
                        return this.firstname + ' ' + this.lastname;
                    }
                }
            });
        </script>
    </body>

</html>

这段代码大家可以直接创建一个.html文件然后粘在里面查看一下效果,我也有写上注释。大概的思路是这样的,首先new 一个Vue实例,然后在实例中配置,首先设置“el”属性用来绑定dom的id,然后把需要定义的变量放在“data”属性中,把方法房子“methods”属性中,需要计算的变量,放在“computed”属性中。

初识todo-list

下面使用CDN创建一个todo-list简单的例子。todo-list实现的效果是,在一个文本框中输入数据,点击一个按钮,然后数据会显示在下方的一个list中。

<html>
    <head>
        <!--通过CDN引入vue.js源代码-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <input type="text" v-model='variable'/>
            <br>
            <button @click='clickEvent'>click</button>
            <ul>
                <li v-for='(item, index) of list'>{{item}}</li>
            </ul>
            <hr>
            <h4>使用组件形式</h4>
            <ul>
                <todo-list v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-list>
            </ul>

        </div>

        <script type="text/javascript">

            //这是全局的组建可以被用于这个项目中的任何地方。
            Vue.component('todo-list',{
                props: ['content','index'],
                template: '<li @click="handleClick">{{content}} {{index}}</li>',
                methods:{
                    handleClick: function(){
                        this.$emit('delete',this.index);
                    }
                }
            });


             new Vue({
                 el: "#root",
                 data:{
                     variable: '',
                     list: []
                 },
                 methods:{
                     clickEvent: function(){
                         this.list.push(this.variable);
                         this.variable= '';
                     },
                     handleDelete: function(index){
                         this.list.splice(index,1);
                     }
                 }
                 
             });
        </script>
    </body>

</html>

大家可以先放到自己的文件中,查看一下效果。
我们可以很容易的观察到,这个例子,和刚刚哪个简单例子的区别。
在这个例子中为了说明组件的概念,将ul中的li单独抽了出来作为了一个组件。
主要的还是多了以下这段代码:

//html代码
<ul>
   <todo-list v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-list>
</ul>
//js代码
Vue.component('todo-list',{
                props: ['content','index'],
                template: '<li @click="handleClick">{{content}} {{index}}</li>',
                methods:{
                    handleClick: function(){
                        this.$emit('delete',this.index);
                    }
                }
            });

刚开始看到这块的代码,我整个人也是挺蒙的,下面我们来分析分析。
Vue.component(),这个方法用来创建一个组件,这是创建了一个全局的组件,就是在整个应用中的所有地方都可以使用这个组件,还有一种方法就是使用局部组件,大概的使用方法是这样的:
首先定义一个Json,里面还是放我刚刚说过的那些实例中的属性。

var todoList = {
    template: '<li>item</li>';
};

然后我们在外层实例中,使用"component"属性。
里面写入:

component: {
    'todo-list':todoList
}

todo-list为dom标签的名字,而他的value就是咱们刚刚定义的那个属性值。
回到刚刚说的定义的全局组件,component方法的第一个参数是使用这个组件的名称,第二个参数就像是我们Vue实例一样,里面有相应的参数设置。

  • props: 如果在子组件中,我们需要父组件传递进来的参数,首先需要在html的标签上绑定需要传进去的参数,在这里一个是content,一个是index,然后需要在这个属性注册以下。
  • template: 定义的自组件的模版。
  • methods: 自组件需要用到的方法。
    刚刚说到了父传子,那子传父我们应该怎么办呢?

当一个事件在自组件被触发的时候,我们需要在这个事件中加入

this.$emit('delete',this.index);

向外部发送一个名字叫做delete的事件(这个事件名称可以自己随意起),然后在后面的参数中加上想要传递的参数,最后在外部组件的当前元素中监听刚刚发送的那个事件

@delete="handleDelete

再使用handleDelete方法进行具体处理就行。

Vue-cli 创建todo-list

下面咱们使用Vue-cli,进行一次todo-list的练习。
首先要确保自己的电脑上有node.js
没有的话可以自行下载一下,node js 官网
安装好了之后,通过 node -v查看一下是否安装成功了。
接下来我们就可以安装vue-cli了
1.npm install --global vue-cli
2.vue init webpack projectName
在这步过程中cli会对这个项目的一些设置进行询问,根据自己的需要填写就行了。
Vue快速上手的第一个项目—— todo-list
3.npm run dev,启动后输入localhost:8080就有以下效果。
Vue快速上手的第一个项目—— todo-list
我是使用atom作为编辑器,打开工程后,进入src文件夹将main.js修改成下面这样:

  // The Vue build version to load with the import command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  import Vue from 'vue'
  import ToDoList from './ToDoList'

  Vue.config.productionTip = false

  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    components: { ToDoList },
    template: '<ToDoList/>'
  })

然后添加一个ToDoList.vue文件

  <template>
    <div>
      <input v-model="inputValue"/>
      <button @click="clickEvent">提交</button>
      <ul>
        <listitem v-for="(item,index) of list" :content="item" :index="index" @delete="deleteEvent"></listitem>
      </ul>
    </div>
  </template>

  <script>
  import listitem from './components/listitem'

  export default {
    name: 'ToDoList',
    components: {
      listitem
    },
    data () {
      return {
        inputValue : '',
        list:[]
      }
    },
    methods:{
      clickEvent:function(){
        this.list.push(this.inputValue);
        this.inputValue = '';
      },
      deleteEvent:function(index){
        this.list.splice(this.index,1);
      }
    }
  }
  </script>

  <style>

  </style>

再添加一个listitem.vue文件

  <template>
       <li @click="clickEvent">{{content}}</li>
  </template>

  <script>
  export default {
    name: 'listitem',
    props:['content','index'],
    methods:{
        clickEvent () {
            this.$emit('delete',this.index);
        }
    }
  }
  </script>

  <style >

  </style>

可以看到为了彻底的接触耦合,vue文件把代码分为了三块分别为 template(html代码) ,script(js代码),style(以及css代码的形式)
还是启动刚刚的localhost:8080,就可以看到效果了。
Tips:值得注意的是,我们现在要想使用data这个属性,就不能使用key-value的形式了,而是需要写成函数的形式,然后把数据作为返回值return出去:

data () {
    return {
      inputValue : '',
      list:[]
    }
  }

后记

这是我vue的第一步,在这里做一个总结,之后的不断学习,我也会不断发文章进行更新的。这个视频我是通过慕课网的视频进行相关学习的,视频的地址为学习地址,在这里谢谢delllee的分享。

上一篇:SVN windows平台服务端架设


下一篇:负载均衡及服务器集群(lvs)