vue组件和JavaScript函数开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天，点击

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天，点击查看活动详情

关于vue的介绍可以参考：Vue.js框架 - 掘金 (juejin.cn)

今天我们主要学习了vue的基础知识。

安装环境

只需要安装一个node.js和HBuilder X。

Node.js解压后如图

复制当前路径，然后去环境变量path里面配置。

》怎么找到环境变量？右键“我的电脑”--“属性”--“高级系统设置”--“环境变量”

当前系统变量path里面，点击新建

把刚才复制路径粘贴进去

如图表示node.js安装成功

HBuilder X 直接解压后打开就安装成功了

在这里：view相当于div标签。

组件

一个简单网站大致如图分布，但是我们不可能在一个vue文件里面书写所有代码，所以我们需要分部分，比如把header分出来。

在HBuilder X里面，初始项目如下

怎么新建组件？

右键项目名，创建目录components
在目录components新建一个header的vue文件
给view添加class，然后在style里面书写样式
打开pages下面的index.vue
在scrip里面通过import header from "@/components/header.vue"引入子组件。
通过components:{header},注册组件
然后在index.vue的view里面引入<header></header>使用组件

胡须表达式：{{数据项}}

表达式里面可以进行运算，可以调函数，可以调用对象的属性

指令

写在标签上面的以v-开头的自定义属性就是指令

v-test & v-html

可以拿到数据项里面的数据

v-if,v-else-if v-else

和if else相似

在data里面添加score，定义为59分，在view里面加入

<view v-if="score>=90">优</view>
<view v-else-if="score>=80">>良</view>
<view v-else-if="score>=60">>中</view>
<view v-else>差</view>

输出：差

v-for 遍历数组或者对象

<view v-for="{item,index} in arr":key="index">

<view v-for="{item,key,index} in obj":key="index">

首先在data里面添加arr和obj的数据

这里可以发现，我们定义了三类数据，一个是arr数组，一个是student对象，一个是外层数组内层对象的students

按照上面规则，那么访问数组：

<view v-for="(item,index) in arr">数组{{item}}</view>

访问对象： <view v-for="(value,key2,index) in student">对象{{value}}</view>

访问外层数组内层对象

JavaScript函数

函数=把功能代码封装一起的形式

函数关注两个对象：1.函数声明。2.函数调用

       声明
	function fName(){
	  statemnet;
	}
	调用
	fName()

function fName(形式参数){ statemnet; return result; }

如果函数里不写return,则函数会返回undefined,可以根据需要判断是否有返回值

函数的声明有两种方式

声明式

function fnName(){}

表达式

var fnName=function(){}

它作为事件处理函数/方法

事件：由一个动作参数一个接口

事件源：发生事件的html元素
事件句柄：比如鼠标的点击 onclick ondblclick双击等
事件方法事件处理函数上面说的函数
事件对象事件处理函数声明时的形参

<div  onclick="handleClick()"></div>
function handleClick(e){

}

div 事件源

onclick句柄

handleClick()事件处理函数

e事件对象（事件目击者）

vue组件和JavaScript函数