Zero, article directory
Vue2 basics 1. Quick start
1. Vue concept
(1) Why study
-
Essential front-end skills
-
There are many jobs, and most Internet companies are using Vue
-
Improve development efficiency
-
Essential skills for high salary (Vue2+Vue3)
(2) What is Vue
- **Concept: **Vue (pronounced /vjuː/, similar to view) is a set of tools for **building user interfaces**Progressive Frame
- Government:https://v2.cn.vuejs.org/
- Build a user interface: Based on dataRender an interface that users can see
-
**Progressive:** The so-called progressive means step by step. It is not necessary to learn all the APIs in Vue to develop Vue. You can learn a little and develop a little.
-
Two development methods of Vue:
-
Vue core package development: Scenario:
局部Module transformation -
Vue core package&Vue plug-in&engineering: Scenario:
整站Development
-
-
**Framework:** is a complete solution
- Features:There is a set of rules that developers must abide byorConstraints, the learning framework is these rules for learning
- **Advantages:**Greatly improve development efficiency
- Libraries vs Frameworks
- Library: similar to a toolbox, it is a collection of methods, such as axios, lodash, echarts, etc.
- Framework: It is a complete solution that implements most of the functions. We only need to code according to certain rules.
(3) Vue development method
-
Traditional development model: developing Vue based on html/css/js files
-
Engineering (scaffolding) development method: developing Vue in a webpack environment,
这是最推荐, 企业常用的方式
2. Create an instance
(1) Step instructions
- Prepare container (scope managed by Vue)
- Introduction package (development version package / production version package) Official website
- Create a Vue instance new Vue()
- Add configuration item => Complete rendering
- el: Specifies the mount point, and the selector specifies which box is controlled.
- data provides data
(2) Code demonstration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
创建Vue实例，初始化渲染
1. 准备容器 (Vue所管理的范围)
2. 引包 (开发版本包 / 生产版本包) 官网
3. 创建实例 new Vue()
4. 添加配置项 => 完成渲染
-->
<!-- 不是Vue管理的范围 -->
<div class="box2">
box2 -- {
{ count }}
</div>
<div class="box">
box -- {
{ msg }}
</div>
-----------------------------------------------------
<!-- Vue所管理的范围 -->
<div id="app">
<!-- 这里将来会编写一些用于渲染的代码逻辑 -->
<h1>{
{ msg }}</h1>
<a href="#">{
{ count }}</a>
</div>
<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
const app = new Vue({
// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
el: '#app',
// 通过 data 提供数据
data: {
msg: 'Hello world',
count: 666
}
})
</script>
</body>
</html>
3. Interpolation expression
(1) Conventional usage
-
Interpolation expression is a template syntax of Vue
-
We can use interpolation
表达式to render the data provided by Vue -
Expression: is a code that can be evaluated, and the JS engine will calculate a result
-
Language: { { expression }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
插值表达式：Vue的一种模板语法
作用：利用 表达式 进行插值渲染
语法：{
{ 表达式 }}
-->
<div id="app">
<p>{
{ nickname }}</p>
<p>{
{ nickname.toUpperCase() }}</p>
<p>{
{ nickname + '你好' }}</p>
<p>{
{ age >= 18 ? '成年' : '未成年' }}</p>
<p>{
{ friend.name }}</p>
<p>{
{ friend.desc }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
nickname: 'tony',
age: 18,
friend: {
name: 'jepson',
desc: '热爱学习 Vue'
}
}
})
</script>
</body>
</html>
(2) Wrong usage
1.在插值表达式中使用的数据 必须在data中存在
<p>{
{hobby}}</p> //如果在data中不存在 则会报错
2.支持的是表达式，而非语句，比如：if for ...
<p>{
{if}}</p>
3.不能在标签属性中使用 {
{ }} 插值 (插值表达式只能标签中间使用)
<p title="{
{username}}">我是P标签</p>
4. Responsive features
(1) What is responsiveness?
- When data changes, the view automatically updates
- Use Vue to develop, focus on the core logic of the business, and just modify the data according to the business. There is no need to care about the update of the view.
(2) How to access and modify the data in data
- The data in data will eventually be added to the instance
- Access data: "Instance.Attribute name"
- Modify data: "Instance.Attribute name" = "Value"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{
{ msg }} {
{ count }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 响应式数据 → 数据变化了，视图自动更新
msg: 'hello world',
count: 100
}
})
// data中的数据，是会被添加到实例上
// 1. 访问数据 实例.属性名
console.log(app.msg)
// 2. 修改数据 实例.属性名 = 新值
app.msg = 'hello world ok'
</script>
</body>
</html>
5. Development plug-in installation
(1) VSCode plug-in
- VSCode plug-in installation:
Vetur,VueHepler - Please refer to VSCode related knowledgeGetting started with VSCode
(2) Chrome browser plug-in
-
Download plugin
-
Install through Google Play Store (foreign website)
-
Minimalist plug-in download (recommended):https://chrome.zzzmh.cn/
-
-
Install plugin
-
Chrome browser input
chrome://extensions/to open developer mode -
Drag the downloaded plug-in directly into the page, and the installation is complete.
-
-
Use plugins
-
After installation, you can see an additional Vue debugging panel after F12.
-
You can modify the object value in it to debug the code
-
