Vue --入门

1.VueJS 概述与快速入门


1.1 VueJS介绍


Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑

定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
官网:https://cn.vuejs.org/

1.2 MVVM模式


MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开

MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model)

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷

在这里插入图片描述

1.3 VueJS 快速入门


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>快速入门</title>
  <script src="js/vuejs-2.5.16.js"/>
 </head>
 <body>
  <div id="app">{{message}}</div>
  <script>
   new Vue({
    el:'#app', //表示当前vue对象接管了div区域
    data:{
     message:'hello world' //注意不要写分号结尾
    }
   });
  </script>
 </body>
</html>

1.4 插值表达式


数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,Mustache 标签将会被替代为对应数据对象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新。

Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

2.VueJS 常用系统指令


2.1 v-on


可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码

2.1.1 v-on:click

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>事件处理 v-on示例1</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
  <div id="app">
    {{message}}
    <button v-on:click="fun1('good')">点击改变</button>
  </div>
  <script>
    new Vue({
      el:'#app', //表示当前vue对象接管了div区域
      data:{
        message:'hello world' //注意不要写分号结尾
      },
      methods:{
        fun1:function(msg){
          this.message=msg;
        }
      }
    });
  </script>
</body>
</html>

2.1.2 v-on:keydown

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>事件处理 v-on示例2</title>
  <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
  <div id="app">
    <input type="text"v-on:keydown="fun2('good',$event)">
  </div>
  <script>
  new Vue({
    el:'#app', //表示当前vue对象接管了div区域
    methods:{
      fun2:function(msg,event){
        if(!((event.keyCode>=48&&event.keyCode<=57)||event.keyCode==8||event.keyCode==46)){
          event.preventDefault();
        }
      }
    }
  });
  </script>
</body>
</html>

2.1.3 v-on:mouseover

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>事件处理 v-on示例3</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <div v-on:mouseover="fun1" id="div">
            <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
        </div>
    </div>
    <script>
    new Vue({
        el:'#app', //表示当前vue对象接管了div区域
        methods:{
            fun1:function(){
                alert("div");
            },
            fun2:function(event){
                alert("textarea");
                event.stopPropagation();//阻止冒泡
            }
        }
    });
    </script>
</body>
</html>

2.1.4 事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或
event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-on 事件修饰符</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <form @submit.prevent action="http://www.itcast.cn" method="get">
            <input type="submit" value="提交"/>
        </form>
        <div @click="fun1">
            <a @click.stop href="http://www.itcast.cn">itcast</a>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
                methods:{
                    fun1:function(){
                        alert("hello itcast");
                    }
                }
            });
    </script>
</body>
</html>

2.1.5 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名:

  • .enter
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-on 按钮修饰符</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-on:keyup.enter="fun1">
    </div>
    <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
            methods:{
                fun1:function(){
                    alert("你按了回车");
                }
            }
        });
    </script>
</body>
</html>
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

v-on简写方式

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

2.2 v-text与v-html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-html与v-text</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <div v-text="message"></div>
        <div v-html="message"></div>
    </div>
    <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
            data:{
                message:"<h1>xxx</h1>"
            }
        });
    </script>
</body>
</html>

2.3 v-bind


插值语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-bind</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <font size="5" v-bind:color="ys1">sss</font>
        <font size="5" :color="ys2">xxx</font>
        <hr>
        <a v-bind={href:"http://www.baidu.com/"+id}>itcast</a>
    </div>
    <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
            data:{
                ys1:"red",
                ys2:"green",
                id:1
            }
        });
    </script>
</body>
</html>

v-bind简写方式

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

2.4 v-model


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-model</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        姓名:<input type="text" id="username" v-model="user.username"><br>
        密码:<input type="password" id="password" v-model="user.password"><br>
        <input type="button" @click="fun" value="获取">
    </div>
    <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
            data:{
                user:{username:"",password:""}
            },
            methods:{
                fun:function(){
                    alert(this.user.username+" "+this.user.password);
                    this.user.username="tom";
                    this.user.password="11111111";
                }
            }
        });
    </script>
</body>
</html>

2.5 v-for


操作array

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-model</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list">{{item+" "+index}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
            data:{
                list:[1,2,3,4,5,6]
            }
        });
    </script>
</body>
</html>

操作对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-for示例1</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(value,key) in product">{{key}}--{{value}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
            data:{
                product:{id:1,pname:"电视机",price:6000}
            }
        });
    </script>
</body>
</html>

