总结vue基础知识点

插值

用{{}}表示，也被称作胡子语法。

作用:会将绑定的数据实时的显示出来:

通过任何方式修改所绑定的数据,所显示的数据都会被实时替换,可以在里面写js表达式、三目运算符、方法调用等但不能进行赋值操作还有循环语句与条件语句

指令

指令 (Directives) 是指带有 v- 前缀的关键字语法

v-text和v-html

类型innerText和innerHTML

前者应用范围狭窄，可以识别文字，但无法识别标签，

后者能够识别标签，但同样应用范围狭窄

v-if和v-show

根据条件判断是否渲染元素

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；

如果在运行时条件很少改变，则使用 v-if 较好。

v-on

作用:使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。

语法: @事件名.修饰符 = “methods中的方法名”

v-on中的修饰符

. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）

. prevent：阻止默认事件的发生（比如点击超链接的跳转，点击表单提交按钮时的 重新加载页面等）

. capture：捕获冒泡，

. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

. once：设置事件只能触发一次，比如按钮的点击等。

v-for

根据一组数组或对象的选项列表进行渲染。

v-for 指令需要使用 item in items 形式的特殊语法，

items 是源数据数组 /对象

当要渲染相似的标签结构时用v-for

v-bind

可以绑定标签上的任何属性。

v-bind:属性="值"
           

//简写
:属性="值"
           

也可以利用v-bind进行数据传递

v-model

表单元素的绑定

特点: 双向数据绑定

数据发生变化可以更新到界面

通过界面可以更改数据

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在 data选项中声明初始值。

(未完待续，随缘更新)