极简Vue基础指令与方法

北极光之夜。 发表于 2021/07/01 16:17:20 2021/07/01
【摘要】 前言: 最近感觉南方挺热的,走在路上能听见能听到很大声的蝉鸣。不过我喜欢蝉鸣。也喜欢夏天。最喜欢在夏天旅行。夏天,你好。ヽ(。◕‿◕。)ノ゚ 最近挺久没更新了,不如,就写篇vue基础的文章把。这是一篇极简Vue基础指令与方法的文章,快速回忆vue基础指令。@TOC 一.vue脚手架安装:vue-cli让人们迅速搭建一个vue项目。1.先打开cmd终端,在终端回车执行如下命令,先全局安装@v...

前言:

 最近感觉南方挺热的,走在路上能听见能听到很大声的蝉鸣。不过我喜欢蝉鸣。也喜欢夏天。最喜欢在夏天旅行。夏天,你好。ヽ(。◕‿◕。)ノ゚
 最近挺久没更新了,不如,就写篇vue基础的文章把。这是一篇极简Vue基础指令与方法的文章,快速回忆vue基础指令。

在这里插入图片描述

@TOC

一.vue脚手架安装:

vue-cli让人们迅速搭建一个vue项目。

1.先打开cmd终端,在终端回车执行如下命令,先全局安装@vue/cli脚⼿架⼯具。

npm install -g @vue/cli

在这里插入图片描述

安装完成之后,使⽤如下命令查看版本号:

 vue --version

在这里插入图片描述
2.进入一个位置创建项目,如我在D盘新建一个空文件夹ceshiItem,我要在里面建一个项目:

在这里插入图片描述
打开该目录下的终端,输入以下命令:

vue create 项目名字

如,我建一个叫auroras的项目:

在这里插入图片描述
3.选一个项目,箭头代表选中的选项,上下键可以移动箭头,选好之后回车。选最后一个,回车,表示自己手动选择配置。

在这里插入图片描述
4.上下键移动,空格进行选中和不选中,选择如下4个,选完直接回车,Router是路由,vuex是状态机,Babel是编译,TypeScript是TypeScript支持,CSS Pre-processors是CSS预编译器(包括:SCSS/Sass、Less、Stylus)等等:

在这里插入图片描述
5.选择2.x回车,目前还是2.x版本的用得多,回车后输入y,再回车:

在这里插入图片描述
6. 选择Babel等配置文件存放位置,第一个回车,然后出现是否记录以便下次使用该配置,输入y回车,然后为该配置起个名字,好下次直接选择该配置,我就起个auroras:

在这里插入图片描述
在这里插入图片描述
7. 等待项目初始化,初始化完成,/ceshiItem目录下有了auroras这个项目:

在这里插入图片描述
在这里插入图片描述
8. 右键通过vscode方式打开auroras这个文件夹,在终端输入如下命令运行项目:

npm run serve

在这里插入图片描述
9.等待片刻,出现网址,浏览器输入第一个网址就是项目了:

在这里插入图片描述
在这里插入图片描述

  1. vue文件的初始模板如下,可将App.vue文件内容删除换成下面的开始学习:
<template>
 <div></div>
</template>

<script>
export default {
 data() {
 return {
 };
 },
 computed: {},
 methods: {},
 created() {},
 mounted() {}
};
</script>
<style scoped>
</style>

其它:
  到这就创建项目好了,其实还有个方法就是用vue可视化面板创建项目,我认为这个简单直观得多,打开本地cmd终端,输入命令 vue ui

在这里插入图片描述
可视化面板:

在这里插入图片描述
使用可视化面板创建项目可以参考我另一篇文章,里面的第三点详细写有:https://auroras.blog.csdn.net/article/details/117536679

二.页面基渲染 {{x}}:

 在data中定义⼀个变量,通过 Mustache 语法 (双大括号:{{xxx}} ) 可以将其内容快速渲染至页面:

核心语法:

{{ msg }}