操作对象数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-for示例1</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <table border="1">
            <tr>
                <td>序号</td>
                <td>名称</td>
                <td>价格</td>
            </tr>
            <tr v-for="p in products">
                <td>
                    {{p.id}}
                </td>
                <td>
                    {{p.pname}}
                </td>
                <td>
                    {{p.price}}
                </td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
            data:{
                products:[{id:1,pname:"电视机",price:6000},{id:2,pname:"电冰箱",price:8000},
{id:3,pname:"电风扇",price:600}]
            }
        });
    </script>
</body>
</html>

2.6 v-if与v-show


v-if是根据表达式的值来决定是否渲染元素

v-show是根据表达式的值来切换元素的display css属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>v-if与v-show</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <span v-if="flag">传智播客</span>
        <span v-show="flag">itcast</span>
        <button @click="toggle">切换</button>
    </div>
    <script>
        new Vue({
            el:'#app', //表示当前vue对象接管了div区域
            data:{
                flag:false
            },
            methods:{
                toggle:function(){
                    this.flag=!this.flag;
                }
            }
        });
    </script>
</body>
</html>

3.VueJS生命周期


每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

在这里插入图片描述
vue在生命周期中有这些状态,beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue在实例化的过程中,会调用这些生命周期的钩子,给我们提供了执行自定义逻辑的机会。那么,在这些vue钩子中,vue实例到底执行了那些操作,我们先看下面执行的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>生命周期</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: 'hello world'
            },
            beforeCreate: function() {
                console.log(this);
                showData('创建vue实例前', this);
            },
            created: function() {
                showData('创建vue实例后', this);
            },
            beforeMount: function() {
                showData('挂载到dom前', this);
            },
            mounted: function() {
                showData('挂载到dom后', this);
            },
            beforeUpdate: function() {
                showData('数据变化更新前', this);
            },
            updated: function() {
                showData('数据变化更新后', this);
            },
            beforeDestroy: function() {
                vm.test = "3333";
                showData('vue实例销毁前', this);
            },
            destroyed: function() {
                showData('vue实例销毁后', this);
            }
        });
        function realDom() {
            console.log('真实dom结构:' + document.getElementById('app').innerHTML);
        }
        function showData(process, obj) {
            console.log(process);
            console.log('data 数据:' + obj.message)
            console.log('挂载的对象:')
            console.log(obj.$el)
            realDom();
            console.log('------------------')
            console.log('------------------')
        }
        vm.message="good...";
        vm.$destroy();
    </script>
</body>
</html>

vue对象初始化过程中,会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容

  • beforeCreate :数据还没有监听,没有绑定到vue对象实例,同时也没有挂载对象
  • created :数据已经绑定到了对象实例,但是还没有挂载对象
  • beforeMount: 模板已经编译好了,根据数据和模板已经生成了对应的元素对象,将数据对象关联到了对象的el属性,el属性是一个HTMLElement对象,也就是这个阶段,vue实例通过原生的createElement等方法来创建这个html片段,准备注入到我们vue实例指明的el属性所对应的挂载点
  • mounted:将el的内容挂载到了el,相当于我们在jquery执行了(el).html(el),生成页面上真正的dom,上面我们就会发现dom的元素和我们el的元素是一致的。在此之后,我们能够用方法来获取到el元素下的dom对象,并进 行各种操作当我们的data发生改变时,会调用beforeUpdate和updated方
  • beforeUpdate :数据更新到dom之前,我们可以看到$el对象已经修改,但是我们页面上dom的数据还没有发生改变
  • updated: dom结构会通过虚拟dom的原则,找到需要更新页面dom结构的最小路径,将改变更新到
    dom上面,完成更新
  • beforeDestroy,destroed :实例的销毁,vue实例还是存在的,只是解绑了事件的监听还有watcher对象数据与view的绑定,即数据驱动

4.VueJS ajax


4.1 vue-resource


vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,在这里大家了解一下vue-resource就可以。

vue-resource的github: https://github.com/pagekit/vue-resource

4.2 axios


Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

axios的github:https://github.com/axios/axios

4.2.1 引入axios

首先就是引入axios,如果你使用es6,只需要安装axios模块之后

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

当然也可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4.2.2 get请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
    .then(function(response){
        console.log(response);
    })
    .catch(function(err){
        console.log(err);
    });
//以上请求也可以通过这种方式来发送
axios.get('/user',{
    params:{
        ID:12345
    }
})
.then(function(response){
    console.log(response);
})
.catch(function(err){
    console.log(err);
});

4.2.3 post请求

axios.post('/user',{
    firstName:'Fred',
    lastName:'Flintstone'
})
.then(function(res){
    console.log(res);
})
.catch(function(err){
    console.log(err);
});

为方便起见,为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])

axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

发布了35 篇原创文章 · 获赞 4 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览