一、vue是一套构建用户界面的渐进式框架。

        vue只关注视图层

        vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

二、vue安装

        ①独立版本：可在vue.js的官网上直接下载vue.min.js并且用<script>标签引入

        ②使用CDN方法

        ③使用NPM方法

        

        命令行工具

        vue项目打包

 三、Vue AI 编程助手：推荐插件Fitten Code 是由非十大模型驱动的 AI 编程助手，它可以自动生成代码，提升开发效率，帮您调试 Bug，节省您的时间，另外还可以对话聊天，解决您编程碰到的问题。

        Fitten Code免费且支持 80 多种语言：Python、C++、Javascript、Typescript、Java等。

四、Vue.js 目录结构

五、Vue.js起步：每个Vue应用都需要通过实例化Vue来实现

var vm = new Vue({
  // 选项
})

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

        当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

        Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

六、Vue.js模版语法

        插值

        文本：数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

        Html：使用v-html指令用于输出html代码

        属性：HTML属性中的值应使用v-bind指令

        指令：是带有v-前缀的特殊属性

                参数：参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

        在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

 v-on 指令，它用于监听 DOM 事件：

        修饰符

        修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

        用户输入：在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

        缩写：

                v-bind缩写为 ：

                v-on缩写为 @

七、条件语句：

        ①v-if

        ②v-else

        ③v-else-if

        v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

        ④v-show：使用 v-show 指令来根据条件展示元素：

        

八、循环语句：

        ①v-for：v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表：

        v-for 迭代对象：

        v-for 可以通过一个对象的属性来迭代数据：

可以提供第二个的参数为键名：

        第三个参数为索引：

        v-for迭代整数：v-for 也可以循环整数

九、Vue.js计算属性

        计算属性关键词: computed

        反转字符串

        可以使用methods来代替computed

         methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

        computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

         computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

十、Vue.js监听属性：通过 watch 来响应数据的变化。

当我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

十一、Vue.js样式绑定

        Vue.js class

        class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

        Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

        class属性绑定

        为v-bind:class设置一个对象，从而动态的切换class:

        Vue.js style(内联样式):可在v-bind:style直接设置样式：

十二、Vue.js事件处理器

        事件监听可以使用v-on指令

 

        v-on可以接受一个定义的方法来调用

        事件饰符：Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

• .stop - 阻止冒泡
• .prevent - 阻止默认事件
• .capture - 阻止捕获
• .self - 只监听触发该元素的事件
• .once - 只触发一次
• .left - 左键事件
• .right - 右键事件
• .middle - 中间滚轮事件

• <!-- 阻止单击事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- 修饰符可以串联  -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  <!-- 添加事件侦听器时使用事件捕获模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  <div v-on:click.self="doThat">...</div>
  
  <!-- click 事件只能点击一次，2.1.4版本新增 -->
  <a v-on:click.once="doThis"></a>
  

  按键修饰符：Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

•