定义一个msg变量:

data() {
    return {
      msg:'hello world'
    };
 },

渲染到页面上:

<template>
 <div>
    {{msg}}
 </div>
</template>

效果:

在这里插入图片描述
在双大括号内部,还可以绑定 JavaScript 表达式,如下 :

<template>
 <div>
    {{msg + '你好,世界'}}
 </div>
</template>

看效果:

在这里插入图片描述

三.属性渲染 v-bind:

 双大括号语法不能作用在 HTML attribute 上,遇到这种情况应该使⽤v-bind指令,简单点来说,就是比如有个div盒子,它有一个title属性,但这个值是什么,不确定,想用变量表示,行,在该属性前用v-bind指令绑定其再指定一个变量做为值:

核心语法:

{{ v-bind }}

如下:

<template>
 <div v-bind:title="title">
    {{msg + '你好,世界'}}
 </div>
</template>

定义title这个变量值为 你好呀:

data() {
    return {
      msg:'hello world',
      title: '你好呀'
    };
 },

效果:
在这里插入图片描述

当然,v-bind这个单词是可以省略的,直接这样写 :title=“title”

四.快速渲染 v-for:

 比如,我有一个数组,如 arr = [1,2,3,4],我还有一个div盒子,我想在这个div里放4个子div,每个子div里放一个数字,一 一对应数组里的数据,那怎么写,下面这样吗?:

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
 </div>

 这样可以,但是万一有一千一万个数也这样?这样是不行的,所以可以用v-for指令根据数组内容动态渲染,先在data定义数组变量:

data() {
    return {
      arr: [1,2,3,4]
    };
 },

给要重复生成的子div盒子动态渲染:

 <div>
    <div v-for="item in arr" :key="item">{{item}}</div>
 </div>

item指数组里的每个元素,名字自定义。in表示在哪个数组里,固定写法。in后面表示遍历哪个数组,我们这是arr。:key=“item” 表示索引值,就让当前item为索引值。

效果:

在这里插入图片描述

五.条件渲染 v-if,v-else,v-show:

 v-if 指令用于条件性地渲染⼀个内容。这个内容只会在指令的表达式返回 true值的时候被渲染。 也可以与 v-else⼀起使用。如我有个div盒子,我想根据变量的值判断显不显示它:

<div>
    <div v-if="pan">我北极光之夜出来了</div>
 </div>

pan变量为假:

 data() {
    return {
      pan: 0
    };
 },

看页面什么都无:
在这里插入图片描述
改变量为真:

data() {
    return {
      pan: 1
    };
 },

看,出来了:

在这里插入图片描述
 配合v-else一起用,注意,v-if 与 v-else 同时使用时,v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后⾯,否则它将不会被识别:

 data() {
    return {
      pan: 1
    };
 },
 <div>
    <div v-if="pan">我北极光之夜出来了</div>
    <div v-else>北极光出来不了那我南极光出来了</div>
 </div>

看效果:
在这里插入图片描述
v-show:
 另⼀个⽤于根据条件展示元素的选项是 v-show 指令。用法大致⼀样与 v-if ⼀样:

 <div>
    <div v-show="pan">我北极光之夜出来了</div>
 </div>
data() {
    return {
      pan: 1
    };
 },

一样的效果:

在这里插入图片描述

 既然如此,为啥既生v-if还生我v-show,是因为,v-if原理为元素生成和销毁达到效果,而v-show是通过控制样式的显示和隐藏达到效果。所以,某元素未来要频繁渲染用v-show,不频繁用v-if。

六.监听DOM事件 v-on:

 以前在写原生 js 的时候,假如要给一个按钮绑定鼠标或键盘等事件,那么要先获取元素然后再绑定,而在vue里简单了操作,直接在标签里完成绑定,如给给一个按钮绑定点击事件:

 <div>
    <button v-on:click="hand"></button>
 </div>

 直接在该DOM元素上写 v-on,后面跟着绑定什么事件,如我是click鼠标点击事件,双引号里要写执行的函数名字,如hand这个函数,且要在vue的 methods :{ } 这个对象里写执行的函数,如:

 methods: {
   hand(){
     console.log('点我了');
   }
 },

