vue指令

vue的基础用法和基础指令

在官网中可以看到vue在基本的使用中需要具备的一些文件
首先我们先要定义一个区域,在这个区域中展示自己的vue内容,定义一个div就是 

这就是一个div

定义好这个容器下面在开始写js代码的时候引入一下vue文件,vue也就是一个对象一个实例对象(就是一个被new调用的一个对象在这个实例对象中有一些配置,我先简单写一些基础的指令和用法)
这个网站在官网看得到(Vue.js)

在引入这个文件之后就开始实例这个对象
创建这个vue的实例
创建好这个实例
创建好之后就开始配置这个实例
首先确定要挂载的地方(也就是你的这个vue实例对象要作用的地方)
使用el这个属性进行选择这个选择器按照js标准来的下面选中我们定义好的app div
在这里插入图片描述
vue是通过数据驱动dom所以我们少不了数据,在这里data这个配置项建议写成函数的形式因为方便后期的数据使用不会造成印象
里面的数据定义我们可以是任何类型的数据包括复杂;这里面的数据在上面就可以直接使用了这个时候我们就用到了模板语法
在这里插入图片描述

模板语法

在这里插入图片描述

在vue中插值表达式是vue框架提供的一种html模板绑定数据的方式,也是页面动态渲染的数据的一种方式这种方式可以把数据直接展示在页面中   {{数据的名字}}

###也可以写一下运算和调用
1.js表达式
{{数据名a+数据名b}}(运算和js的一样);
2.使用函数
{{数据名字.函数名字(参数)}};
3.三目运算
{{数据判断条件 ? 如果成立展示的:不成立展示的}}

指令

(在vue中指令是很重要的也是一些基础)

v-text和v-html

