【前端Vue】——课堂笔记（一）

💻博主现有专栏：

                C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，设计模式、Python机器学习等
🥏主页链接：

                Y小夜-CSDN博客

目录

🎯使用npm创建vue工程化项目步骤

🎯一个工程化vue项目是怎么运行的？（以创建好的一个工程化vue初始项目为例）

🎯数据绑定

🎯数据响应化处理的四个方法

🎯vue中的指令  “v-”开头的自定义属性

🎯条件渲染指令

---

🎯使用npm创建vue工程化项目步骤

（1）npm create vite@latest 创建一个基于vite的vue3项目
     输入项目名，选择框架，选择语言
（2）创建好后，按照提示去运行项目
  cd myvue1   进入项目文件夹中
  npm install 在项目文件夹中安装依赖包（node_moudles），可简写为npm i
  npm run dev 运行项目

---

        如果使用yarn，由于是第三方的包管理工具，需要先使用npm i yarn -g命令安装yarn，安装后输入yarn -v可以查看是否安装成功，创建项目时要输入的命令为
 (1)yarn create vite
 (2) 
  cd myvue2
  yarn
  yarn dev

---

        项目创建后，在vscode中打开该项目文件夹，如果要运行该做项目，建议在vscode终端中去执行运行项目的命令（注意：这时打开的终端命令行界面中文件路径就是这个项目文件夹），默认打开的是powershell命令行界面，如果输入npm run dev不能正常执行的话，先输入cmd切换到老的命令行界面，然后再输入npm run dev就能正常执行。

---

注意：创建vue工程化项目时可以直接使用模版
 yarn create vite myvitevue1 --template vue

---

vue工程化项目的目录结构及文件要特别关注的：
src：我们写代码都在这个文件夹里
src/components:主要放自定义组件
App.vue:根组件
main.js:项目的入口文件
index.html: 页面的入口文件，也就是说是vue项目运行时的主渲染文件
package.json：包管理配置文件

---

🎯一个工程化vue项目是怎么运行的？（以创建好的一个工程化vue初始项目为例）

（1）浏览器中渲染index.html页面的内容，具体的说是根据main.js中创建的vue实例将根组件App.vue的内容渲染到index.html的挂载元素div#app内；   
（2）观察App.vue组件里面的内容，可以发现该组件的模板内容由两部分组成：
App.vue组件里模板中的原始标签 + HelloWorld.vue组件模板中的内容
（3）App.vue中将导入的组件可以当自定义标签使用，并且使用时可以传递数值

        提醒：为了方便查看工程化vue项目中.vue组件之间的调用关系，最好为Chrome浏览器安装一个扩展程序vue.js-devtools,具体安装过程可以在网上百度一下，安装成功后会在Chrome浏览器的调试工具栏多一项“vue”

🎯数据绑定

  {{...}} 里面可以是js支持任意表达式形式    
  注意：在工程化vue项目中，要实现“数据驱动视图”，即js中的数据发生变化，页面上绑定该数据的地方也要实时进行更新，必须要将数据进行响应化处理

🎯数据响应化处理的四个方法

ref(): js常规类型的数据， 如果要读取或设置响应式化后的数据，一定要加value属性
reactive(): js中对象和数组
toRef(): 将响应式对象的单个属性转成响应式数据
toRefs(): 将响应式对象的所有属性转成响应式数据

🎯vue中的指令  “v-”开头的自定义属性

 （1）绑定内容
    v-text 相当于 js中的innerText属性，jQuery中的text()方法的效果
    v-html 相当于 js中的innerHTML属性，jQuery中的html()方法的效果
   注意：使用{{ }}形式绑定内容时效果和v-text的一样，即也不解析标签
  (2) 绑定属性
    v-bind:  简写形式 ：
    单向的数据绑定指令
 （3）绑定事件
    v-on:   简写形式 @
  (4) 双向数据绑定指令 v-model
  注意：
（1）可以看出，在绑定有value属性值的表单元素时，必须使用v-model进行双向数据绑定，而不能使用v-bind去绑定元素的value属性值；
（2）理解v-model在绑定input[type=text],textarea，input[type=radio],input[type=checkbox],select时的工作机制

🎯条件渲染指令

  v-if
  v-else-if
  v-else
  注意：
v-if和v-show用于显示/隐藏元素时的区别？
如果在页面中需要频繁地将一个元素隐藏和显示之间来回切换，用哪一个好？v-show
如果页面中一个元素可能存在永远也不需要渲染的情况，用哪一个好？v-if