Vue笔记

v-text:

用于获取data数据中数据将数据以文本的形式渲染到指定标签内部。

{{ }} （插值表达式）和v-text获取数据的区别在于：
1.使用v-text取值会将标签中原有的数据覆盖，使用插值表达式的形式不会覆盖标签原有的数据。
2.使用v-text可以避免在网络环境太差的情况下出现插值闪烁。

v-html:

用于获取data数据中数据将数据中含有的html标签先解析再渲染到指定标签内部。（如果里边是a标签就可以先解析再渲染，而v-text则不会解析）。

Vue中事件绑定（v-on）:

v-on:click可以简化为@click
时间函数可以简写，dowork：function() {} 可以简写成dowork() {}

v-show:控制页面元素隐藏与显示（display控制）

v-show：用于控制页面中某个标签元素是否展示，底层通过控制元素的display属性来进行标签的显示和不显示控制。

• 在 v-show 中可以直接书写 boolean 值控制元素展示
• 在 v-show 中可以通过 变量 控制标签展示和隐藏。
• 在 v-show 中可以通过 boolean表达式 控制标签的展示和隐藏。

<h2 v-show="false">hello Vue.j</h2>
<h2 v-show="age >= 30">年龄达到了30，显示该内容！</h2>
<h2 v-show="show">恭喜你发现了隐藏内容！</h2>
    <!--利用变量show控制是否显示, 只有show为true才会显示-->

v-if:控制页面元素隐藏与显示（dom操作）

v-if：用来控制页面中的标签元素是否展示，底层通过对 dom 树节点进行添加和删除来控制展示和隐藏。
与 v-show 的用法一模一样，参考 v-show 即可。

v-bind：绑定标签的属性

v-bind：用来绑定 标签的属性 从而通过 vue 动态修改标签的属性。

• v-bind : 属性 可以简写成 : 属性。

v-for：遍历对象

v-for：用来对 对象 进行遍历的（JavaScript 中数组也是对象的一种）

• 在使用 v-for 的时候一定要注意加入:key 用来给 Vue 内部提供重用和排序的唯一 key。
• 遍历时可以获取 索引 index、…

v-model：实现双向绑定

v-model：用来绑定 标签元素的值 与 vue实例对象中data数据 保持一致，从而实现 双向的数据绑定机制。

• 所谓双向绑定，就是表单中数据变化导致 vue 实例 data 数据变化，vue 实例中 data 数据的变化导致表单中数据变化。

事件修饰符

修饰符作用：用来和事件连用，决定事件触发条件或者是阻止事件的触发机制。
常用的事件修饰符：
.stop：用来阻止事件冒泡。
.prevent：用来阻止标签的默认行为。a标签的默认行为就是跳转, prevent阻止了跳转。
.capture
.self：只触发自己标签的上特定动作的事件，不监听事件冒泡。
.once：让指定事件只触发一次。
.passive

按键修饰符

作用：用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符。
常用按键修饰符：@keyup.xxx="function "

	.enter
	.tab （捕捉通过tab跳转到当前按标签）
	.delete (捕获“删除”和“退格”键)
	.esc
	.space
	.up
	.down
	.left
	.right

Axios操作

执行GET请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

axios.all(iterable)
axios.spread(callback)

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

Vue 中组件（Component）

组件作用：用来减少 Vue 实例对象中代码量，日后在使用 Vue 开发过程中，可以根据不同业务功能将页面中划分不同的多个组件，然后由多个组件去完成整个页面的布局，便于日后使用 Vue 进行开发时页面管理，方便开发人员维护。

全局组件的开发

全局组件注册给 Vue 实例，可以在任意 Vue 实例的范围内使用该组件。