VueJS 概述与快速入门

最新推荐文章于 2024-04-20 09:09:43 发布

一只机智的猪

最新推荐文章于 2024-04-20 09:09:43 发布

阅读量673

点赞数

vue 调试插件及jar

链接：https://pan.baidu.com/s/1wh_ibqxD82w2jvg29N8RZg
提取码：5gqo

VueJS介绍

1.1

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合

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 快速入门

1.3.1创建Module

1.3.2 然后修改名字-->Next-->完成;完成后里面是空的

1.3.3 在项目下创建js文件夹,将vuejs.js文件放入js文件夹,这个是工具

1.3.4 创建mode.html(下面就是,其也是快速入门案例)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告
-->
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app">
    {{info}}
</div>
<script>

    new Vue({
       el:"#app",               //表示当前Vue对象管理div区域
       data:{
           info:"Vue_HelloWorld"
       }
    });
</script>
</body>
</html>

Vue调试神器vue-devtools

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择解压好的vue-devtools文件夹。无vpn的开头有提供插件下载，下载好后托到Chrome 扩展就行

如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。

到此添加完成，效果图如下：

打开vue项目,在控制台选择vue 点击vue，查看数据：

1.4 插值表达式

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

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

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

例如：

<body>

<div id="app">
    {{number+1}}
    <hr>
    {{flag?"ok":"noOk"}}
</div>
<script>
    new Vue({
       el:"#app",               //表示当前Vue对象管理div区域
       data:{
           info:"Vue_HelloWorld",
           number:1,
           flag:true
       }
    });
</script>
</body>

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

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

2. VueJS 常用系统指令

v-on，V-text/V-html,v-bind,V-model,v-for,v-if/v-show

2.1 v-on

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

2.1.1 v-on:click

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app" v-on:click="fun1('vue的点击事件触发啦！')" style="width: 200px;height: 200px;border:1px solid red;">
    {{info}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            info:"我是div"
        },
        methods:{
            fun1:function (msg) {
                this.info=msg;
            }
        }
    });
</script>

</body>
</html>

2.1.2 v-on:keydown

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<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($event)">
</div>
<script>
    new Vue({
        el: '#app',
        methods: {
            fun2: function (e) {
                //只能输入数字
                if(!(e.keyCode>=48 && e.keyCode<=57)){
                    e.preventDefault();         //阻止事件默认行为
                }
            }
        }
    });
</script>
</body>
</html>

$event-事件对象

使用不带圆括号的形式，event 对象将被自动当做实参传入:v-on:keydown="fun2"

使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象:v-on:keydown="fun2($event)"

preventDefault()-阻止默认事件

2.1.3 v-on:mouseover

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<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" style="background:red;">
        <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
    </div>
</div>
<script>
    new Vue({
        el : '#app', 
        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：阻止事件默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app">
    <!--阻止默认事件-->
    <form @submit.prevent action="http://www.baidu.com">
        <input type="submit">
    </form>
    <hr>
    <!--阻止事件冒泡-->
    <div @click="fun1">
        <a @click.stop href="https://www.jd.com">京东</a>
    </div>
</div>
<script>
    new Vue({
        el:"#app",
        methods:{
            fun1:function () {
                alert("div！");
            }
        }
    })
</script>
</body>
</html>

v-on简写方式

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

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

2.1.5 按键修饰符

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

全部的按键别名：

.enter

.tab

.delete (捕获 "删除" 和 "退格" 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<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() {
                location.href="https://www.baidu.com";
            }
        }
    });
</script>
</body>
</html>

2.2 v-text与v-html

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

2.3 v-bind

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

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <!--错误写法-->
<!--    <font color="{{color1}}">我是font1</font>-->
    <font v-bind:color="color1">我是font</font>
    <hr>
    <font v-bind:color="color2">我是font</font>
    <hr>
    <font v-bind:color="color3">我是font</font>
    <hr>
    <!-- v-bind简写方式 -->
    <font :color="color3">我是font</font>
    <hr>
    <a v-bind:href="url">百度一下</a>
    <!--简写-->
    <a :href="url">百度一下</a>
    <!--插入值写法-->
    <a v-bind={href:"https://www.baidu.com?id="+id} >百度一下</a>
</div>
<script>

    new Vue({

        el: "#app",
        data: {
            color1:"red",
            color2:"green",
            color3:"blue",
            id:10,
            url:"https://www.baidu.com"
        }

    });

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