效果:
在这里插入图片描述

v-on:这个可用@代替,如直接这样写 @click=“hand”
同时,也可以传递参数,如 @click=“hand(e)”

七.双向数据绑定 v-model:

 可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元素上创建双向数据绑定。就是如输入框的value值和vue实例里的一个变量能实时保持相同,不论谁改变同步更新。
如,为该标签绑定msg这个变量,同时页面渲染出来看看:

v-model=“变量名字”

 <div>
    <input type="text" v-model="msg">{{msg}}
 </div>

定义这个变量:

data() {
    return {
      msg:""
    };
 },

看效果,输入后同步更新:
在这里插入图片描述

八.变量识别标签v-html:

如给div写上v-html等于一个变量msg:

<template>
 <div v-html="msg"></div>
</template>

定义msg值里放一个h1标签:

 data() {
 return {
   msg:'<i>北极光之夜</i>'
 };

相当于直接给div生成了一个子标签 < i>北极光之夜< /i>:

在这里插入图片描述

九.八大生命周期钩子函数:

  我们把一个vue实例对象从生成(new)到被销毁(destory)的过程,称为生命周期。而生命周期函数,就是在某个时刻会自动执行的函数。

函数 调用时间
beforeCreate vue实例初始化之前调用
created vue实例初始化之后调用
beforeMount 挂载到DOM树之前调用
mounted 挂载到DOM树之后调用
beforeUpdate 数据更新之前调用
updated 数据更新之后调用
beforeDestroy vue实例销毁之前调用
destroyed vue实例销毁之后调用
北极光之夜。 北极光之夜。

生命周期详细文章地址https://auroras.blog.csdn.net/article/details/117658191

十.watch监听器:

 Vue 通过 watch 选项提供了⼀个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。例子如下:

比如我有一个input输入框,v-model双向绑定一个一个变量monitor:

<div>
   <input v-model="monitor" type="text">
 </div>

声明该变量,空字符串就好:

data() {
 return {
   monitor:""
 };

 关键来了,假如我想monitor这个变量的值一改变,就能自动识别到它的改变并执行某些操作要咋办,这就用到监听器了 watch:{…}了。他跟data(){…}和methods:{…}这些是同一级别的。

 如监听monitor,它的值一改变就触发在控制台输出“666666”这个操作:
在这里插入图片描述

data() {
 return {
   monitor:""
 };
 },
 watch:{
   monitor:function(){
      console.log(6666);
   }
 },
 ......

 在watch为monitor声明一个函数,当monitor值一改变,将会自动执行函数里的内容。
 看效果:
在这里插入图片描述

十一.watch深度监听:

 当改变⼀个对象的某个属性,需要触发监听事件时,使用第十点的基本监听可能无法触发事件,此时可以使用深度监听。

 如有一个对象 people:{name:‘Aurora’,age:18},有一个按钮,当点击该按钮时,触发事件改变 people.age 的值,监听器监听到people改变时,输出‘6666666’:

先写一个按钮和点击事件:

<template>
 <div>
   <button @click="change">BTN</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
   //对象
   people:{name:'auroras',age:18}
 };
 },
 methods: {
   //点击事件
   change(){
     this.people.age = 20;
   }
 },
 。。。略

深度监听写法如下,handler:function(){…} 和 depp:true 都是固定写法,如下:

 watch:{
    监听的对象的名字:{
      handler:function(){
         。。。这里面写要执行的操作。。。
      },
      deep:true
    }
 },

监听people对象里的age值改变,输出6666:

 watch:{
    peopel:{
      handler:function(){
         console.log(6666);
      },
      deep:true
    }
 },

看效果:

在这里插入图片描述

十二.持续更新,建议收藏

总结:

下次见啦~

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。