结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
单词:{{words}}
单词大写:{{toUpper}}
#### Vue指令
##### v-once
这个指令让视图只渲染一次,将来就算相应的数据发生变化,也不会重新渲染。该指令主要在希望静态显示不需要更新数据的时候使用。
##### v-html
这个指令主要在需要操作原始HTML的时候使用。
##### v-bind
该指令在需要绑定HTML标签属性的时候使用。为了方便,该指令还有一个缩写`:`,例如`:class="myClass"`就相当于`v-bind:class="myClass"`。
##### v-on
该指令主要用于绑定事件处理程序。该指令有缩写`@`,例如`@click="onClick"`就相当于`v-on:click="onClick"`。
##### v-show、v-if、v-else和v-else-if
这几个指令主要用于条件渲染,将在后面进行介绍。
##### v-for
该指令用于渲染整个列表,将在后面进行介绍。
##### v-model
该指令可以让页面元素和数据进行双向绑定。默认情况下数据和页面元素是单向绑定的,使用该指令可以让其变成双向绑定。该指令主要用于处理表单等场景。
#### 条件渲染
v-if、v-else和v-else-if这几个指令用于条件渲染,让我们可以按照条件在页面上显示和隐藏某些元素。注意v-else-if指令是Vue 2.1新增的。类似的指令还有v-show,不过v-show指令仅仅改变元素的CSS display属性,也是说隐藏的元素还是存在于页面上,仅仅是不显示而已。而v-if等元素会真正创建和销毁元素。
这些指令的使用方法很简单,直接看例子就行了。
条件渲染
v-if渲染会实际创建和销毁对象
分数是:
不及格
及格
优秀
v-show仅仅调用CSS display属性
#### 列表渲染
如果需要渲染一组数据,可以使用v-for指令。v-for指令需要一个`item in items`块来声明迭代那些数据,这里`in`也可以改为`of`。如果需要获取迭代的索引的话,可以把迭代块声明为`(item, index) in items`这样的。另外除了迭代一个列表,也可以迭代一个对象的属性。
列表渲染
名字列表
- {{name}}
人物表格
编号 | 姓名 | 年龄 |
{{index}} | {{person.name}} | {{person.age}} |
#### 事件处理
v-on指令用于绑定事件处理函数,这里的函数需要在构造Vue实例的时候在`methods`属性中声明。
针对键盘按键,Vue还定义了一组按键修饰别名,详情请参考官方文档。下面是一个简单的例子。
事件处理
计数器
#### 绑定表单
如果要将数据和页面元素进行双向绑定,使用v-model指令。这个指令主要用于处理表单输入中。下面是一组表单例子。
绑定表单
文本框:{{text}}
多行文本:{{textArea}}
单选按钮:{{radio}}
复选框:{{checkbox}}
多选框:{{select}}
文本框:
多行文本:
单选按钮:
复选框:
多选框: 1 2 3 4
在处理表单输入的时候,还有`.lazy`、`.number`、`.trim`几个修饰符,它们的作用分别是在change事件中更新、将表单输入转换为数值以及去掉表单中的前后空格。
#### 组件
前面介绍了Vue的各种功能,但是这些功能并不能直接在项目中使用。因为如果直接使用的话,会导致出现一个非常大的Vue实例,这和将所有代码都写在一个文件的道理是一样的。所以Vue引入了组件来进行模块化功能。
定义组件和定义一个Vue实例类似。不同的是,组件需要有自己的模板,而且组件的`data`属性必须是一个函数。原因是假如一个组件在多个地方复用,那么原本的`data`属性会导致所有组件实例共用一个属性值。使用函数后,每个组件实例都会有自己独立的数据。更加详细的解释和例子请查看官方文档。
let component1 = {
template: ‘
{{hello}}
’,data() {
return {
hello: ‘hello world’
}
}
}
定义好了组件之后,我们还需要在Vue中注册它。第一种方法是全局注册,这样组件就可以在全局范围中使用。
Vue.component(‘组件标签名’, {
//实际组件
})
第二种方法更常见,就是局部注册。将组建注册到局部Vue实例,那么组件只会在该实例的作用域内可见。局部注册需要在创建Vue实例的时候讲组件传入到`components`属性中。
let vm8 = new Vue({
el: ‘#s8’,
components: {
‘hello-world’: component1,
}
})
组件注册完毕之后,我们就可以像使用自定义标签一样使用它了。
如果需要从父组件中传递数据,需要在子组件中声明`props`属性制定要传入的数据。
let component1 = {
template: ‘
{{hello}} {{name}}
’,data() {
return {
hello: ‘hello world’
}
},
props: [
‘name’
]
}
然后就可以像这样传递数据了。
如果需要传递动态数据,使用`v-bind`指令即可。
一个完整的例子见下。
组件
hello world组件
从父组件传递数据
动态传递数据
#### 过渡效果
最后来说说Vue的过渡效果,这里只说说最基本的进入离开过渡。Vue还支持更加复杂的状态过渡,如果想了解这些更复杂的知识,请直接查看文档。
Vue封装了一个组件`transition`,当其中的组件被插入、删除,或者发生变化的时候,会自动查看这些组件是否应用了过渡CSS类,然后再恰当的时机插入和删除这些类,从而实现过渡效果。过渡类名在官方文档中有介绍,还有一张过渡示意图,这里我就不再介绍了。
比如说我现在需要一个透明度过渡效果。我可以这样编写CSS类。
.v-enter-active {
transition: all 1s;
}
.v-leave-active {
transition: all 1s;
}
.v-enter, .v-leave-to {
opacity: 0;
}
然后用下面的方法使用,就可以看到实际效果了。
按钮过渡
当然对于我这种前端小白来说,自己编写过渡和动画效果还是有点困难。幸好有很多第三方动画库,而且Vue允许我们自定义类名,以便和这些动画库配合使用。比方说[Animate.css](https://bbs.csdn.net/topics/618166371),我们可以将CDN添加到页面中来使用。
然后自定义类名即可。
Hello
完整的单文件例子可以查看[我的示例项目](https://bbs.csdn.net/topics/618166371)。
### Vue工程化
前面介绍了Vue的基本概念,但是这些概念无法直接用在项目中。下面通过Vue和各种工具链的使用,来介绍如何用Vue创建实际前端项目。
#### 从模板创建Vue项目
首先确保你安装了NodeJS,然后安装Vue命令行工具。如果npm速度太慢的话,可以使用[淘宝镜像](https://bbs.csdn.net/topics/618166371)来加速。
npm install -g vue-cli
安装完成之后,使用`vue-cli`来创建模板项目。由于WebPack打包工具现在非常流行,所以这里选择创建WebPack模板。创建的时候除了Vue之外,其他组件如vue-router、eslint等都不要选。
vue init webpack your-app-name
项目创建完毕之后,切换到项目文件夹中,可以看到已经生成了一堆文件。然后我们使用`npm i`来安装所有的依赖包。安装完成之后,使用`npm run dev`来运行测试服务器。这个项目模板支持热重载等特性,所以我们接下来的开发过程可以直接在此基础上进行,不需要重启服务器。这时候我们也可以使用WebStorm的开发工具编辑项目,充分享受IDE带来的便捷。
下面介绍一下模板项目的结构。build和config文件夹存放的是项目的构建文件和配置文件,会有WebPack和npm使用。node\_modules是项目所需的模块存放位置。src文件夹下存放着项目所需的源代码,主要是JavaScript和Vue文件。assets文件夹存放的是项目所需的静态文件,例如图片、样式表等。components文件夹是Vue组件的存放位置。App.vue是项目默认的跟组件。main.js是项目的入口JavaScript文件。index.html是项目的默认HTML文件。图里面还有一个sample.html,就是上面我介绍Vue时使用的单HTML文件。
![img_fd466e94b5603884bc7471f99f823772.png](https://yqfile.alicdn.com/img_fd466e94b5603884bc7471f99f823772.png)
项目结果图
#### 单文件组件
前面介绍了Vue强大的组件功能,但是这种组件是不能扩展的。一般情况下,项目中应该使用单文件组件。在上面创建的项目中,实际上已经包含了一个单文件组件。让我们看看实际的项目应该如何组织这些组件。
先来看看主HTML文件`index.html`,它的内容很简单。它的真实内容会由WebPack打包进去。一般情况下我们只需要保持不变就好了。当然页面标题之类的属性还是要改的。
然后来看看项目入口文件`main.js`,它的内容如下。可以看到它的作用很简单,创建根Vue实例,并将根应用组件`App`注入其中。
import Vue from ‘vue’
import App from ‘./App’
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
template: ‘’,
components: { App }
})
然后来看看根组件`App.vue`中写了什么,这是一个单文件组件,它调用了另一个单文件组件`<hello-world/>`。单文件组件和前面介绍的组件一样,都有一个模板属性,需要注意模板属性中的元素必须有一个根元素,不能出现多个并列的元素。还有一个脚本块,这里是单文件组件中代码逻辑部分,需要注意的是,这个地方必须向外暴露创建Vue实例所需的那个属性对象。这里还有一个样式块,是单文件组件修改样式的地方。
### Vue路由快速入门
#### 安装
最简单的办法就是在前面创建模板项目的时候同时选择使用vue-router。如果没有在创建项目是选择vue-router,就需要手动添加到项目中。
### 最后
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/dc1d751f44f9a974ace58a0c63be1e51.webp?x-oss-process=image/format,png)
方。
### Vue路由快速入门
#### 安装
最简单的办法就是在前面创建模板项目的时候同时选择使用vue-router。如果没有在创建项目是选择vue-router,就需要手动添加到项目中。
### 最后
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
> [外链图片转存中...(img-NDQIbz1v-1715177909830)]