一、是什么?
-
是国产框架,地址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)