_vue {{ }}">
devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue基本使用方法（详细版）_vue {{ }}

作者：我家小花儿 | 2024-02-14 23:25:46

赞

踩

vue {{ }}

声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！

基本框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--vue挂载点-->
    <div id="app">
        <!--{{}}为插值表达式，是声明式渲染的语法，将vue对象的data中的数据动态渲染到此处-->
        {{message}}
    </div>
</body>
</html>
<script src="vue.js"></script>
<script src="one.js"></script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
//one.js
var app = new Vue({	//创建vue对象
    el: '#app',		//指定一个标签作为vue的挂载点（作用范围），使用css选择器选择
    data: {			//vue中使用的数据
        message: 'Hello Vue!!!!'
    }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

el：挂载点

作用：指定vue对象的作用范围为某一标签及其内部的后代标签

  • 可以将vue挂载到除html和body外的任意双标签，建议挂载到div上
  • 允许使用任意CSS选择器，但建议只是用id选择器

data：数据对象

作用：存储vue对象使用的数据，作为声明式渲染的数据源

其中的数据可以是任意JavaScript数据类型，例如对象、数组等

var app = new Vue({
    el:'#app',
    data:{
    	message:"hello world",
    	list:[1,2,3,4,5],
        school:{
            name:"齐鲁工业大学"
            address:"长清区"
        }
	}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 在vue挂载点内使用{{list[2]}}、{{school.name}}来使用数据
  • 可以在js代码中使用vue对象名.属性名的方式访问data中的数据，如app.message，也可在methods中使用this.message访问数据

基本语法

{{}}插值表达式

{{}}插值表达式不仅可以将data数据直接插入到html中，还有以下用法：

<div id="app">
    {{num + 3}}				<!--数字计算-->
    {{message + "abc"}}		 <!--字符串拼接-->
    {{sayhi()}}				<!--方法调用，输出方法返回值-->
    {{message.split(' ').reverse().join(' ')}}		<!--执行JavaScript代码-->
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
var app = new Vue({
    el: '#app',
    data:{
        num:1,
        message:"hello world"
    },
    methods:{
        sayhi:function(){
            return "hello";
        }
    }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

v-text指令

作用：设置标签的文本值

<!--将message中的数据写入div-->
<div v-text="message"></div>	message为vue对象的data数据

  • 1
  • 2

如果只需要设置部分文本值，应当使用{{}}插值表达式，例如<p>123{{message}}</p>，123不会被覆盖掉

v-text 和 {{}} 都支持字符串拼接，例如：

<div v-text="message+'123'"></div>
<div>{{message+"123"}}</div>

  • 1
  • 2
  • 二者作用相同

v-html指令

设置标签的innerHTML，用法与v-text相同，但是会将插入的内容解析为html代码

v-on指令

为元素绑定事件

<div id="app">
    <div v-on:事件名="方法"></div>
    <div @事件名="方法"></div>	<!--简写形式-->
    
    <div @事件名="JavaScript代码"></div>		<!--事件触发时执行js代码-->
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
var app = new Vue({
    el: '#app',
    methods:{
        方法名:function(){
            //方法体
    	   //this.message访问data中的message
        }
    }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

事件名与JavaScript事件名相同，写法上省略开头的on

通过事件实现数据更改
<div id="app">
	<div v-on:click="change">{{message}}</div>		为需要修改数据的标签绑定事件
</div>

  • 1
  • 2
  • 3
var app = new Vue({
    el: '#app',
    data:{
        message:"hello world"
    }
    methods:{
        change:function(){
    		this.message="hello vue"	//使用this可直接访问data中的数据，对其做修改
        }
    }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
常见事件
窗口事件
  • load 页面或图片加载完成时该事件将被触发
  • unload 用户离开页面时该事件将被触发。（alert()函数不支持）
表单元素事件

在表单元素中才有效

  • change 框内容改变时
  • submit 点击提交按钮时（默认动作，只在form表单中有效）
  • reset 表单被重置后 （与submit一样）
  • select 文本被选择时
  • blur 元素失去焦点时
  • focus 当元素获取焦点时
键盘&鼠标事件
  • keydown 按下键盘按键时
  • keypress 按下或按住键盘按键时
  • keyup 放开键盘按键时
  • click 鼠标点击一个对象时
  • dblclick 鼠标双击一个对象时
  • mousedown 鼠标被按下时
  • mousemove 鼠标被移动时
  • mouseout 鼠标离开元素时
  • mouseover 鼠标经过元素时
  • mouseup 释放鼠标按键时
其他
  • resize 当窗口或框架被重新定义尺寸时
  • abort 图片下载被打断时
  • error 当加载文档或图片时发生错误时

v-on补充

传递自定义参数，事件修饰符

<div id="app">
    <input type="button" @click="dolt(p1,p2)">		传入参数
    <input type="text" @keyup.enter="sayHi">		.enter为事件修饰符，keyup.enter为回车键放开事件
</div>

  • 1
  • 2
  • 3
  • 4
var app = new Vue({
    el: '#app',
    methods:{
        dolt:function(p1,p2){...},
        sayHi:function(){...}
    }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
常用事件修饰符
  • .stop：调用 event.stopPropagation()
  • .prevent：调用 event.preventDefault()
  • .capture：添加事件侦听器时使用 capture 模式
  • .self：只当事件是从侦听器绑定的元素本身触发时才触发回调
  • .{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调
  • .native：监听组件根元素的原生事件
  • .once：只触发一次回调
  • .left：只当点击鼠标左键时触发
  • .right：只当点击鼠标右键时触发
  • .middle：只当点击鼠标中键时触
  • .passive：以 { passive: true } 模式添加侦听器
常用按键修饰符
  • .enter：enter键
  • .tab：tab键
  • .delete (捕获“删除”和“退格”按键)：删除键
  • .esc：取消键
  • .space ：空格键
  • .up：上
  • .down：下
  • .left：左
  • .right：右

v-show指令

根据表达式的真假，切换元素的显示和隐藏（修改标签的display属性）

  • v-show为true：显示标签
  • v-show为false：隐藏标签
  • v-show的值无论写什么都会被解析为布尔型
<div id="app">
	<div v-show="true"></div>		为v-show指定布尔值
    <div v-show="isShow"></div>		 为v-show指定data中的变量
    <div v-show="age>=18"></div>	  为v-show指定条件表达式
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
var app = new Vue({
    el:"#app"
    data:{
    	isShow:true
    	age:16
	}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

v-if指令

根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

用法与v-show相同

与v-show的区别：

  • v-show修改标签的display属性实现隐藏/显示
  • v-if直接将标签从dom树中移除or添加，从而实现隐藏/显示，对性能消耗比较大
<div v-if="message==='A'">
    str = {{message}}
</div>
<div v-else-if="message==='B'">
    str = {{message}}
</div>
<div v-else-if="message==='C'">
    str = {{message}}
</div>
<div v-else>
    str = null
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

v-bind指令

设置元素的属性

<div id="app">
    <img v-bind:src="imgSrc"/>		<!--imgSrc为data中的数据-->
    <img v-bind:src="imgSrc+'/涩图.jpg'"/>	<!--支持字符串拼接-->
    
    <img :src="imgSrc"/>	 <!--简略写法，用:替代v-bind:-->
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
var app = new Vue({
    el:"#app"
    data:{
    	imgSrc:"图片地址",
    	isActive:true
	}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
v-bind绑定class属性

在使用v-bind绑定class属性时，Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<div id="app">
    <!--若isActive为真，则class=active-->
    <img v-bind:class="{active: isActive}"/>
    
    <!--传入更多字段来动态切换多个class，active和'active'都对应.active选择器-->
    <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
    
    <!--传入一个对象，作用同上，classObject={active:isActive,'text-danger':hasError}-->
    <div v-bind:class="classObject"></div>
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
var app = new Vue({
    el:"#app"
    data:{
    	isActive: true,
  		hasError: false
	}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

可以绑定一个返回对象的计算属性，这是一个常用且强大的模式：

<div v-bind:class="classObject"></div>

  • 1
var app = new Vue({
    el:"#app",
    data: {
      isActive: true,
      error: null
    },
    computed: {
      classObject: function () {
        return {	//利用多属性条件组合实现复杂的class属性变换
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>

  • 1
var app = new Vue({
    el:"#app",
    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
v-bind绑定style属性

v-bind:style 的对象语法非常像 CSS，但其实是一个 JavaScript 对象

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>	<!--css语法-->
<div v-bind:style="styleObject"></div>		<!--直接绑定到一个样式对象，样式对象也是css语法-->

  • 1
  • 2
var app = new Vue({
    el:"#app",
    data: {
      activeColor: 'red',
      fontSize: 30,
      styleObject: {
        color: 'red',
        fontSize: '13px'
  	  }
    }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<!--baseStyles和overridingStyles都是样式对象，css语法-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

  • 1
  • 2

v-for指令

根据数据动态生成列表结构，数据的增删改都会实时反映在生成的列表中

<div id="app">
    <ul>
        <li v-for="(item,index) in arr">	使用item遍历数组arr，index为索引值，arr为data中的数据
            {{index}}:{{item}}
        </li>
        <li v-for="(item,index) in objArr">		使用item遍历对象数组objArr，使用item.属性名，访问数据
            {{item.name}}
        </li>
        <li v-for="(item,index) in arrObject" key="item.id">	vue-cli中v-for必须配合v-bind:key使用
            {{item.value}}
        </li>
    </ul>
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
var app = new Vue({
    el:"#app"
    data:{
    	arr:[a,b,c,d,e],	//普通数组
    	objArr:[			//对象数组
    		{name:"jack"}
             {name:"rose"}
        ],
        arrObject:[
            {id:1,value:'aaa'},
            {id:2,value:'bbb'}
        ]
	}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key

在vue-cli中，v-for必须绑定v-bind:key进行使用，通常将key值设置为迭代对象的id属性

v-model指令

获取和设置表单元素的值（双向数据绑定）

<div id="app">
    <input type="text" v-model="message" />		用户修改该标签的值会同步反映到data中的message
</div>

  • 1
  • 2
  • 3
var app = new Vue({
    el:"#app",
    data:{
		message:"hellow world"		//message的值随用户的修改而改变
	}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

v-model指令不仅可以绑定文本输入，也可以绑定单选框、复选框等一系列输入标签

v-model修饰符
<input v-model.修饰符="属性名" type="text">

  • 1

  • .lazy

    在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步，可以添加 .lazy 修饰符，从而转为在 change 事件_之后_进行同步

  • .number

    HTML 输入元素的值总会返回字符串，如果想将用户的输入值转为数值类型，可以给 v-model 添加 .number 修饰符

  • .trim

    如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

计算属性computed

computed中定义的属性叫做计算属性

当计算属性所依赖的值发生改变时，计算属性会重新计算，反之，则使用缓存中的值

computed的属性可以被视为是data一样，可以读取和设值，访问方式与data属性一致，也可在{{}}中直接访问

  • 一般情况下， 是没有setter的，computed只是预设了getter，也就是只能读取，不可以改变设值
  • 当赋值给计算属性的时候，将调用set函数。多于在模板组件中需要修改计算属性自身的值的时候
var app = new Vue({
    el:"#app",
    data:{
		message:"hello world";
    },
    computed:{
		updateMessage:{
            get:function(){return this.message + "abc";},//依赖message属性，message改变时重新调用get方法
            set:function(newVal){this.message = newVal;} //updateMessage属性被显式修改时调用
		},
		otherMessage:function(){	//计算属性只有getter方法时的简写
            return this.message + "def";
        }
	}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

使用方法：与data一样，computed对象中的属性名作为数据的名字使用，无论其定义是一个对象或是一个函数

watch监听器

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法

var app = new Vue({
    el:"#app",
    data:{
		message:"hello world";
    },
    watch:{
		message:function (newValue, oldValue){		//必须指定data中定义的数据
			//newValue为修改后的值，oldValue为修改前的值
			//当message的值发生改变时，该方法将被调用
		}
    }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

axios

使用axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  • 1
axios.get(地址?key=value&key2=vallue2).then(
	function(response){
        //成功时触发
	},
	function(err){
        //失败时触发
	}
)
axios.post(地址,{key:value,key2:value2}).then(
    function(response){
        //成功时触发，response.data相当于jQuery中的ajax的success(data)中的data
	},
	function(err){
        //失败时触发
	}
)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

.then() 方法为异步执行方法，只有 Promise 对象有这个方法，其作用为： 当.then()前的方法执行完后再执行then()内部的程序

注意：

  1. axios回调函数中的this不再指向vue对象

  2. 若要在axios回调函数中访问data中的数据，应使用如下方法：

    var app = new Vue({
    el: '#app',
    data: {
        message:"SM"
    },
    methods:{
        getData:function(){
            var that = this;	//此处可以使用访问this访问vue对象，让变量that指向this
            axios.get("地址").then(function(response){
                that.message = response.data;	//使用that变量访问vue对象
            })
        }
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在axios回调函数内并非不能访问vue对象，而是此时this变量的指向被改变了，因此只要在axios回调函数外指定一个新的变量指向vue对象，并在回调函数内使用这个新的变量即可

vue-cli使用：在main.js文件下添加如下代码：

import axios from 'axios'
Vue.prototype.$axios=axios

  • 1
  • 2

使用方式：

this.$axios.get('路径')
    .then(response=>{
    	this.list = response.data.users;
	});

  • 1
  • 2
  • 3
  • 4

axios-post

在vue中直接使用与ajax的参数传递方式类型是不正确的，需要转化

使用qs进行转化： npm install qs --save

import qs from 'qs'
Vue.prototype.$qs = qs

  • 1
  • 2

使用：

let postData = this.$qs.stringify({		//postData为post传递的数据
    属性名:属性值,	//属性名不需要加引号
    ……
})
this.$axios.post('地址',postData)
    .then(response=>{
        console.log(response.data);
    },err=>{
        alert('error');
    });

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

sessionStrange

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据

  • sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
  • localStorage可以在浏览器窗口关闭后还保留数据，可以设定过期时间，也可以手动删除

常用方法

  • sessionStorage.key(int index)：返回当前 sessionStorage 对象的第index序号的key名称，若没有返回null
  • sessionStorage.getItem(string key)：返回键名(key)对应的值(value)，若没有返回null
  • sessionStorage.setItem(string key, string value)：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值
  • sessionStorage.removeItem(string key)：将指定的键名(key)从 sessionStorage 对象中移除
  • sessionStorage.clear()：清除 sessionStorage 对象所有的项

存储数据

采用setItem()方法存储

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

  • 1

通过属性方式存储

sessionStorage['testKey'] = '这是一个测试的value值';

  • 1

存储Json对象

  • sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象
var userEntity = {
    name: 'tom',
    age: 22
};

// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));

// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); 	// => tom

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

读取数据

通过getItem()方法取值

sessionStorage.getItem('testKey'); // => 返回testKey对应的值

  • 1

通过属性方式取值

sessionStorage['testKey']; // => 这是一个测试的value值

  • 1
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/82608
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号