【手摸手系列】のVue入门篇①


1. 使用Vue - HackMD

学习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>
    let app = new Vue({
        // el: 挂载点(element的简写,element是元素的意思噢)
        el: '#app',
        // data: 数据
        data:{
            xxoo:'波多老师',
            xxoo1:'<h1>大桥老师</h1>'
        }
    })
</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>
    let app = new Vue({
        // el: 挂载点(element的简写,element是元素的意思噢)
        el: '#app',
        // data: 数据
        data:{
            xxoo:'波多老师',
            xxoo1:'<h1>大桥老师</h1>'
        }
    })
</script>

吃完栗子之后你会发现,大桥老师的h1标签被解析了!

现在知道v-html的作用了吧??

:设置元素的innerHTML属性值

所以v-htmlv-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规定哈, 事件处理函数都需要写在vuemethods属性中。放在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-ifv-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-ifv-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-showv-if不都是讲元素给隐藏起来了咩…那我干脆用v-if算了,何必多此一举。别急!慢慢听我讲,区别可大了!!就好像Z奶A奶的区别!!

v-showv-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入门篇①就到此吧,下次再写咯❤

声明:杂念屋|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 【手摸手系列】のVue入门篇①


自觉渺小而读书