目录
1.什么是 Vue.js
2.Vue.js 优点
Vue中的第一个hello world
Vue指令
v-model
v-bind
v-on
v-if
v-show
v-for
Vue 实例生命周期
从传统架构转向单文件架构(通过组件拼接)
安装element-ui使用
1.什么是 Vue.js
2.Vue.js 优点
Vue中的第一个hello world
在vue官方中用这在线地址找到内容并保存。(这相当于一个vue的jar包)
在左侧的js中将vue.js导入进去然后src引用官方中的第一hello world就实现了
接下来我们对这个hello world解析
{{}}插值表达式在vue中用来获取data中的值,el和标签绑定通过id获取
Vue指令
如图我们用插值表达式{{}} v-text v-html也都可以实现,那么它们有什么区别呢?
答:插值表达式会将msg1中的你好赋值给插值表达式{{}}后面的vue不产生影响
而v-text和v-html会将标签<p>vue<p>中的vue覆盖掉,(就是把你好放在了这个p标签里)
v-text和{{}}都是拿到msg1文本然后赋值,而v-html还可以对这个msg1文本进行解析里面的标签
v-model
v-bind
对图片的属性进行双向数据绑定
如图中所示显示一张图片仅仅用src"地址"这样会把src图片写死了,用v-bind可以绑定data中的img,通过改变data中的img从而改变图片.(这里v-bind:可以简写成 :src默认使用(v-bind))
我们在改变前端一些样式的时候也会用到
我们定义了一个.imgcss,然后可以用v-bind:class={imgcss:isActive},将isActive写在data里设为true,则在使用时默认绑定的就是这个样式,当不想用这个样式时可以用按钮添加事件将isActive改变为false
v-on
这里强调一点:在methods方法中调用data中的数据必须要用this
v-if
v-show
这里强调一下:v-if和v-show的区别是前者在dom中如果为false直接移除,而后者则是display将其隐藏,总的来说频繁的切换用v-show,反之使用 v-if,前者的切换消耗小。
v-for
v-for的使用更像是java中的增强for循环,每一个值用插值表达式输出出来
对于一个表格来说前面的值可以为两个一个为对象,一个为索引。
Vue 实例生命周期
从传统架构转向单文件架构(通过组件拼接)
什么是node?
-
服务器端 JavaScript:Node.js 让 JavaScript 可以在服务器端运行,这样开发者可以使用同一种语言(JavaScript)来编写前端和后端代码,实现全栈开发。
-
事件驱动和非阻塞I/O模型:Node.js 是基于事件驱动和非阻塞I/O 的模型,这使得它能够处理大量并发连接,非常适合构建高性能、可伸缩的网络应用。
-
模块化:Node.js 支持 CommonJS 规范的模块系统,使得代码可以以模块的形式组织、管理和重用。
-
包管理器 npm:Node.js 自带 npm(Node Package Manager),是世界上最大的开源库生态系统,开发者可以通过 npm 轻松地安装、分享和管理 JavaScript 包和依赖项。
-
文件操作:Node.js 提供了丰富的文件操作 API,使得开发者可以轻松地对文件进行读取、写入和操作。
-
跨平台:Node.js 可以运行在多种操作系统上,包括 Windows、Mac OS 和各种 Linux 发行版,具有较高的可移植性。
-
构建工具和任务自动化:由于 Node.js 生态系统丰富,开发者可以使用各种构建工具和任务自动化工具(如 Gulp、Webpack 等)来简化开发流程、优化代码和资源管理。
类似与java中的maven
Vue.use(router)
的作用是在 Vue.js 应用中安装并注册 Vue Router,使得我们可以在应用中使用 Vue Router 提供的各种路由功能和组件。path就是我们配置的网站可以访问到的路径,最后导出这个rout对象(虽然默认访问的是App组件但是通过路由配置路径'/'即可在什么也没有时访问到index组件) 安装element-ui使用
在命令行中下载即可npm i element-ui -S
并在main.js中配置即可,在element-ui官网就可使用它的组件