2.4 v-model

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    username: <input type="text" v-model="user.username">
    <hr>
    address: <input type="text" v-model="user.address">
    <hr>
    <button @click="fun1">弹出Vue中的username</button>
    <button @click="fun2">弹出Vue中的address</button>
</div>
<script>

    new Vue({
        el: "#app",
        data:{
            user:{
                username:'张三',
                address:'广州'
            }

        },
        methods:{
            fun1:function () {
                alert(this.user.username);
            },
            fun2:function () {
                alert(this.user.address);
            }
        }
    });

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

2.5 v-for

2.5.1 操作array

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <!--
        item:每次遍历到的值
        index:遍历的索引 从0开始
    -->
    <ul>
        <li v-for="(item,index) in list">{{item+" "+index}}</li>
    </ul>
</div>
<script>

    new Vue({
        el: "#app",
        data:{
            list:['南昌','赣州','抚州','上饶']
        }
    });
</script>
</body>
</html>

2.5.2 操作对象

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">

    <ul>
        <li v-for="(val,key) in user">{{key+"-"+val}}</li>
    </ul>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            user:{
                username:'zhangsan',
                password:'123',
                address:'赣州'
            }
        }
    });
</script>
</body>

2.5.3 操作对象数组

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<table border="1" align="center" id="app" width="300">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
    </tr>
    <tr v-for="user in userList">
        <td v-for="(val,key) in user">{{val}}</td>
    </tr>
</table>

<script>

    new Vue({
        el: "#app",
        data:{
            userList:[
                {
                    username:'张三',
                    age:20,
                    address:'南昌'
                },
                {
                    username:'李四',
                    age:22,
                    address:'赣州'
                },
                {
                    username:'王五',
                    age:25,
                    address:'九江'
                }
            ]
        }

    });
</script>
</body>
</html>

2.5.3 操作对象数组

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<table border="1" align="center" id="app" width="300">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
    </tr>
    <tr v-for="user in userList">
        <td v-for="(val,key) in user">{{val}}</td>
    </tr>
</table>

<script>

    new Vue({
        el: "#app",
        data:{
            userList:[
                {
                    username:'张三',
                    age:20,
                    address:'南昌'
                },
                {
                    username:'李四',
                    age:22,
                    address:'赣州'
                },
                {
                    username:'王五',
                    age:25,
                    address:'九江'
                }
            ]
        }

    });
</script>
</body>
</html>

2.6 v-if与v-show

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

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

DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>title</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app">
    <span v-if="flag">刀塔传奇</span>
    <hr>
    <span v-show="flag">dTCQ</span>
    <hr>
    <button @click="fun1">true</button>
    <button @click="fun2">false</button>

</div>

<script>

    new Vue({
        el: "#app",
        data: {
            flag: false
        },
        methods:{
            fun1:function () {
                this.flag=true;
            },
            fun2:function () {
                this.flag=false;
            }
        }

    });
</script>
</body>
</html>

3.VueJS生命周期（了解）

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

vue在生命周期中有这些状态：

beforeCreate:创建VUE对象之前执行，此时data中的数据还未初始化，el还未关联到对应的id
created:创建VUE对象之后执行,此时data中的数据已经初始化，但el还未关联到对应的id
beforeMount:对象挂载之前执行，此时el已经关联到对应对象,但{{}}表达式还未加载
mounted:对象挂载之后执行,此时{{}}表达已经加载，执行完mounted之后开始正常执行js代码
beforeUpdate:data数据更新前执行，此时data中的数据已经更新，但是{{}}表达式中引用的还没有更新
updated:数据更新后执行,{{}}表达式中引用也更新
beforeDestory:vue对象销毁前执行
destroyed:vue对象销毁后执行

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 v = 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 showData(process, obj) {
        console.log(process);
        console.log('data 数据：' + obj.message);
        console.log('挂载的对象：');
        console.log(obj.$el);
        console.log('真实dom结构：' + document.getElementById('app').innerHTML);
        console.log('------------------');
    }
    v.message = "update Data...";
    v.$destroy();
</script>
</body>
</html>

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,如果你使用es6，只需要安装axios模块即可

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

当然也可以用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]])

一只机智的猪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VueJS 概述与快速入门

vue 调试插件及jar链接：https://pan.baidu.com/s/1wh_ibqxD82w2jvg29N8RZg提取码：5gqoVueJS介绍1.1Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合MVVM是Model-V...
复制链接

扫一扫