Ⅶ期VUE的Day1:基本用法

最新推荐文章于 2022-09-05 20:24:43 发布

那是遇知吧

最新推荐文章于 2022-09-05 20:24:43 发布

阅读量450

点赞数

本文链接：https://blog.csdn.net/weixin_41406727/article/details/106843728

版权

一、 Vue.js 简介

1. Vue.js 是什么

是一个构建用户界面的框架
是一个轻量级 MVVM（Model-View-ViewModel）框架，和 angular、react 类似，其实就是所谓的数据双向绑定
数据驱动+组件化的前端开发（核心思想）
通过简单的 API 实现**响应式的数据绑定**和**组合的视图组件**
更容易上手、小巧

2. MVVM框架

1.1定义：

Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。

【模型】指的是后端传递的数据。

【视图】指的是所看到的页面。

【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

它有两个方向：

一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。

二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。

实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

Vue就是基于MVVM模式实现的一套框架

在vue中：

Model:指的是js中的数据，如对象，数组等等。
View:指的是页面视图
viewModel:指的是vue实例化对象

1.2总结：

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

3.vue 和 angular 的区别

3.1 angular

上手较难
指令以 ng-xxx 开头
所有属性和方法都存储在\$scope 中
由 google 维护

3.2 vue

简单、易学、更轻量
指令以 v-xxx 开头
HTML 代码+JSON 数据，再创建一个 vue 实例

共同点：`都不兼容低版本IE`，`对 seo 搜索引擎不友好`

对比：GitHub 上 vue(156k) 的 stars 数量大约是 angular(59.6k) 的两倍多

二、起步

1. 下载核心库 vue.js

npm init --yes

npm install vue --save

版本 v2.6.11 目前最新版本(2020.2.2)

vue2.0和1.0相比，最大的变化就是引入了Virtual DOM（虚拟DOM）,页面更新效率更高，速度更快

2. Hello World（对比 angular）

2.1 angular 实现

let app=angular.module('myApp',[]);
    	app.controller('MyController',['$scope',function($scope){
    		$scope.msg='Hello World';
    	}]);
    html:
    	<html ng-app="myApp">
    		<div ng-controller="MyController">
    			{{msg}}
    		</div>
    	</html>

2.2 vue 实现

new Vue({
    		el:'#itany', //指定关联的选择器，进行挂载
    		data:{ //存储数据
    			msg:'Hello World',
    			name:'tom'
    		}
    	});
    html:
    	<div id="itany">
    		{{msg}}
    	</div>

3. 安装 vue-devtools 插件，便于在 chrome 中调试 vue

直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中（更多工具--扩展程序）或者直接在浏览器中输入 chrome://extensions/打开

//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false

Vue.config.devtools=false;

Vue.config.productionTip=false; //阻止vue启动时生成生产消息

三、常用指令

1. 什么是指令？

用来扩展html标签的功能

angular中常用的指令：

ng-model
ng-repeat
ng-click
ng-show/ng-hide
ng-if

2. vue 中常用的指令

v-model

双向数据绑定，一般用于表单元素

在表单 <input>、<textarea> 及 <select> <checkbox> 元素上创建双向数据绑定。

代码演示：02.html

<div class="itapp">
        {{msg}} {{arr}}  {{users}}
        <input type="text" v-model="name">
        <select v-model="tag">
            <option value="01">01</option>
            <option value="02">02</option>
        </select>
        <!-- <input type="checkbox" value="01" v-model="test" >
        <input type="checkbox" value="02" v-model="test" >
        {{name}} {{test}} -->
 {{tag}}

    </div>
    <script>
        var vm=new Vue({
            el:'.itapp', //指定关联的元素
            data:{ //存储数据
                msg:'Hello World',
                arr:[1,2,3],
                age:21,
                users:{
                    id:12,name:'秋香'
                }, 
                name:'',
                test:'',
                tag:'01'

            }
        });
    </script>

v-for

对数组或对象进行循环操作，使用的是 v-for，不是 v-repeat

注：在 vue1.0 中提供了隐式变量，如$index、$key

在 vue2.0 中去除了隐式变量，已被废除

