Vue是什么?为啥要学习他捏
Vue是前端优秀框架,是一套用于构建用户界面的渐进式框架
·是目前前端最火的框架之一
·企业技术栈中要求的知识点
·提升开发体验
·学习难度较低
安装Vue工具
PS:我自己安装得坎坎坷坷,历时整整一天,想记录一下这些坑;
1-cmd要用管理员身份运行(win+R---shift+ctrl+enter)
2-环境配置(系统变量里Path添加node.js和node_global的路径)要搞
Vue Cli Vue.js开发的标准工具,Vue Cli是一个基于Vue.js进行快速开发的完整系统
npm install -g @vue/cli
查看是否安装成功
vue --version
创建一个项目
vue create vue-demo
模板语法
文本
数据绑定最常见的形式就是使用“Mustache”双大括号语法的文本插值
<span>Message:{{msg}}</span>
export default{
name:'HelloWord',
data(){
return{
msg:"消息提示"
}
}
}
原始HTML
双大括号会将数据解释为普通文本,而非HTML代码。为了输出真正的HTML,你需要使用v-html指令
<p> Using mustaches:{{rawHtml}}</p>
<p> Using v-html directive: <span v-html = "rawHtml"></span></p>
data(){
return{
rawHtml:"<a href = 'https://www.itbaizhan.com'>百战</a>"
}
}
innerHTML和innerTest的区别
innerTest只能渲染文本,innerHTML可以渲染标签
属性Attribute
Mustache语法不能在HTML属性中使用,然而,可以使用v-bind指令,v-bind可以简写成:。
<div v-bind:id = "dynamicId"></div>
data(){
return{
dynamicId:1001
}
}
使用JS表达式
在我们的模板中,我们一直都只绑定简单的property键值,Vue.js都提供了完全的JS表达式支持
{{number+1}}
{{ok?'Yes' : 'No'}}
{{message.split('').reverse().join('')}}
这些表达式会在当前活动实例的数据作用下作为JS被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会失效。
{{var a = 1}} //这是语句,不是表达式
{{if(ok){return message}}} //流程控制也不会生效,请使用三元表达式
条件渲染
v-if
v-if指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回true值得时候被渲染。
<p v-if = "flag">我是孙猴子</p>
data(){
return{
flag:true
}
}
v-else
可以使用v-else指令来表示v-if得else块
<p v-if = "flag">我是孙猴子</p>
<p v-else>你是傻猴子</p>
data(){
return{
flag:false
}
}
v-show
另一个用于条件展示元素的选项是v-show指令
<h1 v-show = "ok">Hello!</h1>
v-if和v-show得区别
v-if是真正的条件渲染,因为它会确保在切换的过程中,条件块内得事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的,如果在初始渲染时条件为假,则什么也不做知道条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show就简单的多,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS进行切换。
一般来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果非常频繁的切换,则使用v-show比较好;如果在运行时条件很少改变,则使用v-if较好。
列表渲染
用v-for把一个数组映射为一组元素
我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法,其中items是源数据数组,而item则是被迭代的数组元素的别名。
<ul>
<li v-for = "item in items">{{item.message}}</li>
</ul>
data(){
return{
items:[{message:'Foo'},{message:'Bar'}]
}
}
维护状态
为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有的元素,你需要为每项提供一个唯一的key attribute:
<div v-for = "(item,index) in items" : key = "item.id|index">
<!--内容-->
</div>
事件处理
监听事件
我们可以使用v-on指令(通常缩写为@符号)来监听DOM事件,并在触发事件时执行一些JS。用法为v-on click = "methodName"或使用快捷方式@click = “methodName”
<button @click = "counter += 1">Add 1</button>
data(){
return{
counter:0
}
}
事件处理方法
许多事件处理逻辑会更为复杂,所以直接把JS代码写在v-on指令中是不可行的。因此v-on还可以接受一个需要调用的方法名称
<button @click = "greet">Greet</button>
methods:{
greet(event){
//event 是原生DOM event
if(event){
alert(event.target.tagName)
}
}
}
内联处理器中的方法
也叫事件传递参数
<button @click = "say('hi')">Say hi</button>
<button @click = "say('what')">Say what</button>
methods:{
say(message){
alert(message)
}
}
表单输入绑定
可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理。
<input v-model = "message" placeholder = "edit me"/>
<p>Message is: {{message}}</p>
data(){
return{
message:""
}
}
修饰符
.lazy
在默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步。可以添加lazy修饰符,从而转为在change事件之后进行同步(减少了立即搜索的效果)
<input v-model.lazy = "message"/>
<p>Message is: {{message}}</p>
data(){
return{
message:""
}
}
.trim
如果要自动过滤用户输入的首尾空白字符,可以给v-model添加trim修饰符
<input v-model.trim = "message"/>
data(){
return{
message:""
}
}
组件基础
单文件组件
Vue单文件组件(又名*.vue文件,缩写为SFC)是一种特殊的文件格式,它允许将Vue组件的模板、逻辑与样式封装在单个文件中
<template>
<h3>单文件组件</h3>
</template>
<script>
export default{
name:"MyComponent"
}
</script>
<style scoped>
h3{
color:red;
}
</style>
加载组件
第一步:引入组件 import MyComponentVue from'./components/MyComponent.vue'
第二步:挂载组件 componentsL{MyCoponentVue}
第三步:显示组件 <my-componentVue>
组件的组织
通常一个应用会以一嵌套的组件树的形式来组织
Props组件交互
组件与组件之间是需要存在交互的
Prop类型
Prop传递参数其实是没有类型限制的
props:{
title:String,
likes:Number,
isPublished:Boolean,
commentIds:Array,
author:Object,
callback:Function
}
温馨提示:数据类型为数组或者对象的时候,默认值是需要返回工厂模式
自定义事件组件交互
自定义事件可以在这组件中反向传递数据,prop可以将数据从父组件传递到子组件(app.vue->component),那么反向如何操作呢,就可以利用自定义事件实现¥emit
组件生命周期
每个组件在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同事在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会
为了方便记忆,我们可以将他们分类:
创建时:beforeCreate,created
渲染时:beforeMount、mounted(把网络请求放到这里)
更新时:beforeUpdate、updated
卸载时:beforeUnmount(把消耗性能的处理都干掉,比如:定时器)、unmounted
下个阶段见啦!完结撒花