Vue概述、基本语法

最新推荐文章于 2020-10-25 17:51:54 发布

Lee大海

最新推荐文章于 2020-10-25 17:51:54 发布

阅读量251

点赞数

分类专栏： Vue.JS

本文链接：https://blog.csdn.net/Lee_0610/article/details/100080652

版权

Vue.JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.JS

概述

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

官网：https://cn.vuejs.org/

MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为
抽象化，让我们将视图 UI 和业务逻辑分开
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，
也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端
开发更加高效、便捷
在这里插入图片描述

插值表达式

每个绑定都只能包含单个表达式，

常用指令

v-on：监听DOM 事件，

“v-on:” 可以替换为 @

v-on:click 鼠标点击事件

<button v-on:click="fun1()">点击改变</button>

v-on:keydown 键盘键监听事件

<input type="text"v-on:keydown="fun2('good',$event)">

$event：vue自身对象

event.preventDefault();
event.stopPropagation(); 阻止冒泡

v-on:mouseover 鼠标移动事件

<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>

事件修饰符：

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

.stop 相当于event.stopPropagation()，可以直接在方法后.stop

.prevent

.capture

.self

.once

<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>

按键修饰符：

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

全部的按键别名：

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

<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>

v-text & v-html 文本对象

<div v-text="message"></div>
<div v-html="message"></div>

v-bind html 属性绑定

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

<body>
	<div id="app">
		<font size="5" v-bind:color="ys1">传智播客</font>
		<font size="5" :color="ys2">黑马程序员</font>
		<hr>
		<a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>
	</div>
	<script>
		new Vue({
			el:'#app', //表示当前vue对象接管了div区域
			data:{
				ys1:"red",
				ys2:"green",
				id:1
			}
		});
	</script>
</body>

v-model 数据绑定

<input type="text" id="username" v-model="user.username"><br>
<input type="password" id="password" v-model="user.password"><br>

v-for 循环

可以操作数组、对象、对象数组

<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>

v-if与v-show 判断

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

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

<span v-if="flag">传智播客</span>
<span v-show="flag">itcast</span>

Vue声明周期

vue在生命周期中有这些状态，beforeCreate , created , beforeMount , mounted , beforeUpdate , updated , beforeDestroy , destroyed。Vue
在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。

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的绑定，即数据驱动

Vue异步请求

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

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

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

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

引入依赖文件：axios.min.js

get 请求

//请求方式一：通过给定的ID来发送请求
axios.get('/user?ID=12345')
	.then(function(response){	//请求成功，返回数据，服务器响应的数据在"reponse.data"中
		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);
	});

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]])

发送请求案例

user.js

var vue = new Vue({
    el: "#app",
    data: {
        user: {id:"",username:"aaa",password:"",age:"",sex:"",email:""},
        userList: []
    },
    methods: {
        //查询所有
        findAll: function () {
            var _this = this;
            axios.get("/vueDemo/user/findAll.do").then(function (response) {
                _this.userList = response.data;
                console.log(_this.userList);
            }).catch(function (err) {
                console.log(err);
            });
        },
        //通过id查询
        findById: function (userid) {
            var _this = this;
            axios.get("/vueDemo/user/findOne.do", {
                params: {
                    userId: userid
                }
            }).then(function (response) {
              _this.user = response.data;
                $('#myModal').modal("show");
            }).catch(function (err) {
            });
        },
        //更新
        update: function (user) {
            var _this = this;
            axios.post("/vueDemo/user/update.do",_this.user).then(function (response) {
                _this.findAll();
            }).catch(function (err) {
            });
        }
    },
    //第一次初始化加载
    created:function(){
        this.findAll();
    }
});