代码演示代码演示：03.html

	<script>
		window.onload=function(){
			new Vue({
				el:'#itany',
				data:{
					arr:[12,4,5,34,2,11],
					user:{id:9527,name:'唐伯虎',age:25},
					arr2:[12,4,5,34,2,11,12],
					users:[
						{id:9527,name:'唐伯虎',age:25},
						{id:1001,name:'秋香',age:22},
						{id:1002,name:'石榴姐',age:24}
					]
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<ul>
            <!-- 普通循环 -->
            <!-- <li v-for="value in arr">{{value}}</li> -->
            <!-- <li v-for="value in user">{{value}}</li> -->
                <!-- 健值循环 -->
                <!-- key指定唯一性 -->
            <!-- <li v-for="(item,index) in user" :key="index">{{index}} -- {{item}}</li> -->
        
            <li v-for="(item,index) in users" :key="index"> {{index+1}}---{{item.id}} {{item.name}} {{item.age}}</li>       
        </ul>
	</div>
</body>

v-on

用来绑定事件，用法：v-on:事件="函数"

代码演示：04.html

<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{  //存储数据
					arr:[12,34,45,23,5]
				},
				methods:{ //存储方法
					show:function(){
						console.log('show方法');
					},
					add(){
                        
						console.log(this); //this表示当前vue实例
						console.log(this===vm); //true
						this.arr.push(666); //使用this访问当前实例中的成员
						this.show();
					},
					print(e){
						// console.log(e);
						console.log(e.target.innerHTML); //DOM对象
						console.log(this);
					}

				}
			});
		}

	</script>
</head>
<body>
	<div id="itany">
		<!-- <button onclick="show()">点我</button> -->
        <button v-on:click="show">点我</button>
        <!-- 简写 -->
        <button @click="show">点我</button>  

        <button @click="add">数组中添加元素</button>  

        <button @mouseover="show">鼠标经过</button>  
        <button @dblclick="show">双击</button>  
	</div>
</body>

v-show/v-if

用来显示或隐藏元素，v-show 是通过 display 实现，v-if 是每次删除后再重新创建，与 angular 中类似

代码演示：05.html

<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{ 
					flag:true
				},
				methods:{ 
					change(){
						this.flag=!this.flag;
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="itany">
		<!-- <button v-on:click="change">隐藏</button> -->
		<button v-on:click="flag=!flag">隐藏</button>

		<hr>
		<div style="width: 100px;height: 100px; background-color: red" v-if="flag">欢迎来到武汉软谋</div>
	</div>
</body>

四、练习：用户管理

<script src="js/vue.js"></script>
	<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
	<script src="bootstrap/jquery.min.js"></script>
	<script src="bootstrap/bootstrap.min.js"></script>
	<script>
		window.onload=function(){
			let vm=new Vue({
				el:'.container',
				data:{ 
					users:[
						{name:'tom',age:24,email:'tom@itany.com'},
						{name:'jack',age:23,email:'jack@sina.com'}
					],
					user:{},
					nowIndex:-1 //当前要删除项的索引
				},
				methods:{ 
					addUser(){
						this.users.push(this.user);
						this.user={};
					},
					deleteUser(){
						
						if(this.nowIndex==-1){
							//删除所有
							this.users=[];
							// this.users.length=0;
						} else {
							//从指定索引的位置开始删除
							this.users.splice(this.nowIndex,1)
						}
						
					}
				}
			});
		}
	</script>

<div class="container">
		<h2 class="text-center">添加用户</h2>
		<form class="form-horizontal">
			<div class="form-group">
				<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓  名：</label>
				<div class="col-sm-6">
					<input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">
				</div>
			</div>
			<div class="form-group">
				<label for="age" class="control-label col-sm-2 col-sm-offset-2">年  龄：</label>
				<div class="col-sm-6">
					<input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
				</div>
			</div>
			<div class="form-group">
				<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮  箱：</label>
				<div class="col-sm-6">
					<input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
				</div>
			</div>
			<div class="form-group text-center">
				<input type="button" value="添  加" class="btn btn-primary" @click="addUser">
				<input type="reset" value="重  置" class="btn btn-primary">
			</div>
		</form>
		<hr>

		<table class="table table-bordered table-hover">
			<caption class="h3 text-center text-info">用户列表</caption>
			<thead>
				<tr>
					<th class="text-center">序号</th>
					<th class="text-center">姓名</th>
					<th class="text-center">年龄</th>
					<th class="text-center">邮箱</th>
					<th class="text-center">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(user,index) in users" :key="index" class="text-center">
					<td>{{index+1}}</td>
					<td>{{user.name}}</td>
					<td>{{user.age}}</td>
					<td>{{user.email}}</td>
					<td>
						<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</button>
					</td>
				</tr>
				<tr>
					<td colspan="5" class="text-right">
						<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">删除所有</button>
					</td>
				</tr>
			</tbody>
		</table>

		<!-- 模态框，弹出框 -->
		<div class="modal fade" id="del">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
						<h4 class="modal-title" v-show="nowIndex!==-1">确认要删除用户：{{users[nowIndex]?users[nowIndex].name:''}} 吗？</h4>
						<h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗？</h4>
					</div>
					<div class="modal-body text-center">
						<button class="btn btn-primary" data-dismiss="modal">取消</button>
						<button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">确认</button>
					</div>
				</div>
			</div>
		</div>


	</div>

五、事件和属性

1.1 事件简写

v-on:click="" 简写方式 @click=""

1.2 事件对象\$event

包含事件相关信息，如事件源、事件类型、偏移量

target、type、offsetx

代码演示：07.html


		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				methods:{ 
					show(){
						console.log(111);
					},
					print(e){
						var tatget = e.target;
						// console.log(e);
						console.log(tatget.innerHTML); //DOM对象
						// console.log(this);
					}
				}
			});
		}

