💻博主现有专栏:
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