vue基础知识点,vue框架基础知识

　　本文主要介绍学习Vue必须掌握的关键知识。想了解vue的同学可以参考一下。

一、什么是vue

　　Vue是一组渐进式框架，用于构建用户页面。与其他大型框架不同，Vue设计为自下而上一层一层地应用。Vue的核心库只专注于视图层，不仅易于使用，而且易于与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持类库结合时，Vue还可以为复杂的单页应用程序提供驱动程序。

二、与原生JS的区别

　　我们可以通过一个小案例来论证。

　　案例：输入框中的信息实时显示在span标签中。

　　原生JS

　　身体

　　输入id=txt type=text

　　span id=con/span

　　/body

　　脚本

　　document.querySelector(#txt )。addEventListener(keyup ，function () {

　　document . query selector(# con)。innerHTML=this.value

　　})

　　/脚本

　　某视频剪辑软件

　　身体

　　div id=应用程序

　　输入id= txt type= text v-model= msg

　　span id= con { msg } }/span

　　/div

　　/body

　　script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script

　　脚本

　　let app=new Vue({

　　埃尔： #app ，

　　数据：{

　　邮件：“”

　　}

　　})

　　/脚本

　　区别：明显的区别是省略了DOM元素的操作。

　　总结：

　　创建DOM元素，并使其成为Vue实例的挂载点。Vue实例中的所有数据都可以在挂载点中使用。

　　div id=app

　　/div

　　通过新的Vue创建实例对象

　　El属性指定当前Vue实例的挂载点。

　　数据是模型数据，依赖于Vue的当前实例。可以通过控制台输入app.msg查看数据。

　　您可以通过插值表达式使用数据中的数据。

三、数据绑定

　　数据绑定是在挂载点显示Vue实例的数据属性中的数据。

1、内容绑定

　　将数据中的数据显示为内容。

　　div id=应用程序

　　p{{msg}}/p

　　/div

　　如果你想显示html标签，只需在标签中使用v-html。

　　div id=应用程序

　　p v-html{{msg}}/p

　　/div

2、属性绑定

　　使用data中的数据作为元素的属性值。

　　用v-bind就行了。属性可以是内置的，也可以是自定义的。简短形式：

　　p v-bind:id= id :class= class { { msg } }/p

3、表单标签的值

　　您可以使用v-model指令在表单标签中使用双向数据绑定。它会根据控件类型自动选择正确的方法来更新元素。

　　1.文本框和文本字段

　　输入类型： text v-model=msg/input

　　文本区v-模型：“msg”文本区

　　2.复选框

　　div id=应用程序

　　“游泳”标签

　　input type= checkbox id=swim v-model= is swim /

　　Label= read 读数/label

　　输入类型= checkbox id= read v-model= is read

　　Label=“玩”游戏/label

　　input type= checkbox id= play v-model= is play

　　/div

　　script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script

　　脚本

　　let app=new Vue({

　　埃尔： #app ，

　　数据：{

　　是的，

　　isRead:没错，

　　isPlay:假

　　}

　　})

　　/脚本

　　单个盒子

　　div id=应用程序

　　Label= man 男性/label

　　输入类型=无线电 id=男人值=男人 v-模型=性别

　　Label=女性女性/label

　　输入类型=单选 id=女性值=女性 v-model=性别

　　{ {性别}}

　　/div

　　script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script

　　脚本

　　let app=new Vue({

　　埃尔： #app ，

　　数据：{

　　性别：“”

　　}

　　})

　　/脚本

　　下拉框

　　div id=应用程序

　　选择垂直模型=城市

　　选项禁用值= 请选择/选项。

　　Option=北京北京/option

　　Option= sh 上海/option

　　/选择

　　{ {城市}}

　　/div

　　script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script

　　脚本

　　let app=new Vue({

　　埃尔： #app ，

　　数据：{

　　城市：“”

　　}

　　})

　　/脚本

　　传递参数

　　div id=应用程序

　　按钮v-on: click=显示信息( hello )按钮/按钮

　　/div

　　script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script

　　脚本

　　let app=new Vue({

　　埃尔： #app ，

　　数据：{

　　标题：“元旦”

　　},

　　方法：{

　　showInfo:函数(消息){

　　console.log(消息)

　　}

　　}

　　})

　　/脚本

四、事件处理

　　您可以使用v-on指令来监听DOM事件，并在被触发时运行一些JavaScript代码。

　　div id=app

　　按钮v-on:click= greet /按钮

　　/div

　　var app=新Vue({

　　埃尔： #app ，

　　数据：{

　　名称：“holle Vue”

　　},

　　//在方法中定义方法

　　方法：{

　　问候：功能（事件){

　　//这个在方法中指向某视频剪辑软件实例

　　alert(this.name ！)

　　如果（事件){

　　alert(event.target.tagName)

　　}

　　}

　　})