<body>
	<div id="itany">
		<button v-on:click="show">点我</button>
		<button @click="show">点我</button>
		<hr>

		<button @click="print($event)">Click Me</button>
	</div>
</body>

1.3 事件冒泡

阻止事件冒泡：

原生js方式，依赖于事件对象 stopPropagation
vue方式，不依赖于事件对象

@click.stop

1.4 事件默认行为

阻止默认行为：

原生js方式，依赖于事件对象 preventDefault
vue方式，不依赖于事件对象

@click.prevent

代码演示：08.html

<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				methods:{ 
					show(){
						console.log(111);
						// e.stopPropagation();
					},
					print(){
						console.log(222);
					},
					write(){
						console.log(333);
					},
					study(){
						console.log(444);
						// e.preventDefault();
					}
				}
			});
		}
	</script>

<body>
	<div id="itany">
		<div @click="write">
			<p @click="print">
				<!-- <button @click="show($event)">点我</button> -->
				<button @click.stop="show">点我</button>
			</p>
		</div>
		<hr>

		<!-- <a href="http://www.baidu.com" @click="study($event)">俺是链接</a> -->
		<a href="http://www.baidu.com" @click.prevent="study">俺是链接</a>
	</div>
</body>

1.5 键盘事件

回车：@keydown.13 或@keydown.enter

上：@keydown.38 或@keydown.up

默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名

代码演示：09.html


		/**
		 * 自定义键位别名
		 */
		Vue.config.keyCodes={
			a:65,
			f1:112
		}

		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				methods:{ 
					show(e){
						console.log(e.keyCode);
						if(e.keyCode==13){
							console.log('您按了回车');
						}
					},
					print(){
						console.log('向上');
						// console.log('您按了方向键上');
						console.log('11111');
					}
				}
			});
		}

<body>
	<div id="itany">
		<!-- 键盘事件：@keydown、@keypress、@keyup -->
		<!-- 用户名：<input type="text" @keydown="show($event)"> -->
		
		<!-- 简化按键的判断 -->
		<!-- 用户名：<input type="text" @keydown="show($event)"> -->
		用户名：<input type="text" @keydown.13="print">
		用户名：<input type="text" @keydown.enter="print">
		用户名：<input type="text" @keydown.up="print">
		<!-- 用户名：<input type="text" @keydown.f1="print"> -->
		
		<!-- 事件修饰符 -->
		<button @click.once="print">只触发一次</button>
	</div>
</body>

1.6 事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求

Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop - 调用 event.stopPropagation()。阻止冒泡行为的事件传播
.prevent - 调用 event.preventDefault()。阻止默认行为
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

阻止单击事件继续传播

<a v-on:click.stop="doThis"></a>

提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>

修饰符可以串联

<a v-on:click.stop.prevent="doThat"></a>

添加事件监听器时使用事件捕获模式

即元素自身触发的事件先在此处理，然后才交由内部元素进行处理

<div v-on:click.capture="doThis">...</div>

只当在 event.target 是当前元素自身时触发处理函数

即事件不是从内部元素触发的

<div v-on:click.self="doThat">...</div>

点击事件将只会触发一次

<a v-on:click.once="doThis"></a>

滚动事件的默认行为 (即滚动行为) 将会立即触发

而不会等待 `onScroll` 完成

这其中包含 `event.preventDefault()` 的情况

<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

按键修饰符

2. 属性

2.1 属性绑定和属性的简写

v-bind 用于属性绑定， v-bind:属性=""

属性的简写： v-bind:src="" 简写为 :src=""

代码演示：10.html


		window.onload=function(){
			let vm=new Vue({
				el:'#itany',
				data:{
					url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
					w:'200px',
					h:'100px',
					tag:'122'
				}
			});
		}

<body>
	<div id="itany">
		<!-- <img src="{{url}}"> -->

		<!-- 可以直接访问vue中的数据，不需要使用{{}} -->
		<!-- <img v-bind:src="url" v-bind:tag="tag"> -->

		<img :src="url" :width="w" :height="h">
	</div>
