vue框架

1 vue简介

Vue.js的特点包括：

1. 响应式数据绑定：Vue.js采用了双向数据绑定的机制，当数据发生变化时，视图会自动更新，使得开发者不需要手动操作DOM。

2. 组件化开发：Vue.js支持组件化开发，将页面拆分为多个独立的组件，提高了代码的复用性和可维护性。

3. 虚拟DOM：Vue.js使用虚拟DOM技术，通过比对虚拟DOM和实际DOM的差异来高效更新页面，减少了对实际DOM的操作，提高了性能。

4. 指令系统：Vue.js提供了丰富的指令系统，如v-bind、v-if、v-for等，用于简化模板中的数据绑定和逻辑控制。

5. 生态系统丰富：Vue.js拥有庞大的生态系统，包括Vue Router用于路由管理、Vuex用于状态管理、Vue CLI用于项目脚手架搭建等工具，方便开发者构建完整的应用程序。

2 el（挂载点）

在Vue.js中，el是一个选项(option)用于指定Vue实例挂载的元素。它表示Vue实例将会控制的HTML元素，即Vue实例将会在该元素中渲染并管理数据。

通常情况下，我们在创建Vue实例时会使用el选项来指定Vue实例挂载的元素。例如：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

在上面的代码中，el: '#app'指定了Vue实例将会挂载到id为app的HTML元素上。Vue实例将会控制这个元素，并在该元素内部渲染数据。

 3 data（数据对象）

 4 指令

指令	代码示例	注意事项
v-text
v-html
v-on
v-show
v-if
v-bind
v-for
v-model

5 总结

•创建Vue示例时：el(挂载点),data(数据),methods(方法）
•v-on指令的作用是绑定事件,简写为@
•方法中通过this,关键字获取data中的数据
•v-text指令的作用是;设置元素的文本值,简写为{{}}
•v-html指令的作用是：设置元素的innerHTML

•列表数据使用数组保存
•v-bind指令可以设置元素属性,比如src
•v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

6 示例