Vue

[wangbo123855842]

Vue

Vue 的官方文档

• 安装

  • 浏览器安装 Vue Devtools
  • script 安装，npm 安装，vue-cli 安装

• Vue 实例

  • new Vue 创建一个实例
  • data 属性控制组件数据
  • created，mounted 等生命周期钩子

• 模板语法

  • {{ msg }} 插入数据
  • v-bind 给组件绑定属性（html属性+组件自定义属性都可以）
  • v-on 添加监听事件
  • v-bind和v-on 动态属性绑定 <a v-bind:[attributeName]="url">
  • v-bind和v-on的缩写

• 计算属性

  • 计算属性，使用 computed，可以设置计算属性的 getter / setter 方法
  • 侦听属性，使用 watch ，函数的参数是，newValue 和 oldValue

• Class 和 Style 绑定

  • v-bind:class="{ active: isActive, 'text-danger': hasError }"或<div v-bind:class="[activeClass, errorClass />
  • <div v-bind:style="styleObject"></div>

• 条件渲染

  • v-if，v-else，v-else-If
  • 在 <template> 元素上使用 v-if条件渲染分组
  • 用 key 管理可复用的元素， key 不同，元素将重新渲染，不设置 key，input 组件不会将输入的 value 清空，不重新渲染
  • v-show，v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display

• 列表渲染

  • v-for 指令基于一个数组来渲染一个列表 ，v-for 指令需要使用 item in items 形式的语法
  • v-for 用在 li 等这些需要循环渲染的元素中，不是他们的父节点 ul 等
  • 支持两个参数，(item, index) in items
  • v-for 可以遍历一个对象，(value, name) in object 也可以 (value, name, index) in object
  • 建议尽可能在使用 v-for 时提供 key attribute

• 事件处理

  • v-on 指令监听 DOM 事件, v-on:click="greet" greet 在 methods 中定义
  • 事件修饰符，.stop，.prevent 等，<form v-on:submit.prevent></form>
  • 按键修饰符 .enter，.page-down等
  • $emit 发出事件，父组件可以监听这个事件

• 表单输入绑定

  • 用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
  • 它会根据控件类型自动选取正确的方法来更新元素
  • v-model = 监听用户的输入事件 + 更新数据
  • text 和 textarea 元素使用 value property 和 input 事件
  • checkbox 和 radio 使用 checked property 和 change 事件
  • select 字段将 value 作为 prop 并将 change 作为事件
  • 修饰符，.lazy，.trim，.number，例如，<input v-model.trim="msg">

• 组件基础

  • 通过 new Vue 创建的 Vue 根实例
  • Vue.component 来创建一个全局注册组件，它与 new Vue 接收相同的选项
  • Vue.component 创建的组件，data 必须是一个函数，不像 new Vue 那样是一个对象，这样维护每个组件的独立数据
  • 父组件通过 prop 给子组件传递数据来更新子组件
  • 父组件可以传递给子组件，子组件通过调用这个方法来更新父组件

Vue 的官方视频

• 安装与部署

  • 使用 HBuilder X 开发

• 创建一个 Vue 应用

  • vue 页面包括视图和脚本。通过 new Vue 创建一个 Vue 应用，返回一个对象，称为应用对象

• 数据与方法

  • 访问 vm 对象的一些属性，加上$，例如 vm.$data vm.$attr
  • watch ，检测对象

    var app = new Vue({
    el: "#app",
    data: {a: 1, b: 2},
    watch: {
    a(newValuel, oldValue) {
    console.log(newValuel + "---" + oldValue)
    }
    }
    });      

• 生命周期

  • beforeCreate，created，beforeMount，mounted，beforeUpdate，updated
  • beforeDestory，destoryed
  • errorCaptured，当捕获一个来自子孙组件的错误时被调用
  • activated，deactivated 在 keep-alive 组件激活，停用时调用

• 模板语法 插值

  • <div v-once> {{ msg }} </div> ，加上 v-once，执行一次性插值，数据改变，插值处的内容不变。
  • 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html
  • <p v-html="rawHtml"></p>，在 P 标签下，生成了 rawHtml 代表的标签
  • v-bind 为 html 标签绑定 attr
  • 双大括号里，可以使用 JavaScript 表达式，例如三元表达式，数字计算

• 模板语法 指令

  • 带有 v- 前缀的特性
  • v-if，v-bind，v-on
  • 修饰符，<div @click.stop="click">click me<div> 停止继续传播 click 事件

• 组件

  • 组件的 template 模板，必须有一个根元素节点，不能是两个并列的元素

• 单文件组件

  • 文件后缀名 xxx.vue
  • 需要安装 npm，安装 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装 vue-cli cnpm install -g @vue/cli
  • 安装 webpack cnpm install -g webpack
  • 使用 vue ui 命令，启动 vue 的 UI 管理画面，创建一个 vue 项目
  • 单文件组件包括三个大的部分，template，script，style

Vue 快速上手教程

• Vue
  • 视图层 Vue
  • 网络通信 axios
  • 页面跳转 vue-router
  • 状态管理 vuex