Vue.js 学习总结

1.v-text 指令

• 作用: 获取data数据, 设置标签的内容。
• 注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容

2.v-html 指令

• 作用: 设置元素的 innerHTML (可以向元素中写入新的标签)。

 

3.v-on 指令

• 作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click=“方法”。
• 绑定的方法定义在 VUE实例的, method属性中。

4.v-show 指令

• 作用: v-show指令, 根据真假值,切换元素的显示状态。

5.v-if 指令

• 作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )。

6.v-bind指令

• 作用: 设置元素的属性 （比如:src,title,class）。

7.v-for 指令

作用: 根据数据生成列表结构。

8.v-on 指令补充

• 传递自定义参数 : 函数调用传参。
• 事件修饰符: 对事件触发的方式进行限制。

9.v-mode 指令

• 作用: 获取和设置表单元素的值(实现双向数据绑定)
• 单向绑定: 就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
• 双向绑定: 用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。

10.computed 计算属性

• 在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读
• computed 的作用: 减少运算次数, 缓存运算结果. 运用于重复相同的计算。

11.watch 侦听器

• Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。
• 当有一些数据需要随着其它数据变动而变动时，可以使用侦听属性。

12.filter 过滤器

• 过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

局部过滤器

全局过滤器                                                                                                                                         

13.Component 组件

• 组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。

全局组件 

局部组件

组件与模板分离

14.vue图片转换案例。

15.vue计算总价案例。

16.模板语法

Vue.js的模板语法采用了类似HTML的模板语言。模板语法可以很方便地渲染数据、绑定事件和展示组件等。下面是一个Vue.js模板语法的示例：

在上述示例中，我们定义了一个Vue.js组件。组件包含一个模板和一个JavaScript脚本。模板中的{{ message }}表示数据绑定，它会将message变量的值渲染到模板中。@click是一个事件绑定指令，它会在按钮被点击时调用updateMessage方法。

17.生命周期钩子

Vue.js的生命周期钩子是一种在组件生命周期中执行代码的方式。生命周期钩子可以用来初始化数据、执行异步操作、监听事件和清理资源等。下面是Vue.js的一些常见生命周期钩子：

beforeCreate：在实例被创建之前调用。

created：在实例被创建之后调用，但是DOM还没有被挂载。

beforeMount：在DOM被挂载之前调用。

mounted：在DOM被挂载之后调用。

beforeUpdate：在数据更新之前调用。

updated：在数据更新之后调用。

beforeDestroy：在实例被销毁之前调用。

destroyed：在实例被销毁之后调用。

下面是一个使用生命周期钩子的Vue.js组件的示例：

在上述示例中，我们定义了一个简单的Vue.js组件，并在该组件中使用了常见的生命周期钩子。当组件被创建、挂载、更新和销毁时，控制台会输出相应的日志信息。

18.1、使用vue过渡类名实现动画

18.1、使用vue自定义动画的类名前缀（v-）

19.vue常用指令小结：
v-on：事件绑定 简写@ <标签 @事件名称="函数()"></标签>

v-text：输出文本内容到标签体中 不会解析html标签 <标签 v-text="..."></标签>

v-html：输出文本内容到标签体中 会解析html标签 <标签 v-html="..."></标签>

v-bind：为html标签自带属性绑定数据 简写: <标签 :标签属性="..."></标签>

v-model：用于输入框实现数据双向绑定 <标签 v-model="..."></标签>

v-for：遍历数据 <标签 v-for="(元素,索引) in 数组|集合">{{元素}}</标签>

v-if：控制标签显示和隐藏 <标签 v-if="boolean类型的值"></标签>

v-show：控制标签显示和隐藏 <标签 v-show="boolean类型的值"></标签>

20.总结

Vue.js是一种流行的前端框架，可以用于构建现代化的Web应用程序。本文介绍了Vue.js的一些核心概念和语法，包括组件、模板、数据绑定、计算属性、生命周期钩子和指令。通过学习这些内容，你可以更好地理解Vue.js的工作原理，并且能够更加高效地开发Vue.js应用程序。

除了上述内容，Vue.js还有很多其他的特性和功能，例如插件、混入、过渡效果等等。如果你想深入学习Vue.js，可以查看官方文档或者其他相关资料，这些资源可以帮助你更好地掌握Vue.js的知识。

最后，需要提醒的是，前端技术在不断发展，新技术层出不穷。因此，我们需要不断地学习和更新自己的知识，以跟上时代的步伐。关注我，持续分享更多优质好文！