1.MVVM

         MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View（可理解为操作界面） 的 状态和行为抽象化，让我们将视图 UI 和业务逻辑分开 它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑

2.vue框架的介绍

什么是Vue：

Vue 是一套用于构建用户界面的渐进式框架. 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三
大主流框架

 Vue的优点：

1.体积小 
2.更高的运行效率
3.双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定
4 生态丰富、学习成本低
市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件 来即用实现
快速开发 对初学者友好、入门容易、学习资料多.

3.Vue指令

v-text

作用是设置标签的文本内容 绑定后是直接显示文本，也就是说你 data 中绑定的是什么内容就直接显示什么内容， 会将标签中的内容覆盖 且v-text不会进行翻译

 如图只会显示 Vue 而不会显示<p>标签里的Vue.js

v-html

使用效果和v-text相似 不同的是  如果内容中有其他标签  v-html会将内容进行解析 并实现该标签的功能

  结果如下 可以看到 v-html的内容实现了<b>标签的功能 而v-text只是将内容显示出来

v-on

作用是为元素绑定事件  事件名不需要写 on 指令可以简写为@ 绑定的方法定义在 methods 属性中,可以传入自定义参数
如图设置点击事件并传入自定参数 m

 结果如下 点击按钮后触发事件 并显示传入的参数

 v-mode

作用是便捷的设置和获取表单元素的值  能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。实现双向绑定
如图 将data 里的吗和输入框绑定 在输入框中改变m的值 <p>标签中的吗也会随之改变

 

 

结果如下
运行结果
在输入框中改变 m的值  <p>标签显示的值也会改变 说明data中m的值随着输入框的改变而改变

v-for

作用是根据数据生成列表结构 数组经常和 v-for 结合 使用语法是
（item，index）in 数据  item 和 index 可以结合其他指令一起使用 数组长度的更新会同步到页面上是响应式的  为循环绑定一个 key 值 :key=”值” 尽可能唯一  主要用于显示后台响应的数据 
比如说 后台返回了一个装有 build对象的集合  build in buildlist 意思是在buildlist中循环拿出build 对象  build对象中的id绑定为key  lable为要在网页上显示的数据 value为拿到某个build 所获得的值
获得的value值最终会返回给 v-madle所绑定的参数

  效果如下 每选中一个楼层会获得该楼层的 id 返回给 v-model所绑定的 build1id

 

 Vue 实例生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数 据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子 的函数
beforeCreate: function () {
},
created: function () {
},
beforeMount:function(){
},
mounted:function(){
}

1. 创建前（beforeCreate）

此阶段为实例化初始后，此时数据观察和事件机制都没有形成，不能获取 DOM 节点。

2. 创建后（created）

在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成。

3.载入前（beforeMount）

挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意的是此时还没有挂在html到页面上。

4.载入后（mounted）

挂载完成，也就是模板中的HTML渲染到页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue