Vue学习

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

下个阶段见啦！完结撒花