vue学习--day one

vue学习 day one

vue以及vuecli的安装还有相关环境的配置 参考csdn的一篇博客

不过那一篇版本比较老 还需要在Dos界面中进行更新(直接vue create 文件 如果版本不对会有语法提示你安装新的vuecli并且reinstall旧的版本)

然后就是创建vue文件 在Dos界面中先cd到自己的目标文件当中,再通过vue create 文件名进行创建

接下来的一些配置选择就不说了,参考一般的网课好像都有。

必须吹爆几点

  1. vue不用下载本地文件啊啊啊 虽然还没有学相关的端口知识 但是我真的好开心 可以给别人分享我的网站了
  2. vue写完测试的时候不用刷新网站啊 特别方便 完全实时的
  • 关于如何访问localhost:8080

    我最初在尝试的时候,发现local:8080的网页怎样都打不开,上网看了一下原因,是由于端口没有被实时监听,所以我们需要在Dos界面中写一串命令来实时监听

    首先应该cd 到目标文件的目录当中
    cd vue_demo(文件名 我的文件名时vue_demo)
    再执行一个npm run serve(下面就会有实时的端口出现)
    
文本

数据绑定最常见的形式就是使用“Mustache”(双大括号)语法的文本插值

<span>Message:{{msg}}</span>

一般配合js中的==data()==设置数据

export default{
	name:"HelloWorld",
	date(){
		return{
			msg:"消息提示"
		}
	}
	//data在这实际上是一个函数 模板写法!
}
原始HTML

双大括号会将数据解释成普通文本,而不是HTML的代码,如果想输出真正的HTML,你需要使用v-html指令

<p>Using mustaches: {{rawHtml}}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
data(){
	return{
		rawHtml:"<a href='https://www.itbaizhan.com'>百战</a>"
	}
}
  • 我们的双大括号写法与v-html指令就像inner-html 和 inner-Text 的写法

  • 直接写双括号只能渲染文本 而不能渲染标签

属性:Attribute

双括号的语法不能再HTML属性中使用,然而,可以使用v-bind指令

<div v-bind:id="dynamicId"></div>
data(){
	return{
		dynamicId:1001
	}
}
//v-bind可以简写成:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dkTaercd-1683100855903)(C:\Users\杨卓\AppData\Roaming\Typora\typora-user-images\image-20230423222614225.png)]

模板语法可以将属性,文本进行动态调整

//v-bind可以简写成:


[外链图片转存中...(img-dkTaercd-1683100855903)]

**模板语法可以将属性,文本进行动态调整**

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值