Vue 3 入门基础知识

入门知识

实验介绍

本章节实验主要讲解 vue 的最基本的知识点，在讲解知识点之前，我们需要介绍一下 vue.js：

Vue（发音为/vjuː/，类似于view）是用于构建用户界面的渐进框架。与其他整体框架不同，Vue从头开始设计以逐渐采用。核心库仅集中在视图层，并且易于拾取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全有能力为复杂的单页应用程序提供支持。

模版插值绑定

模版插值，就是将变量使用 {{}} 双大括号的方式在 DOM 元素中解析我们在 data() 中定义好的变量。

接下来，在上节课的实验代码中基础上，在新建：

{}

 计数器

exportdefault{

name:'BasicKnow',

data() {

 return{

   counter:

}

},

methods: {

 count() {

   this.counter++

}

}

}

从上面的代码，我们可以看出其实 vue.js 3 是兼容 vue.js 2.x 的，我们同样可以在 vue.js 3 版本使用 vue.js 2.x 的知识点，像 data()，methods。

在配置路由：

constroutes=[

{

 path:'/basic_know',

 name:'BasicKnow',

 component: ()=>import('../views/BasicKnow.vue'),

 meta: {

   title:'基础知识'

}

}

]

然后跑起服务：

npmrun serve

v-bind 绑定

除了上面的模版插值之外，我们还可以使用 v-bind，以及 v-bind 简写模式

在 data() {} 定义 msg 变量，将 msg 绑定给 title 属性：

exportdefault{

name:'BasicKnow',

data() {

 return{

   counter:,

   msg:'这是一个 button 按钮'

}

},

methods: {

 count() {

   this.counter++

}

}

}

然后我们使用鼠标移上 button 按钮，会出现一个提示语：

v-model 处理输入框

Vue还提供了一个指令，使表单输入和应用程序状态之间的双向绑定变得轻而易举：

使用标签，通过指令绑定我们上面定义好的变量：

{}

 计数器

效果如下：

v-if 条件指令

通常我们在中可以使用 if 语句来判断程序如何运行，vue.js 吸取了这点优势，我们也可以在 DOM 元素进行条件判断。假如程序员有女朋友的话，你大概会呈现以下状态：

然而这个变量其实就是你的女朋友，所以需要在 data() 里面定义变量：

exportdefault{

name:'BasicKnow',

data() {

 return{

   isSeen:true

}

},

}

所以效果如下：

v-for 循环

有了 v-if 语句，当然就会有 v-for 循环指令，只要适用于列表展示：

   {}

在 data() 定义 arr 变量：

exportdefault{

name:'BasicKnow',

data() {

 return{

   arr: ['女朋友','我想你了','我想见你了']

}

},

}