学习Vue
最好的方式是看官方文档
1. 使用Vue
1.1流程
①在页面导入Vue.js文件
方式一:<script src="./vue.js"></script>
方式二:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
②写HTML+CSS页面结构
<div id="app">
{{xxoo}}
</div>
③初始化Vue
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo:'我是隔壁老梁'
}
})
</script>
喜极而泣😭,恭喜你成功运行你的第一个Vue网页!
接下来难度会越大,可能会导致掉头发噢~~(每个人都会掉头发的啦…🐷)
1.2 Vue挂载点介绍
上个例子有el这个属性,那么这个el属性是干啥的呢🙄?
其实啊~~el属性是一个挂载点,告诉vue,我要把数据显示到页面哪一个元素上,例如app是一个id选择器,则el属性里的需要挂载的元素为: ‘#app’
除了挂载id选择器之外还可挂载其他选择器吗🙄??
当然可以啦!可以是类选择器、标签选择器!但是Vue官方更推荐用id选择器噢!因为如果el挂载的选择器选中了多个元素,vue只会渲染第一个元素😁。
怎么?你如果不信??那就吃栗子吧!!
<div class="xxoo">
{{ name }}
</div>
<div class="xxoo">
{{ name }}
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '.xxoo',
// data: 数据
data:{
num:'我是隔壁老梁'
}
})
</script>
/*输出结果:
我是隔壁老梁
{{ num }}
*/
吃完栗子之后这下信了吧!?如果你还不信那就自己打开代码编辑器自己敲一遍试试(⊙﹏⊙)
如果你信了,那么我问你,el能挂载所有的元素的吗??
思考完之后我告诉你答案吧,不能呢~~因为html和body元素是不能被挂载的,如果挂载就会报错。不信你可以试一下!!!
(ง •_•)ง好了好了,关于el挂载点的最后一个问题要来了!!!
如果没有设置vue挂载点el,会导致什么后果呢?
自己去动手去实践一下。下一章节我会告诉你答案哟😚
1.3 data属性
data的意思你是知道的吧?肯定是数据的意思啦!在vue里面呢,你知道是data属性是干啥的吗?
我猜你肯定大概懂了,我就摊牌了😁。
vue框架是很智能的呢~~,vue是会自动将data中的数据渲染到页面中,而且无需DOM操作噢。
吃个栗子吧!🌰
<div id="app">
{{xxoo}}
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo:'我是隔壁老梁'
}
})
</script>
???是不是很疑问?为什么这个栗子重复的?
无他,唯有手熟尔(这和撸管差不多,撸多了自然知道自己的G点是哪里了)
1.4 {{}}插值语法
**什么是插值语法呢?**往**
插值??好像也没啥错,就是往标签或者盒子里插值的意思,也就是栗子里面{{}}
这个符号,也被一些程序猿叫做 胡子语法
。因为长得像胡子,但是我不觉得啊,反而像两个尖锐的乳头,可以叫做乳头语法
嘛???(太淫荡了!!羞涩🙄)
言归正传吧!插值语法的作用是什么呢?
它的作用就是!!将data中的数据显示到页面
而且啊,最重要的是,插值语法里面可以放二元表达式和三元表达式,还支持数组
与对象
的属性取值,不过遗憾的是,不支持分支语法
和循环语法
来吃个栗子吧!🌰
<div id="app">
<p> 我的名字是: {{ name }}</p>
<p> 我的年龄是: {{ age>=18?'成年人':'未成年' }}</p>
<p> 我的爱好是: {{ hobby[0] }}</p>
<p> 我的老婆是: {{ wife.name }}</p>
</div>
<script>
let app = new Vue({
data: {
name:'隔壁老梁',
age:18,
hobby:['学习','交配','搞基'],
wife:{
name:'大桥未久',
}
}
});
</script>
/*输出结果:
我的名字是: 隔壁老梁
我的年龄是: 成年人
我的爱好是: 学习//肯定是学业为重啦!!
我的老婆叫: 大桥未久//波多野结衣,爱音玛利亚...等!!一个老婆怎么够!
*/
炒完栗子之后我也累了,遇到问题睡大觉吧(开玩笑的~~),“你这个年龄段,你还能睡得着觉?有点出息没有”.jpg
2. Vue指令
指令
顾名思义 指示命令
的意思,那计算机指令又什么呢?
告诉计算机从事某一特殊运算的代码的意思
那问题来了😱,Vue指令又是啥意思呢?
指挥Vue框架工作的指示和命令(好像我一直都在扯皮废话~~毕竟是手摸手教学🙄)
下面来看看Vue有哪些常用的指令吧!!
2.1 v-text指令
好像这些指令都不是很有趣,俺也编不出好的比喻让各位同学来加深理解, 不过俺会继续努力的噢!!
先看看它的语法吧!!
v-text=" 值 "
看得懂么?看不懂就继续吃栗子吧🌰!
<div id="app">
<p v-text="xxoo">我爱</p>
<p v-text="xxoo1"></p>
<br>
<p>我爱{{ xxoo }}</p>
<p>{{ xxoo1 }}</p>
</div>
<script></script>
/*输出结果:
波多老师
<h1>大桥老师</h1>
我爱波多老师
<h1>大桥老师</h1>
*/
看到结果了吧? 这次结果是v-text
指令会把之前的文本给覆盖掉哦, 回顾起来…是不是和innerText
属性很像呢?
还有呢. 胡子语法
里面默认的文本还是会显示的噢, 那就总结出它们两个的区别了
①innerText:替换所有的文本内容(会覆盖现有的文本)
②{{插值语法(胡子语法)}} :替换部分文本内容(只会替换插值部分)
你在案例里是不是有这么的一个疑惑?
为啥·<h1>大桥老师</h1>
和<h1>大桥老师</h1>
里的h1标签不生效呢?接下来的指令就可以让h1生效了!
2.2 v-html指令
v-html
,html: 网页 ; 超文本标记语言的意思,所以啊!它是会解析Vue
data
里面带有标签的数据哦!具体怎么实现呢?
语法:
v-html=" 值 "
吃个栗子吧🌰!
<div id="app">
<p>我爱{{ xxoo }}</p>
<p v-html="xxoo"></p>
</div>
<script></script>
吃完栗子之后你会发现,大桥老师的h1标签被解析了!
现在知道v-html
的作用了吧??
:设置元素的innerHTML属性值
所以v-html
与v-text
的区别就呈现出来了
v-text : 不能解析字符串中的标签
v-html : 可以解析字符串中的标签
2.3 v-on指令
v-on
,on: 打开;接通的意思。在学习JavaScript
的时候是不是有个onclick
点击事件?那v-on
的作用是什么呢?
给元素绑定事件用的
语法:
(1)标准语法:v-on:事件类型 = "方法名"
v-on:click="doClick"
(2)简洁语法(常用): 把 v-on: 替换成 @
@click = "doClick"
讲啥都没用!!来吃栗子吧🌰!!
<div id="app">
//标准语法
<button v-on:click="doClick">点我</button>
//简洁语法
<button @click="doClick">点我</button>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
},
/* 事件处理函数 */
methods: {
doClick(){//相当于 doClick:function(){}
console.log('点击我了');
}
}
})
</script>
/*输出结果:
点击按钮则控制台则提示:点击我了。
*/
你是不是发现了上述的代码多了一个methods
属性呢?(肯定啦!!你又不眼瞎!!?)
其实Vue
规定哈, 事件处理函数都需要写在vue
的methods
属性中。放在data
属性中也可以,但是为了保证代码规范,一般会放在methods
里面。
2.4 vue事件修饰符
啥是vue
事件修饰符呢?其实就是用来限定事件的行为
的,如阻止默认跳转
、冒泡
等。是不是有点抽象,因为它的范围比较广,实际应用场景很多,例如监听键盘事件,看看用户按了哪些按钮,根据用户按的按钮触发行为。一些搜索框啊,会监听用户的回车键,只要用户按下了回车键就会触发搜索行为。说了这么多,现在懂了吧?
语法:
@事件名.修饰符 = "方法名"
事件修饰符有点多,但还是吃个栗子吧🌰!!
事件修饰符比较多,建议查看 官方文档 更全面一点。
下面,列举出一些常用的修饰符吧
@click.stop : 阻止冒泡
@click.prevent : 阻止默认跳转
@click.enter : 监听enter键
2.5 vue事件方法中this的指向
this指向在面试中经常会被问到。
在Vue
事件处理函数中的this指向谁呢?
吃栗子吧🌰!
<div id="app">
<p>我的年龄是:{{ age }}</p>
<button @click="doClick">点击</button>
<!-- 如果是在行内获取data中的成员,不需要通过this,直接获取的 -->
<button @click="age++">变老</button>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
age:18
},
/* 事件处理函数 */
methods: {
doClick(){//相当于 doClick:function(){}
console.log(this);//vue实例对象
console.log(this === app);//true
//报错,不需要通过data来获取,直接使用实例对象访问即可。
console.log( this.data.age );
//vue会把data和methods中的成员平铺到实例对象中
console.log( this.age );//18
this.age++;
}
}
})
</script>
指向vue实例对象哦
上面分为几个知识点??
①vue事件处理函数中的this指向谁?
console.log(this);
console.log(this === app);//true
答:指向vue实例对象
②下面这行代码为啥会报错呢?
console.log( this.data.age );
报错啊,在vue中,不需要通过data来获取,直接使用实例对象访问即可。
③那平铺是咋样的呢??
console.log( this.age );//18
直接省略data,vue会把data和methods中的成员平铺到实例对象中 ,就像挖蚯蚓一样,把它们从地底下拿到平面上来。
④如果是在行内获取data中的成员呢?行内是啥?。
<button @click="age++">变老</button>
就是
@click="age++"
啊,一点击就会自增1,其实就像胡子语法
那样,不需要通过this,直接在data
获取数据。
我好像讲了好多废话,但是你应该懂了是怎么一个回事了吧?
来个有难度的🐷。
如果在vue的methods中使用了箭头函数,则此时this会指向谁?为什么?
先吃个栗子🌰!!
<div id="app">
<button @click="xxoo">点击</button>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
age:18
},
/* 事件处理函数 */
methods: {
xxoo: () => {
console.log(this.log); //undefined
}
}
})
</script>
是不是有点疑惑??那你肯定是基础不扎实了。
我来帮你解惑吧
🌟因为箭头函数默绑定父级作用域的上下文,所以不会绑定vue实例, 所以 this 是undefind
还有个特殊情况噢
🌟 在严格模式下this是undefined,在非严格模式下指向window
2.6 vue事件方法传参
跟你讲,其实每一个vue事件都有一个默认参数噢
来吃一个栗子吧🌰!
<div id="app">
<button @click="xxoo($event,age)">点击</button>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
age:18
},
/* 事件处理函数 */
methods: {
xxoo(e,age){
console.log(e),
console.log(age)
}
}
})
</script>
看到了吧,其实默认参数是
事件对象
如果绑定事件的时候传递了参数,此时则会覆盖事件对象
如果希望不覆盖事件对象,则可以使用$event
2.6 v-bind指令
v-bind
,bind结合;捆绑的意思。它的作用是啥呢?顾名思义啊!肯定是和vue捆绑在一起?具体是谁和vue捆绑在一起呢?
语法:
(1)标准语法: v-bind:原生属性 = "值"
v-bind:src="imgPath"
(2)简洁写法:去掉v-bind :原生属性 = "值"
:src="imgPath"
吃个栗子吧🌰!!
<div id="app">
<img :src="imgPath" >
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
imgPath:'图片地址'
}
})
</script>
感受到了吧??它是和原生标签属性捆绑在一起用的呢。它的作用是
让原生html属性也可以访问 vue中的数据
✔默认情况下,只有v-指令才可以访问data中的成员。标准属性无法访问的。
✔如果希望原生的标签属性也可以访问data中的成员,则可以使用v-bind指令
它也可以绑定样式!!
语法:
:class=" { 类名1:布尔值,类名2:布尔值 } "
//布尔值true:则加载类样式 false:不加载类样式
看看栗子🌰!
<style>
div>div {
width: 100px;
height: 100px;
}
.red-box {
background-color: red;
}
.green {
border: 10px solid green;
}
</style>
<div id="app">
<div :class="{green:true,'blue-box':true}"></div>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
}
})
</script>
这个属性是不是很方便?但是有一个注意点哦
如果类名有-,则需要使用引号包起来
2.7 v-for指令
v-for
, for:为了;循环的意思。
这是不是和for
循环很像呢?其实是有区别的,for
循环可以遍历很多东西,而v-for
只能遍历某个标签元素而已哦。就是v-for
写在谁身上,就表示重复生成谁
语法:
v-for="(item,index) in 数组名"
吃个栗子 🌰 !
<div id="app">
<ul>
<li v-for="(item,index) in list">
<span>下标:{{ index }}</span>
<span>内容:{{ item }}</span>
</li>
</ul>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
list:[
'波多野结衣',
'苍井空',
'大桥未久',
'爱音玛利亚'
]
}
})
</script>
现在懂了吧!?
2.8 v-model指令
v-model
,model: 模型的意思。
v-model
是重点内容噢,它能让数据双向绑定。啥是双向绑定呢?
修改了表单里面的值,此时data中的数据也会跟着变化
修改了data中的数据,表单的值也会跟着变化
而且是实时更新数据哦!
语法:
v-model="属性名"
吃个栗子🌰!
<div id="app">
<input type="text" placeholder="请输入用户名1" v-model="username">
<input type="text" placeholder="请输入用户名2" v-model="username">
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
username:''
}
})
</script>
输入数据的时候是不是两个表单的数据都一样?这不是废话么?肯定一样啦!!
要注意哦(⊙o⊙)
v-model只能用于表单元素
v-model属性名一定要在data中声明
讲了这么多,那双向绑定的意义又是啥?
快速 获取 表单的值
快速 设置 表单的值
2.9 v-if指令
说到v-if
指令,其实就是条件判断,不过Vue
里面呢,是根据条件去渲染元素。
语法:
v-if="条件:true或false"
例如:
<p v-if="age>=16">我十六岁了,拥有交配的权利了。</p>
如果`age`大于或等于16就显示上述的<p>标签。
懂了对吧??
v-if
还可以搭配v-else-if
和v-else
一起用噢,具体怎么用呢??
那就吃栗子吧🌰!
<div id="app">
<input type="text" placeholder="请输入你的考试分数"
<br
<p v-if="score<60">“爸爸别打了!再打人就没了!!”</p>
<p v-else-if="score<=80">爸爸给我买了个精致飞机杯</p>
<p v-else-if="score<=90">爸爸给我买了高仿充气娃娃</p>
<p v-else>爸爸给我买了个老婆</p>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo:0
}
})
</script>
//输出结果:输入的分数符合哪个条件,哪个条件就显示噢,不信可以试试
和你之前学的JavaScript
基础里的条件判断,是不是一模一样??
不过,这里面的注意点是:
v-else
前面必须要有v-if
或v-else-if
多分支必须以
if
开头,中间可以多个else-if
2.10 v-show指令
v-show
,show是显示的意思,害,也是你学CSS
时候的display
属性。不过v-show
是根据布尔值
来判断显示
或隐藏
的,
语法:
v-show="布尔值:true:显示;false:隐藏"
关于v-show
怎么用呢?
吃个栗子吧🌰!!
<div id="app">
<p v-show="xxoo">我是v-show指令</p>
<p v-if="xxoo">我是v-if指令</p>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo:false
}
})
</script>
如果你吃了这个栗子,那么你会发现,两个<p>
都被隐藏了。
那产生了一个问题,v-show
和v-if
不都是讲元素给隐藏起来了咩…那我干脆用v-if
算了,何必多此一举。别急!慢慢听我讲,区别可大了!!就好像Z奶和A奶的区别!!
v-show
与v-if
区别是
v-if
:如果值为false,这个元素不会渲染到DOM树
v-show
: 根据条件修改元素display
值,
v-show
:如果只为false
,这个元素还是在DOM树
上,只是display
值为none
现在知道区别了吧??如果你跟我讲DOM树
到底是什么?那我建议你重新复习一下JavaScript
基础了
JavaScript
的教学就不是手摸手了,是嘴对嘴的了!!😍
2.11 v-cloak指令
v-cloak
,cloak:遮掩;隐匿的意思,在Vue
里,需要在Vue
渲染数据之前显示CSS
样式就得用v-cloak
指令了。
语法:
<style>
[v-cloak]{
}
</style>
<p v-cloak></p>
语法有点怪异,直接写在<style>
样式里,注意哦,使用这个指令一定要写对应的css样式,不然会报错。说到底呢,v-cloak
指令本质其实是一个属性选择器,Vue
完成渲染就会移除这个属性,不会占据内存。
来吃个栗子吧 🌰 !!
<style>
[v-cloak]{
background-color: green;
}
</style>
<div id="app">
<p v-cloak>{{xxoo}}</p>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo="隔壁老王"
}
})
</script>
事先说明一下,这效果刷爆手指头都不会出来的。需要在浏览器打断点才可以看到效果。那v-cloak
的应用场景是啥呢?
网页的懒加载,例如京东主页,拉下去你会发现,数据没加载完就会有灰色的空框框,那就是懒加载噢,也就是在页面数据没加载完前,用显示灰色的空框框占用位置而已。用
v-cloak
也可以实现。
2.12 v-once指令
v-once
,once:一次的意思。v-once有啥作用呢??
让vue只能渲染一次,就算你刷新了,它还是显示原来的样子。
你看我介绍得这么短,就知道这个指令没啥JB用😂,因为它的应用场景很少
看看栗子吧🌰 !
<div id="app">
<p v-once>我使用了once指令:{{xxoo}}</p>
<button @click="xxoo++">点我成长</button>
<p >我没有使用once指令:{{xxoo}}</p>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo="隔壁老王"
}
})
</script>
吃完这个栗子之后你会发现,第一个p标签并没继续增加数字。
2.13 v-pre指令
v-pre
,pre:之前的意思, 它的作用呢,就是让vue不渲染指定的元素。
语法:
v-pre
唉😔,其实这个指令应用场景也很少,不过还是要了解的啦。不然产品经理给你提需求,你肯定吐了。
吃个栗子吧 🌰!!
<div id="app">
<p>我没有使用pre: {{ xxoo }}</p>
<p v-pre>我有使用pre: {{ xxoo }}</p>
</div>
<script>
let app = new Vue({
// el: 挂载点(element的简写,element是元素的意思噢)
el: '#app',
// data: 数据
data:{
xxoo="隔壁老王"
}
})
</script>
吃完了吧,我还是说一下吧,它的应用场景
一个技术博客给别人介绍vue语法的时候,就需要使用这个指令来让vue不要渲染。
则vue渲染之后,用户看不到语法,只能看到渲染后的数据了。
手摸手教Vue
入门篇①就到此吧,下次再写咯❤
Comments | NOTHING