基本框架
<!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>
//one.jsvar app = new Vue({ //创建vue对象
el: '#app', //指定一个标签作为vue的挂载点(作用范围),使用css选择器选择
data: { //vue中使用的数据
message: 'Hello Vue!!!!'
}})
el:挂载点
作用:指定vue对象的作用范围为某一标签及其内部的后代标签
data:数据对象
作用:存储vue对象使用的数据,作为声明式渲染的数据源
其中的数据可以是任意JavaScript数据类型,例如对象、数组等
var app = new Vue({
el:'#app',
data:{
message:"hello world",
list:[1,2,3,4,5],
school:{
name:"齐鲁工业大学"
address:"长清区"
}
}})
基本语法
{{}}插值表达式
{{}}插值表达式不仅可以将data数据直接插入到html中,还有以下用法:
<div id="app">
{{num + 3}} <!--数字计算-->
{{message + "abc"}} <!--字符串拼接-->
{{sayhi()}} <!--方法调用,输出方法返回值-->
{{message.split(' ').reverse().join(' ')}} <!--执行JavaScript代码-->
</div>
var app = new Vue({
el: '#app',
data:{
num:1,
message:"hello world"
},
methods:{
sayhi:function(){
return "hello";
}
}})
v-text指令
作用:设置标签的文本值
<!--将message中的数据写入div-->
<div v-text="message"></div>
message为vue对象的data数据
如果只需要设置部分文本值,应当使用{{}}插值表达式,例如<p>123{{message}}</p>,123不会被覆盖掉
v-text 和 {{}} 都支持字符串拼接,例如:
<div v-text="message+'123'"></div>
<div>{{message+"123"}}</div>
v-html指令
设置标签的innerHTML,用法与v-text相同,但是会将插入的内容解析为html代码
v-on指令
为元素绑定事件
<div id="app">
<div v-on:事件名="方法"></div>
<div @事件名="方法"></div> <!--简写形式-->
<div @事件名="JavaScript代码"></div> <!--事件触发时执行js代码--></div>
var app = new Vue({
el: '#app',
methods:{
方法名:function(){
//方法体
//this.message访问data中的message
}
}})
事件名与JavaScript事件名相同,写法上省略开头的on
通过事件实现数据更改
<div id="app">
<div v-on:click="change">{{message}}</div> 为需要修改数据的标签绑定事件</div>
var app = new Vue({
el: '#app',
data:{
message:"hello world"
}
methods:{
change:function(){
this.message="hello vue" //使用this可直接访问data中的数据,对其做修改
}
}})
常见事件
窗口事件
表单元素事件
在表单元素中才有效
键盘&鼠标事件
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>
var app = new Vue({
el: '#app',
methods:{
dolt:function(p1,p2){...},
sayHi:function(){...}
}})
常用事件修饰符
.stop:调用 event.stopPropagation()
.prevent:调用 event.preventDefault()
.capture:添加事件侦听器时使用 capture 模式
.self:只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyCode | keyAlias}:只当事件是从特定键触发时才触发回调
.native:监听组件根元素的原生事件
.once:只触发一次回调
.left:只当点击鼠标左键时触发
.right:只当点击鼠标右键时触发
.middle:只当点击鼠标中键时触
.passive:以 { passive: true } 模式添加侦听器
常用按键修饰符
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>
var app = new Vue({
el:"#app"
data:{
isShow:true
age:16
}
})
v-if指令
根据表达式的真假,切换元素的显示和隐藏(操纵dom元素)
用法与v-show相同
与v-show的区别:
<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>
v-bind指令
设置元素的属性
<div id="app">
<img v-bind:src="imgSrc"/> <!--imgSrc为data中的数据-->
<img v-bind:src="imgSrc+'/涩图.jpg'"/> <!--支持字符串拼接-->
<img :src="imgSrc"/> <!--简略写法,用:替代v-bind:-->
</div>
var app = new Vue({
el:"#app"
data:{
imgSrc:"图片地址",
isActive:true
}})
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>
var app = new Vue({
el:"#app"
data:{
isActive: true,
hasError: false
}
})
可以绑定一个返回对象的计算属性,这是一个常用且强大的模式:
<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'
}
}
}
})
我们可以把一个数组传给 v-bind:class
,以应用一个 class 列表:
<div v-bind:class="[activeClass, errorClass]"></div>1
var app = new Vue({
el:"#app",
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
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语法-->
var app = new Vue({
el:"#app",
data: {
activeColor: 'red',
fontSize: 30,
styleObject: {
color: 'red',
fontSize: '13px'
}
}
})
v-bind:style
的数组语法可以将多个样式对象应用到同一个元素上:
<!--baseStyles和overridingStyles都是样式对象,css语法-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
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>
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'}
]
}
})
当 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>
var app = new Vue({
el:"#app",
data:{
message:"hellow world" //message的值随用户的修改而改变
}
})
v-model指令不仅可以绑定文本输入,也可以绑定单选框、复选框等一系列输入标签
v-model修饰符
<input v-model.修饰符="属性名" type="text">
.lazy
在默认情况下,v-model
在每次 input
事件触发后将输入框的值与数据进行同步,可以添加 .lazy
修饰符,从而转为在 change
事件_之后_进行同步
.number
HTML 输入元素的值总会返回字符串,如果想将用户的输入值转为数值类型,可以给 v-model
添加 .number
修饰符
.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model
添加 trim
修饰符
计算属性computed
computed中定义的属性叫做计算属性
当计算属性所依赖的值发生改变时,计算属性会重新计算,反之,则使用缓存中的值
computed的属性可以被视为是data一样,可以读取和设值,访问方式与data属性一致,也可在{{}}中直接访问
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";
}
}
})
使用方法:与data一样,computed对象中的属性名作为数据的名字使用,无论其定义是一个对象或是一个函数
watch监听器
watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法
var app = new Vue({
el:"#app",
data:{
message:"hello world";
},
watch:{
message:function (newValue, oldValue){ //必须指定data中定义的数据
//newValue为修改后的值,oldValue为修改前的值
//当message的值发生改变时,该方法将被调用
}
}
})
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){
//失败时触发
})
.then() 方法为异步执行方法,只有 Promise 对象有这个方法,其作用为: 当.then()前的方法执行完后再执行then()内部的程序
注意:
axios回调函数中的this不再指向vue对象
若要在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对象
})
}
}
})
在axios回调函数内并非不能访问vue对象,而是此时this变量的指向被改变了,因此只要在axios回调函数外指定一个新的变量指向vue对象,并在回调函数内使用这个新的变量即可
vue-cli使用:在main.js文件下添加如下代码:
import axios from 'axios'Vue.prototype.$axios=axios12
使用方式:
this.$axios.get('路径')
.then(response=>{
this.list = response.data.users;
});
axios-post
在vue中直接使用与ajax的参数传递方式类型是不正确的,需要转化
使用qs进行转化: npm install qs --save
import qs from 'qs'
Vue.prototype.$qs = qs
使用:
let postData = this.$qs.stringify({ //postData为post传递的数据
属性名:属性值, //属性名不需要加引号
……})this.$axios.post('地址',postData)
.then(response=>{
console.log(response.data);
},err=>{
alert('error');
});
sessionStrange
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据
常用方法
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值'); // 存入一个值
通过属性方式存储
sessionStorage['testKey'] = '这是一个测试的value值';
存储Json对象
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
读取数据
通过getItem()方法取值
sessionStorage.getItem('testKey'); // => 返回testKey对应的值
通过属性方式取值
sessionStorage['testKey']; // => 这是一个测试的value值
https://blog.csdn.net/xsvklftj/article/details/110205683
[最后修改由 admin, 于 2022-05-05 09:28:28]
评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2851