五、列表渲染

　　我们可以用迭代指令基于一个数组来渲染一个列表106 .迭代指令需要使用项目中的项目形式的特殊语法，其中项目是源数据数组，而项目则是被迭代的数组元素的别名。

　　div id=应用程序

　　保险商实验所

　　李v-for=博客中的博客{ blog } }/李

　　/ul

　　保险商实验所

　　李代表"斯图在斯图"姓名：{{stu.name}}年龄：{ {斯图。年龄} }/李

　　/ul

　　/div

　　var应用=新Vue({

　　埃尔： #app ，

　　数据：{

　　博客：[三国演习,西游记,老夫子],

　　stus:[

　　{姓名：小明，年龄：18},

　　{姓名：小张，年龄：11},

　　{姓名：小王，年龄：12}

　　]

　　}

　　})

　　从服务器中获取数据

　　身体

　　div id=应用程序

　　保险商实验所

　　Li v-for= item in books { item。title } }/Li

　　/ul

　　/div

　　脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本

　　脚本

　　let app=new Vue({

　　埃尔： #app ，

　　数据：{

　　书籍：[],

　　},

　　已创建：函数(){

　　fetch(data.json )。然后((res)={

　　return res.json()

　　})。然后((res)={

　　this.books=res

　　})

　　},

　　})

　　/脚本

六、条件渲染

1、v-if指令用于条件性的渲染一块内容

　　div v-if=truehello Vue/div

2、也可以使用v-else添加一个else块

　　div v-if=falsehello Vue/div

　　div-else hello world/div

3、在template元素上使用v-if条件渲染分组

　　当需要切换多个元素的时候可以把控制显示添加到模板内，因为模板元素是一个不可见元素，渲染的结果将不包含模板元素

　　模板v-if=确定

　　氕标题/h1

　　p第一段/p

　　第2段/页

　　/模板

4、v-if-else顾名思义就是充当v-if的else if块，可连续使用

　　div v-if=score==100

　　满分

　　/div

　　div v-else-if=score=80 score100

　　良好

　　/div

　　div v-else-if=score=70 score=60

　　及格

　　/div

　　div v-else-if=score60

　　不及格

　　/div

　　div-否则

　　请输入正确的成绩

　　/div

5、v-show同样是根据条件展示元素

　　div v-show=okhello/div

　　与控制显示不同的是虚拟展示的元素会始终被渲染并保留在数字正射影像图中。

　　一般来说，v-if有更高的切换开销，而虚拟展示有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用虚拟展示较好；如果在运行时条件很少改变，则使用控制显示较好。

七、Class与Style绑定

　　我们可以使用v型装订来绑定类名或内联样式

　　绑定类，以动态的切换类，也可以与普通的班级共存

　　div class= static v-bind:class= { active:is active， text-danger:hasError}/div

　　数据{

　　isActive:真的

　　错误

　　}

　　渲染结果为：

　　div class=静态活动/div

　　绑定内敛级样式

　　语法虚拟绑定：样式

　　div v-bind:style= { color:active color，fontSize:fontSize px}/div

　　数据：{

　　主动颜色：红色，

　　丰齐：13

　　}

　　也可以直接绑定到一个样式对象中，这样会使模板更清晰

　　div v-bind:style=active/div

　　数据：{

　　活动：{

　　颜色：红色，

　　字体大小：" 30px "

　　}

　　}

八、计算属性

　　当我们需要计算模板中的值时可以使用计算属性（computed）

　　div id=#app

　　p{{message}}/p

　　p{{reverseMessage}}/p

　　/div

　　var应用=新Vue({

　　埃尔： #app ，

　　数据：{

　　消息："你好"

　　},

　　计算值：{

　　reverMessage(){

　　返回this.message.split( ).反转()。联接("")

　　}

　　}

　　})

九、侦听器

　　侦听器可以观察和响应某视频剪辑软件实例上的数据变动

　　div id=应用程序

　　差异

　　问题：输入v-model=问题

　　/div

　　div{{answer}}/div

　　/div

　　var应用=新Vue({

　　埃尔： #app ，

　　数据：{

　　问题： ,

　　回答：[],

　　},

　　观察：{

　　问题（新值){

　　this.getAnswer()

　　}

　　},

　　方法：{

　　getAnswer: function () {

　　让那个=这个

　　axios。get( http://localhost:3000/answer。PHP？问=这个。问题)。然后（函数（响应){

　　that.answer=response.data

　　})

　　}

　　}

　　})

　　服务器端编程语言(专业超文本预处理器的缩写)代码

