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)]

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