vue.js的学习心得

最新推荐文章于 2024-10-11 14:17:40 发布

ikunlxx

最新推荐文章于 2024-10-11 14:17:40 发布

阅读量56

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/ikunlxx/article/details/134895633

版权

Vue是一个构建数据驱动的 web 界面的渐进式框架，也是前端一个比较火的MVVM框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。他的安装方式分为两块：一种是引用js文件建立模块。另一种是下载淘宝镜像npm，多应用于大型项目的搭建。存放项目文件为webpack，install命令执行，run dev程序运行。

vue项目目录分为assets、components、app.vue、main.js几部分。分别代表存放突变，存放组件文件，项目入口文件，项目核心文件。

vuejs构建组件使用Vue.compont('componentName',{/*component*/});

Vue的过程就是定义MVVM各个组成部分的过程的过程。

定义View
定义Model
创建一个Vue实例或"ViewModel"，它用于连接View和Model

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据

、挂载元素、方法、模生命周期钩子等等。

在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；

Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

文本属性采用大括号。

Vue.js 条件与循环

条件判断

v-if

条件判断使用 v-if 指令：

v-if 指令

在元素和 template 中使用 v-if 指令：

<div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术，更是梦想！</p> <p>哈哈哈，打字辛苦啊！！！</p> </template> </div>

循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

v-for 指令

数据绑定

1.单向绑定

2.双向绑定

3.v-for列表渲染

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

4.综合

vue的常用指令：

data属性指向Model，data: exampleData表示我们的Model是exampleData对象。

1、v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

2、v-html

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

3、v-bind

v-bind指令用于实现单向动态数据绑定。

前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

4、v-on

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

Vue.js为v-bind和v-on这两个最常用的指令提供了语法糖(语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，以便于程序开发，也称为糖衣语法，通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会)，也可以说是缩写或简写。

5,v-model

v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

v-model修饰符

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

1、lazy

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

2、number

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

3、trim

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

6、v-if和v-else

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

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

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

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

7,v-show

v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。

带有v-show的元素始终会被渲染并保留在DOM中，v-show指令使用css样式来控制元素的显示/隐藏。值得注意的是，注意，v-show不支持<template>元素，也不支持v-else

v-if和v-show的区别

v-if和v-show都可以用来动态地控制DOM元素的显示和隐藏，但是，二者是有区别的。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；v-if 也是“惰性”的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。