先从这两个基础的说起把
		v-text就是想当与原生js中的innerTEXT
		v-text == innerText 简写的方式是{{}}
		v-html == innerHtml 简写的方式{{{}}}(这个简写已经被弃用了)
		这两个实现的效果是一样的,
		![在这里插入图片描述](https://img-blog.csdnimg.cn/20210322221937839.png
		v-html 相当于原生js的innerHTML

在这里插入图片描述

v-show 和v-if

(这两个都是可以控制元素的显示和瘾藏的但是他们有这本质的不同)
-- v-show控制元素的display属性 v-show="这里面写的是布尔值";
-- v-if是通过控制标签是否存在dom中来控制标签是否显示的 v - if = "这里也是布尔"
		布尔值的地方也可以做一些简单的运算(三目运算也可以写)	
		要注意两个控制元素的区别
  • v-if和v-show的差别
  • v-show通过控制标签的display属性来控制标签是否显示的,当为false的时候为none,true的时候就是他本身
  • v-if是通过控制标签是否存在dom中来控制标签是否显示的
  • v-show 有更高的初始化开销,就是不利于初始化的优化
  • v-if 有更高的切换开销。就是不利于切换

(https://img-blog.csdnimg.cn/cover1/237894441851158706.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,image_MjAyMDA3MTUxNjIxMDEzOC5wbmc=,size_16,color_FFFFFF,t_70,image/resize,m_lfit,w_962#pic_center

v-bind

	(这是一个属性的绑定通过这个指令个标签绑定一些属性属性可以需要的数据中的内容,
	这样我们就可以很方便的修改属性里面的内容)
			v- bind : 属性;一搬简写为:属性

List item
在这里我们可以绑定一些复杂的class类名

  • 第一种自己操作class字符串
    在这里插入图片描述
  • 绑定一个数组 (这样数组中的所有都会被绑定)
    在这里插入图片描述在这里插入图片描述
  • 绑定一个对象,对象val为true的时候可以绑定上去绑定的是key
    在这里插入图片描述
    在这里插入图片描述

    v-on

     (v-on这个指令是用来绑定事件的) 
     	v-on :事件类型="事件名字"
     	或简写为: @事件类型 = "事件名字"
    

在这里插入图片描述
当然说到事件就带说vue的另一个配置了,methods:{}在这个vue配置对象中写的是一些函数处理事件
在这里插入图片描述
说一下这个参数的传递 在这个参数中如果想要获取事件对象那么就要在调用的时候最后一个参数传入以个固定的$event(注意这个一定要放在最后面);这是传入参数并且需要获取事件对象的时候,
在这里插入图片描述
如果不传参数需要事件对象那么在调用的时候随便把传入一个参数那么在里面调用的就是这个事件对象
在这里插入图片描述
提到事件就要提到一个修饰符修饰符的使用一般都是可以直接在调用的时候直接点调用的
@事件类型.修饰符=“事件名”
在这里插入图片描述

v-on的指令修饰符
  • 键盘按键修饰符:可以使用按键名字,也可以使用键盘码keycode(上面的图片就用到了这个修饰符,具体对应的可自行百度也可以打印出事件对象事件对象中都是有这些的)

  • .stop 阻止事件冒泡

  • .capture 事件进行捕获

  • .prevent 阻止默认事件

  • . once 事件只会执行一次

  • self 事件只会作用给标签本身

  • .passive 这个修饰符直接告诉浏览器这个代码没有阻止默认事件的不用等待了直接执行吧

v-for

(这个指令是一个循环指令在这个指令中方便我们直接使用数组数据进行渲染页面)

如果一个值的话就是取这个对应的值两个的话第二个表示对应的下标(值,下标)
在这里插入图片描述

在这里插入图片描述
在使用这个v-for的时候一般后面都要加一个key值这个是一个唯一标识,不设置的话他默认的就是下标,但是这个下标一般都是可变的所以要绑定一个固定的一般使用唯一的id
在这里插入图片描述
遍历后就直接可以使用插值表达式进行渲染,注意这个在那个标签上面使用这个v-for那么这个这个标签就会被直接循环遍历出来,

v-model

	表单元素的双向绑定,在标签上加上这个元素那么就就可以在一些from表单中对data中绑定的数据进行渲染和改变
	同时要注意这个属性会忽略表单元素 value、checked、selected   所有要在一开始的vue实例中就对这个元素进行声明

v-model其实就是这种语法的语法糖

<input v-bind:value='message' v-on:input='message = $event.target.value' />

	<input type='text' v-model='message'>

data: {
	message: 'message默认值'
}


这种语法的绑定也可绑定很多的单选框多选框,通过绑定同一个数据实时进行改变可以对类名以及一些元素的样式进行动态的添加和删除,vue中最大的特点就是这个数据的双向绑定 ,在这里要注意同input的选择框中选中和未选中的状态通过布尔值确定,当然双向绑定也可以设置一些点击显示和隐藏这时候就要注意使用数据,

  • 在插值表达{{}}中的数据直接写数据的名字就可以了,
  • 在metudos事件中注意调用数据的时候要通过this.数据名进行调用,(当然调用vue中的一些方法也是这样进行调用的)注意this!!!
已标记关键词 清除标记
<p> <span style="background-color:#FFE500;color:#000000;font-size:14px;"><b>【超实用课程内容】</b></span> </p> <ul> <li> <span style="color:#000000;font-size:14px;">通过对一个经典后台管理页面的创建和增删查改内容的讲解,把</span><span style="color:#000000;font-size:14px;">vuejs框架的关键知识点都穿插讲到。</span> </li> <li> <span style="color:#000000;font-size:14px;">包括如何搭建环境,vuejs常用指令,使用ElementUI快速搭建页面,各类表单的创建和验证,vue组件使用,数据传递的各种方式,前端如何模拟数据,以及如何与后端接口联调等等。</span> </li> <li> <span style="color:#000000;font-size:14px;">为了让大家能构造出一个规范、安全的前端系统,课程的最后还介绍了防xss攻击的一些注意事项和代码规范等内容。</span> </li> </ul> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b><br /> </b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b>【课程如何观看?】</b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;"><span style="color:#000000;">PC端:</span><a href="https://edu.csdn.net/course/detail/26277"><span style="color:#000000;">https://edu.csdn.net/course/detail/26277</span></a></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">移动端:CSDN 学院APP</span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">本课程为录播课,课程永久有效观看时长,但是大家可以抓紧时间学习后一起讨论哦~</span> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="line-height:24px;color:#000000;font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span> </p>
相关推荐
<p style="font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;font-size:14px;background-color:#ffffff;"> <span style="font-size:16px;color:#009900;"><span><span></span></span></span> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <strong class="ql-author-51078574"><span style="color:#337FE5;font-size:18px;"><img src="https://img-bss.csdnimg.cn/202012100801272351.png" alt="" /><br /> </span></strong> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <strong class="ql-author-51078574"><span style="color:#337FE5;font-size:18px;"></span></strong> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <strong class="ql-author-51078574"><span style="color:#337FE5;font-size:18px;"><br /> </span></strong> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <br /> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <br /> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <span style="color:#337FE5;font-size:18px;"><strong>前端人年终技术升级</strong></span> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <span style="color:#337FE5;font-size:18px;"><strong>2h极速入门Vue3.0</strong></span> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <br /> </p> <p> <br /> </p> <p> <span> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">年终岁尾,又到了打工人写总结的时候,各位前端工程师,今年你的总结里是否有“Vue3.0”的身影呢?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">9月Vue3.0问世,对前端人来说,这是技术升级的一大步,同样也是一场学习效率的角逐。</span> </p> <p style="font-size:11pt;color:#494949;">   </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>不论你是:</strong></span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">Vue2.x的老用户<strong><span style="color:#337FE5;font-size:18px;">  or  </span></strong>没有接触过Vue的小白;</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">前端工程师  <strong><span style="color:#337FE5;font-size:18px;">or</span></strong>  想从事前端岗位的学生</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">只要你与前端工作有关, Vue3.0的问世都可能是你脱颖而出的好机会!</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">抢先进阶,成为首批Vue3.0开发者,升职、加薪、找工作一路绿灯!</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">你为Vue3.0入门,准备了多少学习时间?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">三天?五天?还是七天?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">完全不需要!<strong>本门课程可以帮您在2小时内极速入门</strong>。</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong><span><span style="color:#337FE5;"><span> </span></span></span></strong></span> </p> <p class="ql-long-51078574 ql-align-center" style="text-align:left;" align="center"> <span style="color:#337FE5;font-size:18px;"><span style="font-size:18px;color:#337FE5;"><strong>即刻学习</strong></span></span> </p> <p class="ql-long-51078574 ql-align-center" style="text-align:left;" align="center"> <span style="color:#337FE5;font-size:18px;"><span style="font-size:18px;color:#337FE5;"><strong>年终完成项目升级</strong></span></span> </p> <p class="ql-long-51078574 ql-align-center" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <br /> </p> <p> <br /> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">Vue在全球拥有超130万用户,在不同场景中均有应用;在国内Vue是最火热的前端框架,迭代后Vue3.0框架<strong>更快捷、精悍,容易维护,同时还添加了新特性</strong>,对于前端工作者来说,这是一次重要的进阶。 </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong><span style="color:#337FE5;">To </span>学生党&求职者:</strong>提升简历丰富度、提高自身价值,增加面试成功的几率</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong> <span style="color:#337FE5;">To </span></strong><strong>前端工程师:</strong>完成现有项目的优化升级,全面适配Vue3.0,年终总结上又可以添上一笔啦!</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><span> </span></span> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <span style="font-size:18px;color:#337FE5;"><strong>精华知识+名师指导</strong></span> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <span style="font-size:18px;color:#337FE5;"><strong>Vue小白也能快速进阶</strong></span> </p> <p> <br /> </p> <p> <br /> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><span> </span></span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>问:</strong>没有用过Vue2.0,可以直接学习Vue3.0吗?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>答:</strong>没问题,本门课程着重于基础夯实,Vue小白也能轻松掌握。</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>问:</strong>学完本门课程,我可以得到什么?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>答:</strong>你可以建立对Vue知识的认知;</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">      了解Vue的基本使用与调试方法;</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">      掌握Vue的常用指令。</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>问:</strong>2个小时的课程,知识要点全面吗?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>答:</strong>课程围绕Vue3.0入门开讲,全套知识要点浓缩在2个小时的课程中,学员每一分钟都可以Get满满干货!</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>问:</strong>师资力量有保障吗?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>答:</strong>本门课程邀请到了南京大学软件工程硕士汤小洋,作为CSDN学院金牌讲师,汤小洋老师在本站拥有超15万学员。</span> </p> <p style="font-size:11pt;color:#494949;">  <span style="font-size:11pt;">汤小洋老师曾就职于擎天科技、中软国际、华为等上市公司,从事软件开发及软件教育培训多年,具有丰富的实战经验,授课耐心细致,通俗易懂,风趣幽默,善于将复杂问题简单化,曾为多家知名企业进行软件开发实训。</span> </p> <p> <br /> </p> <p style="font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;font-size:14px;background-color:#ffffff;"> <span style="font-family:-apple-system, BlinkMacSystemFont, 'font-size:15px;background-color:#FFFFFF;color:#121212;"><span style="font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;"></span></span> </p>
<p> <span style="font-size:24px;"><img src="https://img-bss.csdn.net/202002111502403886.png" alt="" /><br /> </span> </p> <p> <span style="font-size:24px;"><img src="https://img-bss.csdn.net/202002111502521739.jpg" alt="" /><br /> </span> </p> <p> <span style="font-size:24px;">本课程是Vue的快速入门课程,涉及到的课程知识点:Vue环境的快速搭建, 会使用Vue的生命周期的钩子函数; 会使用vue常见指令;会使用vue计算属性和watch监控;会编写Vue组件;掌握组件间通信,会创建Vue实例,知道Vue的常见属性</span> </p> <br /> <br /> <span style="font-size:24px;">大家都知道涛哥最关心的是找工作,这段时间出去面试的时候会经常会被问及到Vue相关的知识,所以涛哥迫不及待的赶紧出了一版Vue相关的教程,有人问:我们做后台会前台干什么呀?是因为现在的公司老板都想招复合型的人才,招一个Java开发回来恨不得前后台都会,所以我们Java开发人员也要掌握一些前端相关的技能。Java这边现在前端用的比较多的就是VUE,所以大家还是要赶紧学习起来,为了你不被淘汰,为了你能快速适应公司的发展速度,快速找到一份满意的工作,赶紧学起来吧。本课程是Vue的快速入门课程,涉及到的课程知识点:Vue环境的快速搭建,?会使用Vue的生命周期的钩子函数;?会使用vue常见指令;会使用vue计算属性和watch监控;会编写Vue组件;掌握组件间通信;</span><br /> <br /> <span style="font-size:24px;">用2小时看完,就可以快速上手公司里的项目,后期还会有实战项目上线,请大家持续关注。</span><br /> <br /> <span style="font-size:24px;"></span>
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页