　　？服务器端编程语言(专业超文本预处理器的缩写)

　　$ question=$ _ GET[ q ]；

　　$ answer=[]；

　　开关($问题){

　　案例小：

　　$answer=[小孩子,小姐姐,小鲜肉];

　　打破；

　　案例小鲜肉：

　　$answer=[小鲜肉是什么,小鲜肉有什么用,小鲜肉可以吃吗];

　　打破；

　　案例小鲜肉演戏：

　　$answer=[小鲜肉演戏太假,小鲜肉被封杀,小鲜肉不会做演员];

　　打破；

　　}

　　echo JSON _ encode($答案);

　　？

　　演示

　　nswer=response.data

　　服务器端编程语言(专业超文本预处理器的缩写)代码

　　` ` php

　　？服务器端编程语言(专业超文本预处理器的缩写)

　　$ question=$ _ GET[ q ]；

　　$ answer=[]；

　　开关($问题){

　　案例小：

　　$answer=[小孩子，小姐姐，小鲜肉]；

　　打破；

　　案例小鲜肉:

　　$回答=[小鲜肉是什么，小鲜肉有什么用，小鲜肉能吃吗]；

　　打破；

　　案例小鲜肉演技，

　　$回答=[小鲜肉演技太假，小鲜肉被封杀，小鲜肉当不了演员]；

　　打破；

　　}

　　echo JSON _ encode($答案)；

　　？

　　证明

十、插槽

插槽内容

　　var el_div={

　　模板：

　　div slot/插槽/分区

　　}

　　div id=app

　　埃尔-迪夫

　　Span槽内容/span

　　/el-div

　　/div

　　呈现组件时，该槽将替换为span slot content /span。插槽可以包含任何模板代码。

后备内容

　　有时为槽设置特定的备份(即默认)内容是有用的，并且只有在没有提供内容时才会呈现。例如，在提交按钮组件中：

　　按钮类型=提交

　　插槽/插槽

　　/按钮

　　在大多数情况下，我们可能希望在这个按钮中呈现文本“提交”。要使用“提交”作为备份内容，我们可以将它放在slot标签中：

　　按钮类型=提交

　　插槽提交/插槽

　　/按钮

　　现在，当我在父组件中使用submit-button时，没有提供任何槽内容：

　　提交按钮/提交按钮

　　将呈现替代内容“提交”:

　　按钮类型=提交

　　使服从

　　/按钮

　　但是如果我们提供内容：

　　提交按钮

　　救援

　　/提交按钮

　　则提供的内容将被呈现以替换备份内容：

　　按钮类型=提交

　　救援

　　/按钮

具名插槽

　　有时我们需要多个插槽。例如，对于具有以下模板的基本布局组件：

　　div class=容器

　　页眉

　　！-我们想把标题放在这里-

　　/页眉

　　主要的

　　！-我们希望把主要内容放在这里-

　　/main

　　页脚

　　！-我们想把页脚放在这里-

　　/页脚

　　/div

　　在这种情况下，slot元素有一个特殊的属性：name。该属性可用于定义附加插槽：

　　div class=容器

　　页眉

　　插槽名称=header/slot

　　/页眉

　　主要的

　　插槽/插槽

　　/main

　　页脚

　　插槽名称=页脚/插槽

　　/页脚

　　/div

　　没有名称的插槽出口将具有隐含的名称“默认”。

　　当向命名槽提供内容时，我们可以在模板元素上使用v-slot命令，并将其名称作为v-slot的参数提供：

　　基本布局

　　模板v型槽：标题

　　h1这里可能有一个页面标题/h1

　　/模板

　　pA段为主要内容。/p

　　再买一个。/p

　　模板v形槽：页脚

　　pHere的一些联系信息/p

　　/模板

　　/base-布局

　　现在，模板元素中的所有内容都将被传递到相应的槽中。没有用v-slot包装在模板中的任何内容都将被视为默认slot的内容。

　　但是，如果您希望更加明确，您仍然可以将默认槽的内容包装在模板中：

　　基本布局

　　模板v型槽：标题

　　h1这里可能有一个页面标题/h1

　　/模板

　　模板v形槽：默认

　　pA段为主要内容。/p

　　再买一个。/p

　　/模板

　　模板v形槽：页脚

　　pHere的一些联系信息/p

　　/模板

　　/base-布局

　　任何一种文字都会呈现：

　　div class=容器

　　页眉

　　h1这里可能有一个页面标题/h1

　　/页眉

　　主要的

　　pA段为主要内容。/p

　　再买一个。/p

　　/main

　　页脚

　　pHere的一些联系信息/p

　　/页脚

　　/div

　　以上是学习Vue必须掌握的关键知识的详细介绍。更多关于Vue的关键知识，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。