一个前端网页有：HTML，js，css三个部分主组成，高级一点的动态页就外加后台代码。
vue：是JavaScript封装起来的框架【js---》jQuery---》vue框架】，js就JavaScript的简写，其框架作用就是控制html标签，给他数据获取数据。

一、指令的使用和数据的绑定

首先vue需要先引入包服务

<script src="https://unpkg.com/vue@3"></script>

创建时需要一个实例：vue.createApp({ }) 并且这个实例一直存在。演示数据的单向和双向绑定

<div id="app"><img v-bind:src="photoUrl" width="50">
    {{list.name}}----{{list.photoUrl}}
<p><input v-model = "text1"> {{text1}}</p>
</div>
<script>
    Vue.createApp({
      data() {
        return {
          photoUrl: "https://ts1.cn.mm.bing.net/th/id/R-C.171e8fe1aa1544a1868ab710eed82d82?rik=FLPxvVVL9C9bnQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2fallimg%2f200710%2f14-200G00Z321.jpg&ehk=Lb0IHCCZIdqYQOi28m%2borU8c1ARGbTEC%2f8WYzfwRuHo%3d&risl=&pid=ImgRaw&r=0",
          list:{name : "张三","photoUrl":"单向绑定数据用v-bind:src,简写【:src】"},
          text1:"双向绑定v-model,可以动态改变数据"
        }
      }
    }).mount('#app')
</script> 

事件绑定v-on:分离事件名="方法名"，【v-on：可以简写为@】如：v-on:click = "update" -----》@click = "update"

<div id="app">
<p><input v-model = "text1"> {{text1}}</p>
<button v-on:click = "update">单击事件修改</button>
<button @click.once = "update">可以在事件后面点修饰符，once表示只能单击一次</button>
</div>
<script>
    Vue.createApp({
      data() {
        return {
          text1:"双向绑定v-model,可以动态改变数据"
        }
      },
      methods:{
        update(){
          this.text1 ="这里是给单击事件添加的方法"
          debugger //是断点f12调试，这里用来测试单击事件的修饰符once
        }
      }
    }).mount('#app')
</script>  

指令：v-for循环和v-if条件判断

<div id="app">
  <table border="1"><!--边框为1-->
    <tbody>
      <div v-if="students.length==0">
        <h1 style="color: red;">没有数据！</h1>
      </div>
      <div v-else><!--for循环里有个排序属性:key是排序，一般根据数据库id排序如，:key="students.id"-->
        <tr v-for="(list,index) in students" :key="index"><!--根据索引下标排序-->
          <td>{{list.name}}</td>
          <td>{{list.sex}}</td>
          <td>{{list.age}}</td>
        </tr>
      </div> 
    </tbody>
  </table>
</div>
<script>
    Vue.createApp({
      data() {
        return {
          students:[{
            name : "张三",
            sex:"男",
            age:20  
          },{
            name:"李四",
            sex:"女",
            age:18         
          }]
        }
      }
    }).mount('#app')
</script> 

计算属性computed和方法methods的区别

<div id="app">
  <p>a+b={{a+b}}</p> <!--不提倡用表达式-->
  <p>a+b={{count}}</p> <!--计算属性的调用-->
  <p>a+b={{count2()}}</p> <!--方法的调用-->
</div>
<script>
    Vue.createApp({ //代码里叫组件，标签调用叫指令如：v-if判断等等
      data() { //组件data选项：用于存放数据的。
        return {
          a:5,b:10
        }
      },
      methods:{//方法：无缓存，每次调用都会执行一边方法体。
        count2(){//调用时需要带括号：count2()
          return this.a + this.b
        }
      },
      computed:{//计算属性：有缓存，不会反复调用
        count(){//调用时不需要括号，只需要方法名count
          return this.a + this.b
        }
      }
    }).mount('#app')
</script>   

二、项目构建工具vue CLI

1.转译（Babel）：因为现在浏览器无法支持这么高的语法，所以有了转译工具（高转低）将（es6-es11）转（es5）或者更靠前的低版本。
2.代码质量（ESlint）：每个人都有自己的代码风格，这个工具可以管理代码风格。
3.单文件组件（SFC）：组件=模板+js+css
4.代码压缩和优化：作用是将模板转为js代码进行编译。（模板就是指html的标签代码）
vue CLI 就是集成了上面4种工具一起的整合。需要下载安装：Node.js 环境。
安装命令：
因为node默认是国外环境，需要改回国内淘宝镜像：npm config set registry https://registry.npm.taobao.org 
然后在项目里安装【vue cli】构建工具：npm install -g @vue/cli 
使用命令创建项目：vue create projectname 
注意计算机为了安全考虑，把脚本分四个策略：
1.Restricted（默认策略）：禁止运行任何脚本和配置文件。
2.AllSigned ：可以运行脚本，但要求所有脚本和配置文件由可信发布者签名，包括在本地计算机上编写的脚本。
3.RemoteSigned ：可以运行脚本，但要求从网络上下载的脚本和配置文件由可信发布者签名； 不要求对已经运行和已在本地计算机编写的脚本进行数字签名。
4.Unrestricted ：可以运行未签名脚本。（危险！）
当我们创建不了vue项目工具时，就需要查一下策略：Get-ExecutionPolicy 返回策略名
set-ExecutionPolicy RemoteSigned一定要把策略更改为RemoteSigned 策略才能创建vue构建工具