前端学习VUE基础(一)

 

（复盘的真正目的是让自己把过去的每一天、每一次行动、每一个任务都变成自己的养分，把它们吸收化为己用）

 

html结构分析：
1、<html>最外层的结构

2、<head>
<title>这里是页面标题</title>
</head>

3、<style>这里设置文本框的样式</style>

4、<body>

<div id="app">
<p>{{ message }}</p>
<h1></h1>
<class ></class>
</div>

<script> 
new Vue({
　　el:'#app',
　　data:{
　　　　message:'Hello Vue.js!'
}
})
</script>
</body>

</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>
  
<style>
  .class1{
    backgroud:#444;
    color:#eee;
  }
</style>
  
<body>
<div id="app">
    <h1>我的第一个HTML页面</h1>
   <div v-bind:class="{'class1':use}">v-bind:class 指令</div>
</div>
  
<script>
new Vue({
  el:'#app',
  data:{
    use:false
  }
}) 
</script>
</body>
</html>

首先，在dom层中（dom是什么？就是你写的那些真实的标签，元素，比如输入框，比如div标签等等，docment首字母，docment就是元素）

我们随便写了个标签块（就是本来我们写俩个p标签，这个p标签是用来放一些文字的段落的，属于最简单的标签之一，用这个来做试验 简单！

然后为了控制它，我们在外面包了一层div标签。）然后具体要控制它做的事或者说这个标签块的设置代码在哪呢？

答案就是在script里写，这个就是专门存放js/jq/vue.js等语言的地方，死记硬背吧，这个script里就是俗称的 bom区域，就是browser的首字母。意思是放一些和浏览器交互的代码的地方。

 

posted @ 2021-08-22 15:21  软件开发技术修炼  阅读(55)  评论(0)  编辑  收藏  举报