vue基础点

Posted 2020-09-08

1、v-model：主要在表单中使用，双向功能；

2、插值：

　　{{}} ： 文本插值，将数据解释为纯文本

　　v-text： 

　　v-html：输出真正的html，数据绑定会被忽略，只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值,不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎

　　v-text：文本渲染，类似{{}}} 

3、v-show：控制显示、隐藏（添加display：block/none）

4、v-if：控制显示、隐藏，DOM结构有或没有，支持<template></template>

5、v-bind：绑定属性，给DOM元素添加属性，绑定内联样式

6、v-for：循环，可以是数组，也可以是对象，可以与组件使用

7、v-on：事件绑定

8、v-once：执行一次性地插值，当数据改变时，插值处的内容不会更新

 

9、组件（component）：提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用，一个组件实质上是一个拥有预定义选项的一个 Vue 实例，所有的 Vue.js 组件其实都是被扩展的 Vue 实例；要确保在初始化根实例 之前 注册了组件

 

 

10、过滤器：过滤器只能在 mustache 绑定中使用，由“管道符”指示；过滤器函数总接受表达式的值作为第一个参数

 

11、修饰符

　　1）事件修饰符：在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求，v-on提供了事件修饰符，由点(.)表示的指令后缀来调用

　　　　　　　　

　　2）按键修饰符：监听键盘事件时，我们经常需要监测常见的键值

　　　　　　　　

　　　　　　　　

　

　　　3）.lazy：v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步；（v-model.lazy）
　　　4）.number：自动将用户输入值转为number类型（v-model.number）

　　　5）.trim：自动过滤用户输入的首尾空格

　　　　　　　　

 

12、计算属性(computed  计算缓存)：复杂逻辑，应当使用计算属性（需要展示的数据，有一定的逻辑处理时使用），计算属性是基于他的依赖缓存（只有在它的相关依赖发生改变时才会重新取值），计算属性默认只有getter（），但是需要时也可以设置setter（）

　　计算属性 和 method ：都可以实现最终结果，计算属性有一个计算缓存，若相关依赖不改变就不执行此函数；method每当重新渲染就会执行；

　　计算属性 和 watch ：用于观察 Vue 实例上的数据变动，来响应数据的变化，执行异步操作或昂贵操作

 

13、表单控件绑定：v-model绑定，绑定的 value 通常是静态字符串（对于勾选框是逻辑值）；绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串；