入门：Vue六大常用内置指令

指令（Directives），是vue为开发者提供的 模板语法 ，用于辅助开发者渲染页面的基本结构

所用到的数据定义在实例的 data 中，事件定义在实例的 methods 中

只能渲染纯文本内容， 会覆盖 标签内部原本的内容

只能渲染纯文本内容， 不会覆盖 标签内部原本的内容

能将带标签的字符串渲染成html内容， 会覆盖 标签内部原本的内容

为元素的属性 动态 绑定属性值

注意： 插值表达式 和 v-bind 还支持javascript表达式的运算

为元素绑定事件

只要是事件，就能使用的修饰符，以下列举5个常用的

只能在触发键盘事件时，使用的修饰符，以下列举2个常用的

快速获取表单数据（只应用于表单元素，如：input、textarea、select）

只能给v-model使用的修饰符

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少

配合 v-if 指令一起使用，否则将不会被识别

基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

注意：在vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性

作者：用户2031777005900

链接：>

传值是最好将字典，数组类型的 转成json字符串比较好

JSONstringify(item)

然后到下一个页面 的mounted()函数中取值

如果在微信中 下面有 <- -> 前进返回 箭头 就要用 name 这种方式push 下一个页面是可以到下一个页面，但是单按右箭头返回时是返回不到先前界面的

因为它记录的是页面路劲，所以如果想要实现可以返回的界面切换最好要用 path 路径来push

//本地存

//用的时候取

还有一个 sessionStorage 缓存传值 和 localStorage的 *** 作类似

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：windowlocalStorage;；sessionStorage：windowsessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

WebStorage的优点：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

（5）安全性：WebStorage不会随着>

vue select下拉框绑定默认值：

首先option要加value值，以便v-model可以获取到对应选择的值

一、当没有绑定v-model，直接给对应的option加selected属性

二、当给select绑定了v-model的值的时候，要给v-model绑定的data值里写默认值

element-ui 的组件el-select的 value-key 作为 value 唯一标识的键名，绑定值为对象类型时必填

用法如下:

这里标注下注意点:

以上就是关于入门：Vue六大常用内置指令全部的内容，包括:入门：Vue六大常用内置指令、Vuex深入解读(适用于Vue2)、Vue 页面间传值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！