Vue相关问题

最新推荐文章于 2024-06-20 15:06:48 发布

置顶一枚形成良好习惯的前端猿

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量128

点赞数

文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/qq_41113298/article/details/131265223

版权

一、是什么？

是国产框架，地址https://cn.vuejs.org，而jQuery、Bootstrap等前端框架都是国外的
框架和库如何界定？

库以提供API为主，如jQuery，框架以提供一些基础性服务为主。比如vue，它底层有虚拟dom支撑，有双向数据绑定的支撑，都是基础性的服务，可以节省我们实际开发的代码量。
注:现在库和框架之间的界限已经逐渐模糊化。

二、有什么？

实例参数分析

①el:元素的挂载位置（值可以是css选择器或者dom元素），所谓挂载就是把数据关联的页面的某个标签里

②Date:模型数据（值是一个对象）

插值表达式{{}}

①将数据填充到HTML标签中

②插值表达式支持基本的计算操作
//如何解决差值表达式存在的"闪动"问题？使用V-cloak指令，解决该问题的原理是先隐藏替换好后值之后再显示最终的值。

数据绑定指令

①v-text 填充纯文本：相比差值表达式更加简洁

②v-html 填充HTML片段：存在安全问题、本网站内部数据可以使用，来自第三方的数据不可以用

③v-pre 填充原始信息：显示原始信息，跳过编译过程(分析编译过程)

数据响应式

Q:如何理解响应式:HTML5中的响应式是指屏幕尺寸的变化导致样式的变化，数据的响应式是指数据的变化导致页面内容的变化。
Q:v-once的应用场景:如果显示的信息后续不需要再修改，可以使用它，可提高性能。
Q:双向数据绑定分析 v-model指令用法
Q:MVVM设计思想:M指model，V指view，VM指view-model

处理事件？

//1.事件绑定
v-on指令用法 v-on:click //简写形式 @click
//2.事件函数的调用方式
①直接绑定函数名称v-on:click='say'
②调用函数v-on:click='say（）'
//3.事件函数参数传参
//普通参数和事件对象 v-on:click='say(＂hi＂，$event）'
//注:如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
//如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

三、怎么用？

Vue的基础使用步骤:vue2.0

①需要提供标签用于填充数据。

②引入vue.js库文件。

③可以使用vue的语法做功能

④把vue提供的数据填充到标签里面。

四、框架搭建？

1. powershell窗口

PS D:\Vue_Projects> vue --version
@vue/cli 5.0.8
PS D:\Vue_Projects> vue create vue2_recharge_mobile


Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: vue2rechargemobile

🎉  Preset vue2rechargemobile saved in C:\Users\Administrator\.vuerc


Vue CLI v5.0.8
✨  Creating project in D:\Vue_Projects\vue2_recharge_mobile.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...

success Saved lockfile.
Done in 113.05s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 37.87s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue2_recharge_mobile.
👉  Get started with the following commands:

 $ cd vue2_recharge_mobile
 $ yarn serve

yarn run v1.22.19s>  cd vue2_recharge_mobile
$ vue-cli-service serve
 INFO  Starting development server...


 DONE  Compiled successfully in 9810ms                                                                         

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.110:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

2. git bash窗口


Administrator@DESKTOP-UKRL1O7 MINGW64 /d/Vue_Projects/vue2_recharge_mobile (selfmaster)
$ git init

Administrator@DESKTOP-UKRL1O7 MINGW64 /d/Vue_Projects/vue2_recharge_mobile (selfmaster)
$ git add remote https://gitee.com/lian-yiyao/vue2-recharge-mobile.git

Administrator@DESKTOP-UKRL1O7 MINGW64 /d/Vue_Projects/vue2_recharge_mobile (selfmaster)
$ git push -u origin "selfmaster"
Enumerating objects: 29, done.
Counting objects: 100% (29/29), done.
Delta compression using up to 8 threads
Compressing objects: 100% (24/24), done.
Writing objects: 100% (29/29), 134.36 KiB | 8.96 MiB/s, done.
Total 29 (delta 0), reused 0 (delta 0), pack-reused 0
remote: Powered by GITEE.COM [GNK-6.4]
remote: Create a pull request for 'selfmaster' on Gitee by visiting:
remote:     https://gitee.com/lian-yiyao/vue2-recharge-mobile/pull/new/lian-yiyao:selfmaster...lian-yiyao:master
To https://gitee.com/lian-yiyao/vue2-recharge-mobile.git
 * [new branch]      selfmaster -> selfmaster
branch 'selfmaster' set up to track 'origin/selfmaster'.

Administrator@DESKTOP-UKRL1O7 MINGW64 /d/Vue_Projects/vue2_recharge_mobile (selfmaster)