VUE 2X 前置配置及使用 ①

news/2024/10/18 22:37:05/

目录


文章有误请指正,如果觉得对你有用,请点三连一波,蟹蟹支持✨

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽   

提示:以下是本篇文章正文内容

V u e j s Vuejs Vuejs


简介 : Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

  • 官方

    1. 中文 : https://cn.vuejs.org/
    2. 英文 : https://vuejs.org/
    3. API : https://v2.cn.vuejs.org/
    4. Vue 相关包 : https://github.com/vuejs/awesome-vue
    5. Vue 相关插件 : https://awesomejs.dev/for/vue/
    6. Vue 入门基础 :https://v2.cn.vuejs.org/v2/guide/installation.html

  • Vue的特点

    1. 遵循MVVM模式
    2. 编码简洁, 体积小, 运行效率高, 适合移动/PC端开发
    3. 它本身只关注UI, 可以轻松引入Vue插件或其它第三库开发项目
    4. 采用组件化模式,提高代码复用率、且让代码更好维护
    5. 声明式编码,让编码人员无需直接操作DOM,提高开发效率
    6. 命令式 👉 声明式
  • 其它前端JS框架的关联

    1. 借鉴Angular的结构模板和数据绑定技术
    2. 借鉴React的组件化和虚拟 DOM 技术
  • Vue 扩展插件

    1. vue-cli: vue脚手架
    2. vue-resource、axios: ajax请求
    3. vue-router: 路由
    4. vuex: 状态管理
    5. mint-ui: 基于vue的UI组件库(移动端)
    6. element-ui: 基于vue的UI组件库(PC端)
    7. ......

V u e Vue Vue前置配置

  • V u e Vue Vue 导入链接 C D M CDM CDM 链接

  • 下载 V u e . c r x Vue.crx Vue.crx 扩展插件

  • 控制台提示

    • Download the Vue Devtools extension for a better development experience 解决:安装开发插键 You are running Vue in development mode.Make sure to turn on production mode when deploying for production.See more tips at

      解决 : 默认为true -> vue.config.production=false :关闭提示

初识 V u e Vue Vue


入门效果

入门效果代码演示 🎊

<!-- 初识Vue:1.<div id="root">是一个容器,容器中写的不是原始html代码,而是Vue的模板代码。2.所谓的模板代码,类似于React中的jsx,是html+js的混合体3.{{xxx}},xxx会自动读取data中的xxx属性,xxx当表达式去解析
-->
  • 代码演示
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>初识Vue</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="root"><h1>Hello,{{school.name}}</h1><h1>坐落在:{{school.address}}</h1><h1>我学的是:{{school.subject()}}学科</h1></div><script type="text/javascript">//创建一个Vue的实例对象,并传入配置对象new Vue({el: '#root', //el用于指定当前Vue实例为哪个容器服务,值是选择器字符串,选择的写法类似于jQuerydata: { //data是存储数据的地方,为root容器提供数据,值为一个对象,相当与React中的stateschool: {name: 'OpenAi',address: '美国加州旧金山',subject: () => '人工智能'}}})</script>
</body></html>

总结

以上是个人学习Vue的相关知识点,一点一滴的记录了下来,有问题请评论区指正,共同进步,这才是我写文章的原因之,如果这篇文章对您有帮助请三连支持一波


http://www.ppmy.cn/news/494502.html

相关文章

FusionComputeV100R006C10SPC101平台安装win10踩坑记

生产环境中有一套华为FusionCompute&#xff0c;版本比较老&#xff0c;V100R006C10SPC101&#xff0c;该产品已EOS了&#xff0c;无法升级。因业务需要&#xff0c;需安装Windows10系统&#xff0c;遇到了不少坑&#xff0c;在此记录一下。 一、坑1&#xff1a;Windows10版本…

基于matlab的扩频解扩误码率完整程序分享

clc; clear; close all; warning off; addpath(genpath(pwd)); r5; N2^r-1;%周期31 aones(1,r); mzeros(1,N); for i1:(2^r-1) temp mod((a(5)a(2)),2); for jr:-1:2 a(j)a(j-1); end a(1)temp; m(i)a(r); end mm*2-1;%双极性码 %产生随…

手机企业纷纷放弃富士康,郭台铭的代工王国面临困扰

近日媒体报道指苹果将与和硕合作在印度建设手机制造厂&#xff0c;此前它已与纬创合作在印度建厂&#xff0c;而最大代工企业富士康却一直没有与苹果合作在印度建厂&#xff0c;似乎显示出手机企业对富士康的态度已有很大转变。 富士康的最大客户是苹果&#xff0c;不过近几年来…

富士康和苹果的印度制造计划受挫,还是中国制造更可靠

据悉从5月份以来&#xff0c;苹果和富士康等代工厂在印度的生产计划由于疫情受挫&#xff0c;不得不将订单转回中国&#xff0c;为此大幅增加对招聘员工的奖金&#xff0c;奖金最高达到7500元。 中国是全球最大的制造国&#xff0c;而富士康也正是依托于中国市场发展起来的&…

云上接单不空跑 京东云助力“佬司机”为货运物流业降本增效

李师傅当了三年多的货车司机&#xff0c;经常穿行在陕蒙川三省(区)之间&#xff0c;跟很多同行一样&#xff0c;货源信息匮乏一直是让他犯愁的事。直到一款手机应用软件的出现&#xff0c;让困扰他的难题得到解决。 “这一单刚完下一单订单就已经发过来了&#xff0c;基本上运…

乔布斯在发布会上“复活”了,英特尔却很忧伤

NEW 关注Tech逆向思维视频号 最新视频→【自我了断&#xff1f;为什么他们要自己割包皮】 出品&#xff5c;盒饭财经 文|姚赟 名字是最显性的标签&#xff0c;呈现出你希望向这个世界传递的信息。苹果似乎把芯片作为正式的产品在做&#xff0c;延续了一贯产品的pro、Max的命名规…

苹果内地最大代工厂被曝大幅裁员!这家库克曾点赞的企业怎么了?

新智元报道 来源&#xff1a;集微网 综合整理&#xff1a;小匀 【新智元导读】立讯精密是苹果产业链在内地最大的代工厂之一&#xff0c;近些年受益于苹果&#xff0c;甚至有「取代富士康」的可能。不过今年以来&#xff0c;其股价暴跌&#xff0c;而且其位于江西省吉安市的立…

欧菲光净利暴跌,提醒了中国制造,原来苹果如此重要

欧菲光公布的业绩显示由于失去苹果这个大客户导致它的净利润暴跌九成&#xff0c;这让人重新认识了苹果对中国制造业的影响力&#xff0c;苹果对中国产业链是如此重要&#xff0c;它的重要性是其他中国手机企业所无法替代的。 苹果是全球第三大手机企业&#xff0c;它占有的市场…