Vue前端+快速入门【详解】

���录

1.Vue概述

2. 快速入门

3. Vue指令

4.表格信息案例    

5. 生命周期

1.Vue概述

        1.MVVM思想

        原始HTML+CSS+JavaScript开发存在的问题：操作麻烦，耦合性强

        为了实现html标签与数据的解耦，前端开发中提供了MVVM思想：即Model-View-ViewModel：

• Model: 数据模型，指要展示到页面上的数据。在web开发中通常从服务端获取到数据，再把这些数据展示出来

• View: 视图，用于展示数据的各种html标签

• ViewModel: 视图模型控制中心，负责把Model数据显示到View里，也负责从View里收集数据到Model里。Vue框架就承担了这个角色

          2.Vue框架简介

                  Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架，它实现了MVVM思想         

                  Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

                  框架即是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

  2. 快速入门

          1.开发步骤：

                  1.编写html页面，引入vue框架的js类库

                  2.在html页面里，使用Vue 把"hello vue"到页面上

          

                  Vue-快速入门                        {{message}}            //定义Vue对象    new Vue({        //vue接管id为app的标签区域        el: "#app",         //数据区域，就是MVVM里的Model        data:{            message: "Hello Vue"        },        //方法区域，Vue里用到的所有方法都要写到这里，否则调用不到        methods:{                    }    })

  3. Vue指令

          指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同功能作用。

          

          1.v-bind和v-model： 

      

  v-bind使用示例：

          

              v-bind             {{siteTitle}} 
       {{siteTitle}}                    new Vue({            el: "#app",            data: {                siteUrl: "http://www.baidu.com",                siteTitle: "百度"            },            methods:{            }        });    

  v-model使用示例

              v-model                   帐号： 
          性别：男            女  
              数据区域里值：{{username}} , {{sex}}                    new Vue({            el: "#app",            data: {                username: "tom",                sex: "male"            },            methods:{            }        });    

          2.  v-on

          v-on: 用来给html标签绑定事件。

                  完整写法：v-on:事件名="函数名(实参列表)"

                  简写形式：@事件名="函数名(实参列表)"

          注意事项：

                  v-on语法给标签的事件绑定的函数，必须在Vue的方法区域中

                  v-on语法绑定事件时，事件名不写on。例如：onclick=""在vue里写成v-on:click=""

                  Vue-指令-v-on                                //定义Vue对象    new Vue({        el: "#app", //vue接管区域        data:{                   },        methods: {            handle: function(){                alert("你点我了一下...");            }        }    })

          3.v-if和v-show

                  Vue-指令-v-if与v-show                        年龄经判定,为:        年轻人(35及以下)         35 && age 中年人(35-60)        老年人(60及以上)        
  
          年龄经判定,为:        年轻人(35及以下)         35 && age 中年人(35-60)        = 60">老年人(60及以上)        //定义Vue对象    new Vue({        el: "#app", //vue接管区域        data:{           age: 20        },        methods: {                    }    })

               4.v-for

                  v-for: 从名字我们就能看出，这个指令是用来遍历的。注意：需要循环哪个标签，v-for 指令就写在哪个标签上。

                  完整语法：

                  

                      

                     {{索引变量 + 1}} {{变量名}}

                  

                  简写形式：

                  

                      {{变量名}}

                  

                  Vue-指令-v-for                  {{addr}}         
           {{index + 1}} : {{addr}}        //定义Vue对象    new Vue({        el: "#app", //vue接管区域        data:{           addrs:["北京", "上海", "西安", "成都", "深圳"]        },        methods: {                    }    })

     4.表格信息案例    

          

  步骤：

  • 使用v-for的带索引方式添加到表格的

    标签上

  • 使用{{}}插值表达式展示内容到单元格

  • 使用索引+1来作为编号

  • 使用v-if来判断，改变性别和等级这2列的值

                    Vue-指令-案例                            

    编号	姓名	年龄	性别	成绩	等级
    {{index + 1}}	{{user.name}}	{{user.age}}	男 女	{{user.score}}	= 85">优秀 = 60">及格 不及格

    new Vue({ el: "#app", data: { users: [{ name: "Tom", age: 20, gender: 1, score: 78 },{ name: "Rose", age: 18, gender: 2, score: 86 },{ name: "Jerry", age: 26, gender: 1, score: 90 },{ name: "Tony", age: 30, gender: 1, score: 52 }] }, methods: { }, })

    5. 生命周期

            vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法

    mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

    编写mounted声明周期的钩子函数，与methods同级

        //定义Vue对象    new Vue({        el: "#app", //vue接管区域        data:{                   },        methods: {                    },        mounted () {            alert("vue挂载完成,发送请求到服务端")        }    })