本文共 3279 字，大约阅读时间需要 10 分钟。

VUE快速入门

• .下载和引入 vue.js 文件。

• 编写入门程序。

  • 视图：负责页面渲染，主要由 HTML+CSS 构成。

  • 脚本：负责业务数据模型（Model）以及数据的处理逻辑

  • 举个例子

        
               
                   
               
           
                    {
          {msg}}    
           
        
           

  • Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的

  • vue中的获取元素:this.$refs["xxx"]

  • 选项列表

    • el 选项：用于接收获取到页面中的元素。
    • data 选项：用于保存当前 Vue 对象中的数据。
    • methods 选项：用于定义方法。

  • 数据绑定

    • 在视图部分获取脚本部分的数据。

      {

      {变量名}}

相关指令

• 带有v-前缀的特殊属性,不同指令具有不同的意义

• 使用指令时,通常编写在标签的属性上,值可以使用js表达式

• 常用指令

  指令	作用
  v-html	把文本解析为HTML代码,可以解析标签
  v-bind	为html标签绑定属性
  v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
  v-else	同上
  v-else-if	同上
  v-show	根据条件展示某元素，区别在于切换的是display属性的值
  v-for	列表渲染,遍历容器的元素或者对象的属性
  v-on	为html绑定事件
  v-model	在表单元素上创建双向绑定

• v-model表单绑定

  • v-model：在表单元素上创建双向数据绑定。

• 双向数据绑定

  • 更新 data 数据，页面中的数据也会更新。
  • 更新页面数据，data 数据也会更新

• MVVM模型(Model View ViewModel)：是 MVC 模式的改进版

  • 在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。 将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。
    

• 基本指令例子

    
       
           
   
        
                   
    
            
                 
     {
   {
   name1}}            
     
            
                 
                 
     
            
                 
     
     
            
     
     
            
     
            
                 
     
                
      
li1
                
      
li2
                
      
li4
                
      
li3
            
     
            
     
            
                 
     
                
      
                    {
   {
   hobby}}                
            
     
            
     
            
                 
                 
     点我更改文本内容            
                 
     点我更改文本内容            
                 
                 
     
                        
                 
     
                      年龄:
                  
     
        
    
    
   
    

Element 基本使用

介绍

• Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库.
• 使用 Element 前提必须要有 Vue。
• Element 官网：

使用步骤

1. 下载 Element 核心库。
2. 引入 Element 样式文件。
3. 引入 Vue 核心 js 文件。
4. 引入 Element 核心 js 文件。
5. 借助常用组件编写网页。
6. CV大法

拷贝data时需注意data函数中return语句返回的对象

方法直接拷贝methods

注意prop属性值的来源

表格中

1. 指定表格对象data，他指定一个数组

2. 它里面的prop属性指定每一个行的属性名

    
       
           
                   
   
        
    
     主要按钮
    
    
        
    
     危险链接
    
    
        
    
                 属性方式：            
                 
                 
                 
               
    
          
    
            
     
                
      默认不区分颜色                
                    
     
              
     
                
      区分颜色                
                      
                    
     
              
                     
      
       
                      
      
       
                    
         
    
    
    
   

自定义组件

定义格式

Vue.component(组件名称, {

props:组件的属性,

data: 组件的数据函数,

template: 组件解析的标签模板

})

举个例子

    
       
               
   
        
    
     我的按钮
        
   

VUE生命周期

生命周期：核心八个阶段

beforeCreate：创建前

created：创建后

beforeMount：载入前

mounted：载入后

beforeUpdate：更新前

updated：更新后

beforeDestroy：销毁前

destroyed：销毁后

VUE异步操作

• 在VUE中发送异步请求,本质上还是AJAX,我们可以使用 axios 这个插件来简化操作！
• 使用步骤

1. 引入 axios 核心 js 文件。
2. 调用 axios 对象的方法来发起异步请求。
3. 调用 axios 对象的方法来处理响应的数据。

• 常用方法

get(请求的资源路径与请求的参数) 发起GET方式请求

post(请求的资源路径,请求的参数) 发起POST方式请求

then(response) 请求成功后的回调函数，通过response获取响应的数据

catch(error) 请求失败后的回调函数，通过error获取错误信息

• 举个例子

    
                   
   
            {
   {
   name}}        
    发起请求    
   

转载地址：https://blog.csdn.net/drug1910951117/article/details/107120240 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！