zoukankan      html  css  js  c++  java
  • Vue进阶

    1、VS code插件

     

     

     

     

    2、ES6语法

    let:和var 关键字语法基本一致,没有变量提升

    模板字符串:使用 · ·包裹文本,在需要替换的位置使用 ${ } 占位,并填入内容即可

    对象简化赋值:如果属性名和变量名相同,可以简写。方法可以省略function关键字

    function省略掉,替换为 =>

    参数只有一个时,可以省略()

    函数体只有一行时,可以省略 { }

    函数体只有一行,并且有返回值时,如果省略了 { } ,必须省略 return

    箭头函数的this:创建时的this是谁,运行的时候this就是谁

    2、单文件组件

    后缀名是 .vue,可以同时写结构,逻辑和样式

    template标签中写结构,script标签中写逻辑,style标签中写样式

    安装了 vetur 插件可以通过 <vue 生成基础结构

    3、快速原型开发

    环境配置:安装node.js全部使用默认的设置,一路下一步即可。打开命令行工具,输入命令node -v 以及 npm -v 检查是否安装成功。通过命令 npm install -g @vue/cli-service-global 安装一个小工具

    基本使用:环境配置成功之后,在 .vue 文件所在的路径下打开终端,输入 vue serve 文件名,等待解析,然后在浏览器访问出现的地址即可。

    注意:template中必须有一个根节点。script中的data写成函数,内部返回一个对象。如果要使用写好的样式,直接import即可。使用npm下载别人写好的包(模块、库),例如axios,下载命令为 npm install axios 或者缩写为 npm i axios 。在要使用的组件中,使用import导入下载的包(模板、库),例如axios,导入代码是 import axios from  'axios'

    组件抽取:创建components文件夹,创建一个 .vue文件,把要抽取的代码剪切进去,并调整图片、css文件的路径,在App.vue中 使用import导入组件,在components中添加(注册)组件,页面中使用的 注册名字 可以直接当标签名使用

    4、vue-cli脚手架

    环境配置:保证node.js安装成功的情况下,通过命令 npm install -g @vue/cli安装一个工具,如果失败,先输入 npm install -g cnpm,成功之后再输入 cnpm install -g @vue/cli 来安装 vue-cli

    创建项目:在想要创建项目的文件夹下输入 vue create 项目名,调整一下设置,然后回车。如果成功了,依次输入最后出现的 提示代码,稍等片刻,在浏览器输入出现的地址即可访问。

    5、vue-router

    管理多个组件切换关系的工具,用它可以做SPA(Single Page Application)单页面应用

    安装:在项目的根目录打开终端,通过命令 npm install vue-router 下载。main.js中 导入、use一下、创建路由、挂载到Vue实例上

    配置规则:通过 routes属性 配置 地址 和路由管理的组件关系。main.js中 导入组件、routes属性中进行配置关系、path:设置地址 、component:设置组件、可以设置多个。

    路由出口:希望匹配到的组件显示在哪里,就在哪里设置一个 router-view 标签

    声明式导航:通过 router-link 标签 设置 to属性为地址,可以实现点击切换

    编程式导航:组件通过 this.$router.push(地址) 实现切换

    路由传参:在地址的后面写上 ?分隔,通过 key=value&key2=value 的方式添加参数,组件中通过 this.$route.query 访问对应的 key 即可获取数据

    6、Element-ui

    安装:在项目的根目录打开终端,通过命令 npm i element-ui 下载。main.js中 导入Element-ui、导入样式、use一下。

     

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    0425正则数组
    0424php函数
    0424php基础
    string类例题
    数组分为一维数组,二维数组,多为数组
    string类 截取的长度 是否包含某个数
    循环语句2
    /异常语句try,catch.
    string类
    循环语句
  • 原文地址:https://www.cnblogs.com/wh2020/p/13361124.html
Copyright © 2011-2022 走看看