Vue学习笔记2——创建一个Vue项目

1、创建一个Vue项目

vue官方文档:

https://cn.vuejs.org/

打开命令行界面( “win+R"再输入"cmd”),切换位置到指定的位置创建vue项目:

d:		//切换到d盘
dir		//查看d盘中有哪些文件
cd ProjectCode		//切换到文件ProjectCode中
npm init vue@latest	//创建vue项目

如果不确定是否要开启某个功能,你可以直接按下回车键选择No。在项目被创建后,通过以下步骤去装依赖并启动开发服务器:

cd <your project name>	
npm install			// 可以用cnpm
npm run dev			//开始运行vue项目
Ctrl键+C 			//退出vue项目

在这里插入图片描述

访问网址如下图,即项目创建成功:在这里插入图片描述

2、Vue项目的目录结构

可以通过VS Code或者Hbuider等软件打开刚才创建项目并对它进行管理,我这里使用的是HbuiderX,下图是一些文件介绍:
在这里插入图片描述
之前执行 "npm install"就是为了生成文件夹 “node_modules”

3、模版语法

Vue使用一种基于HTML的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML,可以被符合规范的浏览器和HTML解析器解析。

文本插值
最基本的数据绑定形式是文本插值,它使用的是"Mustache"语法 (即双大括号)。

下面举个例子来演示一下,Vue自带很多样式,在src-components中的文件用不到的话可以全部删除,与此同时App.vue中的内容也应当删除,只保留原始框架就行了。
在这里插入图片描述

<template>
	<h3> 模版语法 </h3>
	<p>{{ msg }}</p>			//双大括号
	<p>{{ number + 1 }}</p>		//大括号中可以是表达式
</template>

<script>
export default{
	data() {
		return{
			msg:"神奇的语法",
			number:10
		}
	}
}
</script>

4、属性绑定

双大括号不能在HTML attributes中使用。想要响应式地绑定一个attribute,应该使用v-bind 指令:

<template>
	<div v-bind:id="dynamicId" v-bind:class="dynamicClass">测试</div>
</template>

<script>
export default{
	data() {
		return{
			dynamicClass:"appClass",
			dynamicId:"appid"
		}
	}
}
</script>

v-bind指令指示Vue将元素的id attribute 与组件的dynamicld 属性保持一致。如果绑定的但是null 或者undefined,那么该attribute将会从渲染的元素上移除。

因为v-bind 非常常用,官方提供了特定的简写语法:

<div :id="dynamicId" :class="dynamicClass"></div>

5、条件渲染

新建一个页面:
在这里插入图片描述

v-if
v-else
v-else-if
v-show

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值