vue入门及详解及小案例
文章目录
-
- 1. vue的介绍
- 2. MVVM模式
- 3. vue的快速入门-插值表达式
- 4. vue的指令集-on:click
- 5. vue的指令集-on:keydown
- 6. vue的事件修饰符+按键修饰符
-
- 6.1 事件修饰符补充
- 6.2 按键修饰符
- 7. vue的v-text 和 v-html
- 8. vue的v-model双向数据绑定
- 9. vue的v-for循环
- 10. vue的v-if和v-show
- 10. vue的v-bind
- 11. vue的生命周期
- 12. vue的axios
1. vue的介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架,Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,它不仅易于上手，还便于与第三方库或既有项目整合
官网: https://cn.vuejs.org/
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，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷
3. vue的快速入门-插值表达式
<html>
<head>
<meta charset="UTF-8">
<title>vue快速入门title>
<script type="text/javascript" src="js/vue_v2.4.9.js">script>
head>
<body>
<div id="app">
{
{message}}<br />
{
{num.replace(/,/g,"")}}<br />
{
{flag?"ok":"not ok"}}<br />
{
{1+9}}<br />
div>
<script>
new Vue({
// el挂载 ,相当于元素选择器 $('#id')
el: '#app',
// 数据,注意是对象格式
data: {
message: 'hello world!',
num: '123,456,789',
flag:false
},
// 方法
methods: {
change: function() {
}
}
})
script>
body>
html>
4. vue的指令集-on:click
<html>
<head>
<meta charset="UTF-8">
<title>vue快速入门title>
<script type="text/javascript" src="js/vue_v2.4.9.js">script>
head>
<body>
<div id="app">
{
{message}}
<input type="button" v-on:click="textchange();" value="点我"/>
div>
<script>
new Vue({
// el挂载 ,相当于元素选择器 $('#id')
el: '#app',
// 数据
data: {
message: 'hello world!',
},
// 方法
methods: {
textchange: function() {
this.message = '改变了message的值'
}
}
})
script>
body>
html>
5. vue的指令集-on:keydown
<html>
<head>
<meta charset="UTF-8">
<title>v-on:keydowntitle>
<script type="text/javascript" src="js/vue_v2.4.9.js" >script>
head>
<body>
<div id="app">
<input type="text" v-on:keydown="fun1();" />
div>
<script>
new Vue({
//挂载，相当于Jquery的 $('#id') ,选择器
el:"#app",
data:{
//数据变量
message:'hello world!',
},
methods:{
fun1:function(){
var keycode = event.keyCode;
alert(keycode);
// 0-48 9-57 除了数字不能输入
if(!(keycode>=48 &&keycode<=57)){
event.preventDefault();
}
}
}
});
script>
body>
html>
6. vue的事件修饰符+按键修饰符
<html>
<head>
<meta charset="UTF-8">
<title>事件修饰符title>
<script type="text/javascript" src="js/vue_v2.4.9.js" >script>
head>
<body>
<div id="app">
<form v-on:submit.prevent action="http://www.baidu.com" method="post">
<input type="submit" value="提交" />
form>
<input type="text" @keydown.enter="fun3();" />
div>
<script>
new Vue({
//挂载，相当于Jquery的 $('#id') ,选择器
el:"#app",
data:{
//数据变量
message:'hello world!',
},
methods:{
fun3:function(){
alert('这是回车');
}
}
});
script>
body>
html>
6.1 事件修饰符补充
Vue.js通过由点(.)表示的指令后缀来调用修饰符
- .stop
- .prevent
- .capture
- .self
- .once
6.2 按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符,所有的按键别名
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
7. vue的v-text 和 v-html
<html>
<head>
<meta charset="UTF-8">
<title>text-htmltitle>
<script type="text/javascript" src="js/vue_v2.4.9.js" >script>
head>
<body>
<div id="app">
<div v-text="message">div>
<div v-html="message">div>
div>
<script>
new Vue({
//挂载，相当于Jquery的 $('#id') ,选择器
el:"#app",
data:{
//数据变量
message:'hello'
},
methods:{
change:function(){
}
}
});
script>
body>
html>
8. vue的v-model双向数据绑定
<html>
<head>
<meta charset="UTF-8">
<title>双向数据绑定title>
<script type="text/javascript" src="js/vue_v2.4.9.js" >script>
head>
<body>
<div id="app">
用户名： <input type="text" name="username" v-model="username"/>
密码： <input type="text" name="password" v-model="pwd"/>
<input value="提交" type="button" @click="fun1();" />
用户名： <input type="text" name="username" v-model="user.uname"/>
密码： <input type="text" name="password" v-model="user.pwd"/>
<input value="提交" type="button" @click="fun2();" />
div>
<script>
new Vue({
//挂载，相当于Jquery的 $('#id') ,选择器
el:"#app",
data:{
//数据变量
message:'hello world!',
username:"tom",
pwd:123456,
user:{
uname:"jack",pwd:123}
},
methods:{
fun1:function(){
alert(this.username+'---'+this.pwd);
},
fun2:function(){
alert(this.user.uname+'---'+this.user.pwd);
//对象的好处 ,ajax提交时直接提交对象即可
}
}
});
script>
body>
html>
9. vue的v-for循环
<html>
<head>
<meta charset="UTF-8">
<title>fortitle>
<script type="text/javascript" src="js/vue_v2.4.9.js" >script>
head>
<body>
<div id="app">
<ul>
<li v-for="(v,i) in strarray">{
{v+'--'+i}}li>
ul>
<ul>
<li v-for="(p,i) in person">{
{p+'--'+i}}li>
ul>
<table>
<tr v-for="u in users">
<td v-for="f in u">{
{f}}td>
tr>
table>
div>
<script>
new Vue({
//挂载，相当于Jquery的 $('#id') ,选择器
el:"#app",
data:{
strarray:["aa","bb","cc","dd"],
person:{
name:"tom",age:20,sex:"女"},
users:[{
name:"tom",age:20,sex:"女"},{
name:"jerry",age:30,sex:"男"},{
name:"Jack",age:20,sex:"女"}]
},
methods:{
}
});
script>
body>
html>
10. vue的v-if和v-show
v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
<html>
<head>
<meta charset="UTF-8">
<title>if-showtitle>
<script type="text/javascript" src="js/vue_v2.4.9.js" >script>
head>
<body>
<div id="app">
<div v-if="flag">vue的ifdiv>
<div v-show="flag">flagdiv>
div>
<script>
new Vue({
//挂载，相当于Jquery的 $('#id') ,选择器
el:"#app",
data:{
flag:true
},
methods:{
}
});
script>
body>
html>
10. vue的v-bind
插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令
<html>
<head>
<meta charset="UTF-8">
<title>bindtitle>
<script type="text/javascript" src="js/vue_v2.4.9.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="message" />
<font v-bind:color="color1">hello world1font>
<font v-bind:color="color2">hello world2font>
div>
<script>
new Vue({
//挂载，相当于Jquery的 $('#id') ,选择器
el:"#app",
data:{
//数据变量
message:'hello world!',
color1:'red',
color2:'blue'
},
methods:{
change:function(){
}
}
});
script>
body>
html>
11. vue的生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程
vue在生命周期中有这些状态
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会,下面例子用开发者工具就能看到具体过程,或者浏览器按F12
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorldtitle>
<script type="text/javascript" src="js/vue_v2.4.9.js" >script>
head>
<body>
<div id="app">
{
{message}}
{
{message}}
div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello'
},
beforeCreate: function() {
console.log(this);
//showData('创建vue实例前', this);
console.log('创建vue实例前');
console.log('data 数据：' + this.message)
console.log('挂载的对象：')
console.log(this.$el)
//realDom();
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log('------------------')
console.log('------------------')
},
created: function() {
//showData('创建vue实例后', this);
console.log('创建vue实例后');
console.log('data 数据：' + this.message)
console.log('挂载的对象：')
console.log(this.$el)
//realDom();
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log('------------------')
console.log('------------------')
},
beforeMount: function() {
//showData('挂载到dom前', this);
console.log('挂载到dom前');
console.log('data 数据：' + this.message)
console.log('挂载的对象：')
console.log(this.$el)
//realDom();
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log('------------------')
console.log('------------------')
},
mounted: function() {
//showData('挂载到dom后', this);
console.log('挂载到dom后');
console.log('data 数据：' + this.message)
console.log('挂载的对象：')
console.log(this.$el)
//realDom();
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log('------------------')
console.log('------------------')
},
beforeUpdate: function() {
//showData('数据变化更新前', this);
console.log('数据变化更新前');
console.log('data 数据：' + this.test)
console.log('挂载的对象：')
console.log(this.$el)
//realDom();
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log('------------------')
console.log('------------------')
},
updated: function() {
//showData('数据变化更新后', this);
console.log('数据变化更新后');
console.log('data 数据：' + this.test)
console.log('挂载的对象：')
console.log(this.$el)
//realDom();
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log('------------------')
console.log('------------------')
},
beforeDestroy: function() {
vm.test = "3333";
//showData('vue实例销毁前', this);
console.log('vue实例销毁前');
console.log('data 数据：' + this.test)
console.log('挂载的对象：')
console.log(this.$el)
//realDom();
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log('------------------')
console.log('------------------')
},
destroyed: function() {
//showData('vue实例销毁后', this);
console.log('vue实例销毁后');
console.log('data 数据：' + this.test)
console.log('挂载的对象：')
console.log(this.$el)
//realDom();
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log('------------------')
console.log('------------------')
}
});
function realDom() {
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 数据：' + obj.test)
console.log('挂载的对象：')
console.log(obj.$el)
//realDom();
console.log('真实dom结构：' + document.getElementById('app').innerHTML);
console.log('------------------')
console.log('------------------')
}
vm.message="hello world";
vm.$destroy();
script>
body>
html>
12. vue的axios
内容太多建议直接参考菜鸟教程 : https://www.runoob.com/vue2/vuejs-ajax-axios.html