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,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷

vue入门及详解及小案例_第1张图片

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

你可能感兴趣的:(前端技术,vue,js)