Vue,Vuejs基础1
作者:互联网
Vuejs 初体验
创建了一个vue对象,传入了一些options:{}
{}包含了el属性:该属性表示这个Vue对象挂载到哪一个元素上
{}包含了data属性:该元素通常会存储一些数据,这些数据可以是直接定义出来的,也可以是从服务器加载的
<div id="app">{{message}}</div>
<script src="WEB-INF/lib/vue.js"></script>
<script>
const app=new Vue({
el:'#app',//用于挂载要管理的元素
data:{ //定义数据
message:'你好啊,李银河!'//响应式:当数据发生一些改变时,界面会跟着改变
}
})
</script>
Vue的列表显示
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
message:"你好啊",
movies:['星际穿越','大话西游','少年派','盗梦空间'],
}
})
</script>
v-for可以遍历一个数组
小案例计数器
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!--<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
counter:0
},
methods:{
add:function () {
console.log("add被执行");
this.counter++
},
sub:function () {
console.log("sub被执行");
this.counter--
}
}
})
</script>
新的属性:methods,该属性用于在Vue对象中定义方法
新的指令:@click,该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法通常是method中定义的方法
Vue的生命周期
见另一篇博客总结
插值操作(掌握)
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}},李银河!</h2>
<!--mustache语法中,不仅可以直接写变量,也可以写简单的表达式-->
<h2>{{firstname+lastname}}</h2>
<h2>{{furstname+' '+lastname}}</h2>
<h2>{{firstname}} {{lastname}}</h2>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message:'你好啊',
firstname:'kobe',
lastname:'bryant'
}
})
</script>
插值操作–其他指令使用
- v-once
该指令后面不需要跟任何表达式(不像v-for是需要跟表达式的)
该指令表示元素和组件只渲染一次,不会随着数据的改变而改变
<h2 v-once>{{message}}</h2>
- v-html
某些情况下我们从服务器请求到的数据本身就是一个html代码
如果直接通过{{}}来输出,会将html代码一起输出,但是我们可能希望按照html格式进行解析,并且显示对应的内容
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-html="url"></h2>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message:'你好啊',
url:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
v-bind
- 基本使用
语法糖:就是一个:
-v-bind指令主要用于响应式的更新html属性
一般我们要想在元素节点的属性上动态绑定vue的data数据
<body>
<div id="app">
<img v-bind:src="imgURL" alt="">
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message:'你好啊',
imgURL:'https://profile.csdnimg.cn/9/4/A/3_qq_51817638'
}
})
</script>
- v-bind动态绑定class属性
很多时候,我们希望动态的来切换class,比如当数据为某个状态时,字体显示红色
当数据为另一种状态时,字体显示黑色
绑定class有两种方式
对象语法:
<style>
.active
{
color: red;
}
</style>
<body>
<div id="app">
<!--<h2 v-bind:class="{key1:value1,key2:value2}">-->
<!--<h2 v-bind:class="{类名1:true,类名2:boolean}">-->
<h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message:'你好啊',
isActive:true,
isLine:true
},
methods:{
btnClick:function () {
this.isActive=!this.isActive
}
}
})
</script>
数组语法:
<div id="app">
<h2 v-bind:class="[active,line]">{{message}}</h2>
<!--或者写成一个函数-->
<h2 class="little" v-bind:class="getClasses()">{{message}}</h2>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message:'你好啊',
active:'aaaa',
line:'bbbbbb'
},
methods:
{
getClasses:function () {
return[this.active,this.line]
}
}
})
</script>
- v-bind动态绑定style(对象语法)
我们可以应v-bind:style来绑定一些css内联样式
style后面跟的是一个对象类型
对象的key是css属性名称
对象的value是具体赋的值,值可以来自data中的属性
v-for
- 基本使用
可以用v-for指令基于一个数组来渲染一个列表,v-for指令需要使用item in items形式的特殊语法,其中items是源数组,而item是被迭代的数组元素的别名
<ul id="example-1">
<li v-for="item in items" >
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果:
在v-for块中,我们可以访问所有父作用域的property. v-for还支持一个可选的第二个参数,即当前项的索引
<ul id="example-2">
<li v-for="(item,index) in items">{{parentMessage}}-{{index}}-{{items.message}}
</li>
</ul>
var example2=new Vue({
el:'#example-2',
data:{
parentMessage:'parent',
items:[
{message:'Foo'},
{message:'Bar'}
]
}
})
结果:
也可以用of代替in作为分隔符,因为它更接近javascript迭代器的语法
<div v-for="item of items"></div>
- 在v-for里使用对象
你也可以用v-for来遍历一个对象的property
<ul id='v-for-object' class='Demo'>
<li v-for="value in object">
{{value}}
</li>
</ul>
new Vue({
el:'#v-for-object',
data:{
object:{
title:'how to fo lists in Vue',
author:'Jane',
publishedAt:'2016-04-10'
}}
})
结果:
也可以提供第二的参数为property名称,也就是键名
<div v-for="{value,name} in object">
{{name}}:{{value}}
</div>
结果:
还可以用第三个参数作为索引:
<div v-for="{value,name,index} in Object">
{{index}}.{{name}}:{{value}}
结果:
v-bind和v-for结合的小案例
需求:点击列表选项,该选项变成红色,其余不变
<div id="app">
<ul>
<li v-for="(item,index) in movies"
:class="{active:currentIndex===index}"
@click="liClick(index)">
{{index}}.{{item}}
</li>
</ul>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
currentIndex:0
},
methods:{
liClick(index)
{
this.currentIndex=index
}
}
})
</script>
计算机属性
- 基本使用
模板内表达式非常方便,但它们适用于简单的操作,在模板中放置过多的逻辑会使它们变得臃肿且难以维护
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
至此,模板不再是简单声明性的了,不容易阅读,必须看它一秒才能意识到message是反向的当想在模板中包含多次反向消息,就要写很多遍,所以对于复杂的逻辑,应该使用计算机属性
div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
//split(''),将字符串以空格为界限切割为数组
//如:split(',')以,为界限其人格成数组
//join()方法用于把数组中的所有方法放入一个字符串,元素是通过指定分隔符进行分割的,指定分隔方法join('');
return this.message.split('').reverse().join('')
}
}
})
</script>
- 计算机缓存与方法
我们同样可以在表达式中调用方法来获得相同的结果
<p>Reversed message: "{{ reverseMessage() }}"</p>
// in component
methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
我们将相同的函数定义为方法而不是计算机属性,对于最终结果,这两种方法完全相同,但是不同之处在于计算机属性是根据它们的反应依赖来缓存的,计算属性仅仅在其某些反应性依赖项发生更改时才会重新评估,这意味着只要message没有更改,对于reversedMessage计算属性的多次访问将立即返回先前计算的结果,而无需再次运行该函数
相比之下,只要发生重新渲染,方法调用将始终运行该函数。
为什么我们需要缓存?可以想象一下,有一个昂贵的计算机属性A,它需要遍历一个巨大的Array并进行大量计算,然后我们可能有其他计算属性,这些属性又依赖于A,如果没有缓存,我们执行A的getter比比要的次数多的多。
- 计算机属性的setter和getter方法
<div id="app">{{ fullName }}</div>
<script>
const app=new Vue({
el:'#app',
data:{
firstname:'nobe',
lastname:'Bryant'
},
computed:{
// fullName:function () {
// return this.firstname+this.lastname;
// }
//计算属性一般没有set方法,只读属性
fullName:{
set:function (newValue) {
console.log('-------');
const names=newValue.split(' ');
this.firstname=names[0];
this.lastname=names[1];
},
get:function () {
return this.firstname+' '+this.lastname;
}
}
}
})
</script>
结果:
块级作用域let和var
在ES5之前因为if和for没有块级作用域的概念,所以在很多时候,我们都必须要借助于function的作用域来解决应用外面变量的问题(闭包)
ES5中只有function有作用域
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++)
{
(function (num) {
btns[num].addEventListener('click',function () {
console.log('第'+num+'按钮被点击');
})
})(i)
}
</script>
在ES6中加入了let,let它是有if和for的块级作用域
<script>
var btns=document.getElementsByTagName("button");
/* for(var i=0;i<btns.length;i++)
{
(function (num) {
btns[num].addEventListener('click',function () {
console.log('第'+num+'按钮被点击');
})
})(i)
}*/
for(let i=0;i<btns.length;i++)
{
btns[i].addEventListener('click',function () {
console.log('第'+i+'个按钮被点击');
})
}
</script>
v-on
- 基本使用和语法糖
利用v-on指令来监听事件,绑定事件监听器
语法糖:@
如果函数需要参数,但是没有传入,那么函数的形参为undefined
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
- v-on的修饰符使用
最常见的需求是在事件处理程序中调用event.preventDefault()或者event,stopPropagation()
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
按键修饰符:
在监听键盘事件时,经常需要检查详细的按键
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--只有在$event.key等于PageDown时被调用-->
<input v-on:keyup.page-down="onPageDown">
v-if
- 基本使用
v-if 指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truthy值得时候被渲染
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
message:'你好啊',
isShow:true
}
})
</script>
也可以用v-else 添加一个"else"块
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else元素必须紧跟在带v-if或者v-else-i的元素的后面,否则它将不会被识别
v-else-if顾名思义,充当v-if的"else-if"块,可以连续使用
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
- 登录切换案例
<div id="app">
<span v-if="isUser">用户账号</span>
<span v-else>用户邮箱</span>
<button @click="isUser=!isUser">切换</button>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
isUser:true
}
})
</script>
- 登录切换的input复用问题
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
紧接着上面的案例,如果在有输入内容的情况,切换了类型,我们会发现文字依然显示之前输入的内容,但是按照道理讲,我们应该切换到另一个input元素中了,但是在另一个元素中我们并没有输入内容
这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能复用已经存在的元素,而不是重新创建新元素
在上面的案例中,用户在第一个input中输入的内容,直接复用到第二个input中
解决方法:只需添加一个具有唯一值的 key attribute 即可
案例:切换登录方式
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="email">
</span>
<button @click="isUser=!isUser">切换</button>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
isUser:true
}
})
</script>
v-show
- 基本使用
v-show和v-if的用法十分相似,也用于决定一个元素是否被渲染
v-if:当条件为false时,包含v-if指令的元素,根本就不会在dom中
v-show:当条件为false时,v-show只是给我们的元素添加一个行内样式,display:none
当需要在显示与隐藏之间切换很频繁时,使用v-show,当只有一次切换时,通过使用v-if
v-for
- 基本使用
遍历对象
<div id="app">
<!--1.在遍历对象数组中,如果只是获取一个值,那么获取到的是value-->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!--获取key和value--><!--格式:(value,key-->
<ul>
<li v-for="(value,key) in info">{{value}}-{{key}}</li>
</ul>
<!--获取key和value和index-->
<ul>
<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>
</div>
```javascript
<script>
const app=new Vue({
el:'#app',
data:{
info:{
name:'why',
age:18,
height:1.18
}
}
})
</script>
## 数组中的一些响应式方法总结
```html
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
letters:['a','b','c','d']
},
methods:{
btnClick(){
//1.push方法
// this.letters.push('aaa');
//this,letters.push('aaa','bbb','ccc');
//2.pop方法 删除数组中的最后一个元素
//this.letters.pop();
//3.shift() 删除数组中的第一个元素
//this.letters.shift();
//4.unshift() 在数组最前面添加元素
// this.letters.unshift('aaa');
//this.letters.unshift('aaa','bbb','ccc');可传多个值
//5.splice()作用 :删除/插入/替换元素
//删除元素,第二个位置表示删除几个元素,如果没传,就从起始位置删到最后
//替换元素:第二个参数,表示要替换几个元素,后面是用于替换前面的元素
//插入元素:第二个参数传入0,并且后面跟上要插入的元素
//splice(start,
//this.letters.splice(1,3,'m','n','l','x');//替换
//this.letters.splice(1,0,'x','y','z');//插入
//排序
//this.letter.sort();
//反转
//this.letters.reverse();
//注意:Vue中通过索引值改变元素的值是非响应式的
//this.letter[0]='bbbb';//界面是不会发生改变的
//通过替换修改
this.letters.splice(0,1,'bbbb');//从0的位置替换1个
//通过set修改 set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters,0,'bbbbb');
}
}
})
</script>
v-model
- 基本使用及原理
v-model指令用于双向绑定
v-model其实是一个语法糖,它的背后本质上是包含两个操作
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
<input type="text" v-model="message">
//等同于
<input type="text" v-bind:value="message"
v-on:input="message=$event.target.value">
- v-model结合radio类型使用
<div id="app">
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex">女
</label>
<h2>{{sex}}</h2>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
messages:"你好啊",
sex:''
}
})
</script>
- v-model结合checkbox使用
单选框
<div id="app">
<!--checkbox的单选框-->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>您选择的是:{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
messages:"你好啊",
isAgree:false
}
})
</script>
复选框
<div id="app">
<!--checkbox的单选框-->
<!-- <label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>您选择的是:{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>-->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>您的爱好是:{{hobbies}}</h2>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
messages:"你好啊",
isAgree:false,
hobbies:[]
}
})
</script>
- input的值绑定
<div id="app">
<label v-for="item in originalHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
<h2>您的爱好是{{hobbies}}</h2>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
hobbies:[],
originalHobbies:['篮球','足球','羽毛球','台球']
}
})
</script>
- 修饰符
lazy修饰符:v-model默认是在input事件中同步输入框的数据的
也就是说,一旦数据发生改变时对应的data中的数据就会自动发生改变,lazy修饰符可以让数据在失去焦点或者回车时才会更新
number修饰符:默认情况下。在输入框中无论我们输入的是字母还是数字,都会被当作数字处理,但是如果我们希望处理的是数字类型。那么最好直接将内容当作数字处理
number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符:如果输入的内容首尾有很多空格,通常希望将其取出,trim可以过滤掉内容两边的修饰符
未完待续
标签:el,Vue,Vuejs,app,基础,new,message,data 来源: https://blog.csdn.net/qq_51817638/article/details/122518955