vue2快速入门

vue2

• 创建HTML界面，引用Vue.js文件

• 编写视图

   
   
  
     
     
  {{ message }}
     
     
  
     
   

• {{type}} : 插值表达式

  • 变量

  • 三元运算符

  • 函数调用

  • 算数运算

• 在JS代码区域,创建Vue核心对象,定义数据模型

  
   
   
   
   
   ​
   

状态选项

状态选项	作用
data	用于定义组件的响应式数据。返回的对象中的属性将成为组件的响应式数据，可以在模板和组件方法中使用。
props	用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。
computed	用于定义计算属性，它们基于组件的响应式数据计算得出，并缓存结果，只有当依赖的数据发生变化时才会重新计算。
methods	用于定义组件的方法，这些方法可以在组件的模板和生命周期钩子中被调用。
watch	用于侦听组件数据的变化，当指定的数据变化时，可以执行特定的操作。支持深度监听和立即触发。
emits	用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。
expose	用于显式地暴露组件实例的属性或方法，使得它们可以在组件外部被访问，例如通过 ref 引用。

data

 ​

props/emits

• props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。'子组件不可更改该数据'

• emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新)

父

 
 ​
 

子--Children

 ​
 

说明：

1. 父组件模板：使用 v-bind 指令（或简写为 :）和对象语法来统一传递 propsData 对象中的所有属性作为 props。v-bind="propsData" 会将 propsData 对象中的所有属性作为独立的 props 传递给子组件。

2. 父组件数据：在 data 返回的对象中定义了一个 propsData 对象，包含了所有要传递给子组件的属性。

3. 子组件 props：子组件定义了 size、myMessage、height 和 age 四个 props，这些 props 用于接收从父组件传递的数据。

computed

• 计算属性，它们基于组件的响应式数据计算得出，并缓存结果，只有当依赖的数据发生变化时才会重新计算。

 
 ​
 

watch

• 数据的变化，当指定的数据变化时，可以执行特定的操作。支持深度监听和立即触发。

• this.$unwatch 来停止监听

配置项

配置项	类型	描述	是否必需
handler	Function	侦听到变化时调用的函数，接收新值和旧值为参数。	是
deep	Boolean	是否进行深度监听。如果为 true，则会深度监听对象内部属性的变化。	否，默认为 false
immediate	Boolean	是否在侦听开始之后立即以当前的值触发回调。	否，默认为 false
flush	String	指定在哪个阶段调用回调，可选值为 "pre"（默认，DOM 更新之前）或 "post"（DOM 更新之后）。	否
deep 和 immediate 结合使用	-	深度监听对象或数组，并且在侦听开始时立即触发回调。	否

常见指令

指令	作用
{{ }}	插值表达式，用来在模板中插入动态数据。
v-html	动态渲染html，而不是纯文本
v-bind	为HTML标签绑定属性值，如设置href, css样式等 v-bind:href = "变量";
v-model	在表单元素上创建双向数据绑定 v-model="变量"
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

{{ }}

• 插值表达式

• 改变dom元素的textContent

 
 ​
 

 ​

v-html

• 动态渲染html 到指定组件中

• 改变dom元素的innerHTML

 ​
 

v-bind/v-model

• v-bind:为HTML标签绑定属性值

   
   
   ​
   
   
   ​
   
   
   ​
   
   
   ​
   
   
   ​
   
   
   ​
   
   
   
   
  
   
   
   ​
   
   
   
   
  
   
  
   ​
   
   
  
   ​
   
   
   ​
   
   
   ​
   
   

• v-model : 双向数据绑定 (语法糖)

  • 
    //等价于 
    

  • 如果 这个输入框改变了那 url 也会跟着改变, 同理 url 的改变也会也影响这个输入框

v-on

• 为HTML标签绑定事

• 
   ​
   ​
   
   

v-if / v-else-if / v-else / v-show

• v-if

• 不满足条件的标签不进行渲染

•  未成年
   成年
   ​

• v-show

• 不同的是v-show是将不满足条件的标签设置为 display="none";

•  未成年
   成年

v-for

• v-for:列表渲染，遍历容器的元素或者对象的属性

• :key="index",为每个渲染的元素提供了一个唯一键值,提高列表渲染的性能

• 
       
           
               
               
           
       
  addrs
  {{ addr }}
   
   ​
   

   ​

Vue的生命周期

生命周期选项 | Vue.js (vuejs.org)

阶段	描述
beforeCreate	在实例初始化之后、数据观测和事件配置之前被调用。
created	在实例创建完成后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算，watch/event 事件回调已设置，但还未开始 DOM 渲染。
beforeMount	在挂载开始之前被调用。
mounted	el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。适用于在现有 DOM 应用更改之前访问它。
updated	在由于数据变更导致的虚拟 DOM 重新渲染和打补丁之后调用。当这个钩子被调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。
beforeDestroy	在实例销毁之前调用。实例仍然完全可用，这是你解绑订阅、监听器和取消 Vue 实例之间的事件通信的好时机。
destroyed	在实例销毁之后调用。调用此钩子时，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

生命周期示意图 —生命周期钩子 | Vue.js (vuejs.org)

import

import 语句是 ES6 模块系统的一部分，它允许您从其他文件导入函数、对象、变量等。在 Vue.js 中，import 语句常用于导入组件、插件、工具函数等，以便在当前文件中使用。

// 导入默认导出
 import MyComponent from './MyComponent.vue';
 ​
 // 导入多个项目
 import { comp1, comp2 } from './components.js';
 ​
 // 导入并重命名
 import { comp1 as myComp1 } from './components.js';
 ​
 // 导入所有
 import * as utils from './utils.js';
 ​
 ​
 ​
 export default {
   components: {MyComponent} //注册局部组件
 }

 ​

• 注意事项

  • import 语句必须放在文件的顶部，因为在 JavaScript 中，模块是静态的，不能在条件语句或函数内部导入模块。

  • 导入的模块会被缓存，所以同一个模块多次导入时，实际上只会加载一次。

  • 如果导入的是一个默认导出（如 export default），则可以任意命名导入的变量。如果导入的是命名导出（如 export const），则需要使用对象解构赋值的方式来导入。

• components: {ElementView}, 注册局部组件,方便在父组件的模板中使用这些组件。

• export default 是 ES6 模块系统的语法，用于导出组件的定义。这种语法允许您将组件作为模块导出，然后在其他文件中通过 import 语句导入和使用。

• data 选项，它必须是返回一个对象的函数。这是因为 Vue 组件是可复用的，每个实例都需要有一个独立的拷贝数据对象。