新手初步入手vue.js

一：vue.js简介：

Vue.js是一款流行的JavaScript框架，专注于构建用户界面。由于其简洁易用的API和灵活性，Vue.js在前端开发领域取得了广泛的认可。本文将深入探讨Vue.js的一些关键概念和特性，帮助读者更好地理解和利用这个强大的工具。

1. 什么是Vue.js？

（一）Vue.js是一款由尤雨溪开发的渐进式JavaScript框架，用于构建用户界面。与其他框架相比，Vue.js更注重其简洁性和灵活性。Vue的核心库只关注视图层，易于集成到其他库或已有项目中。

2. 响应式数据绑定

（一）Vue.js的一项强大特性是其响应式数据绑定系统。通过使用v-bind和v-model等指令，Vue能够轻松地将数据与视图进行双向绑定。这使得在数据发生变化时，视图会自动更新，大大简化了开发过程。

（二）v-bind与v-model的使用：

v-bind：

v-bind 也可以简写为：主要用于动态地绑定一个或多个属性，通常用于 HTML 元素的属性绑定。通过 v-bind，你可以将一个 Vue 实例中的数据绑定到 HTML 元素的属性上，实现数据的动态更新。

绑定单个动态类名时：

绑定多个动态类名时：

同时绑定静态+动态类名时：

在v-bind指令中使用逻辑判断时：

v-model

v-model 主要用于在表单元素上创建双向数据绑定，它通常用于表单输入元素，如输入框、复选框和单选按钮。通过 v-model，表单元素的值会与 Vue 实例中的数据进行双向绑定。

v-model修饰符

v-model有3个修饰符，分别是lazy、number、trim

1、lazy 

v-model默认是在input事件中同步输入框中的内容，也就是一旦数据发生改变，对应的data中的数据也会发生改变。如果使用lazy修饰符，可以让数据在失去焦点或者回车时才会更新。

<input type="text" placeholder="搜索"  v-model.lazy='keyword' />

2、number

默认情况下，在输入框输入数字的时候，默认会把输入的内容当作字符串类型处理，如果加上number修饰符，就可以让你在输入数字的时候将内容转为number类型。

<input type="text" placeholder="搜索"  v-model.number='keyword' />

3、trim

trim修饰符可以去除输入内容左右两边的空格。

<input type="text" placeholder="搜索"  v-model.trim='keyword' />

3.常用指令 

1.v-on（可以简写为@）

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。

2.v-for

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for， 它需要结合着in或者of来使用。

 for循环普通数组

for循环对象数组

for循环对象

3.v-if和v-else

v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

    v-if的使用一般有两个场景：

   1.通过条件判断展示或者隐藏某个元素或者多个元素；

   2.进行视图之间的切换。

 

4.计算属性和监听属性：

1、计算属性 computed

注：Vue实例中的methods也可以完成计算的功能，与计算属性的作用相同

 2、监听属性 watch

总结：computed和watch的使用场景对比

computed ：当一个结果受多个值影响时候就需要用到computed最典型的例子： 购物车商品结算的时候

watch ：当一个值变化触发多个响应事件的时候就需要用watch
最典型的例子： 搜索数据

五结尾：

最后以上仅是Vue.js的冰山一角。随着前端技术的不断发展，Vue.js也在不断更新和演进。通过学习和使用Vue.js，开发者能够更高效地构建现代、响应式的用户