</body>

2.2 class 和 style 属性

 <style>
        .aa{
            color:red;
            font-size: 30px;
        }
        .bb {
            background-color: #ccc;
        }
    </style>
 <div id="itapp">
        <!-- 方式1: 变量的形式 -->
        <p :class="bb">武汉</p>   <!-- 不可以，Vue的属性绑定时不能直接css样式 -->
        
        <!-- 方式2：数组的形式 -->
        <p :class="[bb,dd]">武汉</p> 

        <!-- 方式3：JSON  常用-->
        <p :class="{aa:true,bb:true}">武汉</p> 

        <p :class="{aa:num>2}">武汉</p> 
     
        <p style="color:red;font-size:40px">hello world</p> 
        <!-- v-bind:style -->
        <p :style="[xx,yy]">hello world</p>
   </div>

 new Vue({
           el:'#itapp',
           data:{
                bb:'aa',
                dd:'bb',
                num:1,
                xx:{color:'blue',fontSize:'30px'},
				yy:{backgroundColor:'#ff7300'}
           }
       })

六、模板

1. 简介

Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据模板就是{{}}，用来进行数据绑定，显示在页面中

也称为Mustache语法

2. 数据绑定的方式

双向绑定 v-model
单向绑定

使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
使用v-text、v-html

3. 其他指令

v-once 数据只绑定一次
v-pre 不编译，直接原样显示

<script>
		window.onload=function(){
			let vm=new Vue({
				el:'#itapp',
				data:{
                    msg:'dfdf',
                    msg2:'dfdf <b>sdsdsd</b>',
				},
				created:function(){
					// alert(111);
					
				},
				methods:{
                    //  change(){
                    //      this.msg = '测试'
                    //  }   
						
				},
				mounted(){
                    this.msg = '测试'
				}
			});
		}
	</script>

<style>
		/* 必须配置css样式，否则不生效 */ 
		[v-cloak]{ 
			display:none;
		}
	</style>

<div id="itapp">
        <input type="text" v-model="msg">
        <!-- 用来解决可能会出现闪烁的问题 -->
        <h3>标题：<span v-cloak>{{msg}}</span></h3>
         <h3 v-text='msg'></h3> 
         {{msg}}
         <p v-html="msg2"></p>
         <p v-once>{{msg}}</p>
         <p v-pre>{{msg}}</p> 
	</div>

七、过滤器

1. 简介

用来过滤模型数据，在显示之前进行数据处理和筛选

语法：{{ data | filter1(参数) | filter2(参数)}}

2. 关于内置过滤器

vue1.0中内置许多过滤器，如：

currency、uppercase、lowercase

limitBy

orderBy

filterBy

vue2.0中已经删除了所有内置过滤器，全部被废除

如何解决：

a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等

b.使用自定义过滤器

3. 自定义过滤器

分类：全局过滤器、局部过滤器

使用全局方法Vue.filter(过滤器ID,过滤器函数)

<script>
		/**
		 * 自定义全局过滤器
		 */
		Vue.filter('addZero',function(data){
            console.log(data);
            return data<10?'0'+data:data;
          
        })
        
        // Vue.filter('number',function(data,n){
        //     console.log(data,n);
        //     return data.toFixed(n)
        // })

        // Vue.filter('dateformat',function(data){
        //     var d = new Date(data);
        //     return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
        // })

		window.onload=function(){
			let vm=new Vue({
				el:'#itapp',
				data:{
                    currentTime:Date.now()
                    // 2020-02-08
				},
				filters:{ //局部过滤器
					number:(data,n) => {
						return data.toFixed(n);
					},
					dateformat(data){
						var d = new Date(data);
            			return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
					}
				}
			});
		}
	</script>

<div id="itapp">
		<h3>{{3 | addZero}}</h3>
		
		<!-- 课后作业：自己实现toFiexed()四舍五入的功能 -->
		<h3>{{12.345678 | number(2)}}</h3>
		<!-- <h3>{{12.045 | number(2)}}</h3>  //toFixed天生就有bug ，不稳定-->

		<h3>{{currentTime | dateformat}}</h3>
	
	</div>

那是遇知吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ⅶ期VUE的Day1:基本用法

一、Vue.js简介1.Vue.js是什么是一个构建用户界面的框架是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定数据驱动+组件化的前端开发（核心思想）通过简单的API实现**响应式的数据绑定**和**组合的视图组件** 更容易上手、小巧2. MVVM框架1.1定义：Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【...
复制链接

扫一扫