Vue基础知识点总结

基础

什么是mvvm

View层

• 视图层
• 在前端开发中，通常是DOM层
• 主要作用是给用户展示各种信息

ViewModel层

• 视图模型层
• 视图模型是View和Model沟通的桥梁
• 实现了数据绑定，将Model的改变实时的反应到View中
• 实现了DOM监听，当DOM发生一些事件时，可以监听到，并在需要的情况下改变对应的Data

Model层

1. 数据层
2. 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据

常用指令

v-text:展示对应的文本

<div id="app">
        <div v-text="message"></div>
    </div>

    </template>
    <script>
        new Vue({
    
    
            el: "#app",
            data: {
    
    
                message:"你好"
            }
        })

v-html:把值中的标签渲染出来
v-if：根据表达式的真假渲染元素，在切换元素时，元素及它的数据绑定会被销毁并重建
v-show：根据表达式真假渲染元素，切换时会改变元素的display属性，控制元素的显示与隐藏
v-if和v-show的使用：当需要显示与隐藏之间切换很频繁时，使用v-show。当只有一次切换时，通常使用v-if
v-block：避免浏览器直接显示出未编译的Mustache标签
v-for：可以循环数组、对象、数字、字符串，v-for在哪个标签上就循环哪个标签；当v-for遍历对象时，若只获取一个值，获取的值为value，若获取两个值，则为对象的键和值

<li v-for='(value,key) in info'>{
    
    {
    
    value}}{
    
    {
    
    key}}</li>

v-bind：设置元素的属性（src、class等）
v-bind可以动态绑定class:<h5 :class="{类名：布尔值}"></h5>
v-bind可以动态绑定style：<div :style="{color:'red',fontSize:'10px'}"></div>，style后面跟的是对象类型
v-on：用于监听指定元素的DOM事件，比如点击事件，绑定事件监听器
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始的Mustache标签，后面不需要任何表达式。（后面很少用到）
v-once：只渲染元素和组件一次，当随后重新渲染时，元素、组件及其所有子节点会被视为静态内容并跳过。该指令后面不需要任何表达式
v-model：数据的双向绑定，这个只能用在表单元素中，并且在赋值时默认为是字符串类型

v-model的修饰符
1、 lazy修饰符：
默认情况下，v-model默认是在input事件中同步输入框的数据的，就是一旦有数据发生改变，对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点或按下回车时才会更新。
2、number修饰符：
默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型来处理。当我们需要处理的是数字类型时，使用number修饰符可以让在输入框中输入的内容自动转换成数字类型
3、trim修饰符：
如果输入的内容首尾有很多空格，trim修饰符可以过滤内容左右的空格

v-model实例之v-model与radio

<div id="app">
        <input type= "radio" id="man" value="男" v-model="sex"> 男
        <input type="radio" id= "woman" value=" 女" v-model="sex"> 女
        <h2>你的性别是: {
    
    {
    
    sex}}</h2>
    </div>
    </template>
    <script>
        new Vue({
    
    
            el: "#app",
            data: {
    
    
                sex:''
            }
        })
    </script>

v-model实例之v-model与checkbox（单选框与复选框）

<div id="app">
    <!--单选框-->
        <label for="agree"> 
        <input type="checkbox" value="agree" v-model= "isagree">同意协议
        <h2>{
    
    {
    
    isagree}}</h2>
        <button :disabled="!isagree"> 下一步</button>
        </label>
    <!--多选框--> 
        <input type="checkbox" value="篮球" v-model= "hibits">篮球
        <input type="checkbox" value="足球" v-model= "hibits">足球
        <input type="checkbox" value="羽毛球" v-model= "hibits">羽毛球
        <input type="checkbox" value="乒乓球" v-model= "hibits">乒乓球
        <h2>{
    
    {
    
    hibits}}</h2>
    </div>
    <script>
        new Vue({
    
    
            el: "#app",
            data: {
    
    
                hibits:[]
            }
        })
    </script>

let与const

let:可以将let看做更完美的var，变量需要改变时使用let，let具有块级作用域，var没有块级作用域
const：将某个变量修饰为常量，在js中，被const修饰的常量不可以再次赋值

什么时候使用const？

• 当我们修饰的标识符不会被再次赋值时，可以使用const来保证数据的安全性

const使用的注意点：

• 一旦被const修饰的常量不能再修改
• 必须进行初始化
  -常量的含义是指向的对象不能修改，但是可以改变对象内部的属性

过滤器

全局过滤器

vue.filter('过滤器名称',function(){
    
    
    
})

局部过滤器

filters:{
    
    
     dateFormat:function(data,param){
    
    

     }
}

生命周期函数

什么是vue的生命周期函数？
vue实例或者组件，从创建到使用 到最后被销毁的过程叫做vue的生命周期函数

第一阶段：初始化
在第一节页面加载就会被触发

beforeCreate()（创建前）：这是遇到的第一个生命周期函数，在实例初始化后被调用，这个时候的this不能用，在data中的数据、methods的方法都获取不到
created()（创建后）：实例已经创建完成了，实例对象已经完成了，这时候可以访问data中的数据，以及methods中的方法，但是不能操作dom节点
beforeMount()（载入前）：在挂载前开始被调用render函数
mounted()（载入后）：挂载完毕，这时候可以使用dom节点，一些需要dom的操作这时候才可以进行。只要执行完这个生命周期，就表示整个vue实例已经初始化完毕，此时，组件已脱离创建阶段，进入到运行阶段

	new Vue({
    
    
            el: "#app",
            data() {
    
    
                return {
    
    
                    message: "Vue"
                }
            },
            beforeCreate() {
    
    
                console.log(this.message);//undefined
            },
            created() {
    
    
                console.log(this.$el);//undefined
                console.log(this.message);//Vue
            },
            beforeMount() {
    
    
                console.log(this.$el);//dom元素
                console.log(this.message);//Vue
            },
            mounted() {
    
    
                console.log(this.$el);//dom元素
                console.log(this.message);//Vue
            }
        })

第二阶段：更新

beforeUpdate()（更新前）：data数据已经更新了，但是vue中的组件对应的dom内部中的数据没有更新
updated()（更新后）：先根据data中的最新数据，在内存中重新渲染出一份最新的dom树，当最新的内存dom树被更新后，会把最新的内存dom树重新渲染到真实的页面中，此时页面和data数据已经都是最新的了

第三阶段：销毁

beforeDestroy()（销毁前）：当执行该函数时，vue实例已经进入到了销毁阶段，但是实例身上所有的data和methods以及过滤器、指令…都处于可用阶段
destroyed()（销毁后）：当执行该函数时，组件已经被完全销毁了。

Vue的组件化

组件化
vue组件系统提供了一种抽象，可以让我们使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树

注册组件的步骤：

1、创建组件构造器

new Vue({
    
    
            
        })

2、调用Vue.component()方法注册组件

Vue.component('cpn1', {
    
    
            template: ``
        })

3、在Vue实例范围使用组件

<diV id="app">
        <cpn1></cpn1>
        <cpn2></cpn2>
    </div>

全局组件和局部组件

全局组件：
当通过调用Vue.component()注册组件时，组件的注册是全局的
全局组件可以在任意Vue示例下使用
局部组件：
如果注册的组件是挂载在某个实例中，就是局部组件

<script>
        // 全局组件
        Vue.component('cpn1', {
    
    
            template: `
            <div>
            <h2>你好啊</h2> 
            <h3>哈哈哈哈</h3>
            </div> `
        })
        new Vue({
    
    
            el: "#app",
            data: {
    
    
                message: "你好"
            },
            // 局部组件
            components: {
    
    
                cpn2: {
    
    
                    template: `
                            <div>
                                <h2>你好</h2>
                                <h3>啦啦啦啦啦</h3>
                            </div>`
                }
            }
        })
    </script>

组件数据的存放

组件很像一个vue实例，组件对象也有data属性，但是data属性必须是一个函数，函数返回值是一个对象，对象内部保存着数据

new Vue({
    
    
            el: "#app",
            data: {
    
    
                message:'你好'
            }
        })

组件里的data

1、组件可以有自己的data数据
2、组件的data和实例中的data不太一样，实例中的data可以是一个对象，但是组件中的data必须是一个方法
3、组件中的data为一个方法，且该方法内部必须返回一个对象才行。因为要确保每个实例里的数据是唯一的，如果data里的数据是放在实例外部的会被其他实例共享。
4、组件中的data和实例中的data使用方法一样

js文件的打包

现在的js文件中使用了模块化的方式进行开发，它们可以直接使用嘛？？----------------------不可以
原因：
1、因为如果直接在index.html中引入js文件，浏览器并不识别其中的模块化代码。
2、在真实的项目中有很多这样的js文件，一个个引入太麻烦，并且后期非常不方便管理

父子组件之间的通讯

父传子：通过v-bind: (：)来传值，通过props来接收值

<div id="app">
		<!-- 通过v-bind指令来传值 -->
        <cpnc :cmovies="movies"></cpnc>
    </div>
    <template id="cpn1">
        <div>
            <ul>
                <li v-for="item in cmovies">{
   
   {item}}</li>
            </ul>
        </div>
    </template>
    <script>
    //子组件
        const cpn = {
     
     
            template: "#cpn1",
            // 子组件通过props来接收值
            props: ["cmovies"],
            data() {
     
     
                return {
     
     

                }
            }
        }
        //父组件
        new Vue({
     
     
            el: "#app",
            data: {
     
     
                message: "你好啊",
                movies: ["托马斯", "海绵宝宝", "派大星"]
            },
            components: {
     
     
                cpnc: cpn
            }
        })
    </script>

子传父：@increament="changeable"父组件传changeable方法给子组件
子组件接收父组件的方法，并用$emit把子组件的值传给父组件。
在父组件中接收子组件所有参数的同时，可以添加自定义参数

<div id="app">
        <!-- 1111111111父组件传changeable方法给子组件 -->
        <cpn @increament="changeable"></cpn>
        <h3>总数为：{
   
   {count}}</h3>
    </div>
    <template id="cpn1">
        <div>
            <button @click="increament">+</button>
            <button @click="decreament">-</button>
        </div>
    </template>
    <script>
        //子组件
        const cpn = {
     
     
            template: "#cpn1",
            data() {
     
     
                return {
     
     
                    num: 0
                }
            },
            //22222222子组件接收父组件的方法，并用$emit把子组件的值传给父组件
            // 数字加加，并将数据发送，increament为事件名称，发送数据为this.num
            methods: {
     
     
                increament() {
     
     
                    this.num++;
                    this.$emit("increament", this.num);
                },
                decreament() {
     
     
                    this.num--;
                    this.$emit("increament", this.num);
                }
            }
        }
        new Vue({
     
     
            el: "#app",
            data: {
     
     
                count: 0
            },
            components: {
     
     
                cpn: cpn
            },
            methods: {
     
     
                changeable(num) {
     
     
                    this.count = num;
                }
            }
        })
    </script>

脚手架

脚手架可以快速搭建Vue开发环境以及对应的webpack配置。
Vue CLI2初始化项目：vue init webpack 项目名称
Vue CLI2运行项目：npm run dev
Vue CLI3初始化项目：vue create 项目名称
Vue CLI3运行项目：npm run serve
Runtime-Compiler和Runtime-only的区别：如果在开发中，选择使用template，就需要选择Runtime-Compiler；在开发中使用的是.vue文件夹开发，选择Runtime-only

路由

安装使用vue-router

安装：npm install vue-router --save

在模块化工程中使用：
1、导入路由对象，并且调用Vue.use(VueRouter)
2、创建路由实例，并且传入路由映射配置
3、在Vue实例中挂载创建的路由实例

// 配置路由相关信息
import Vue from 'vue';
import VueRouter from 'vue-router';
//1.安装插件
Vue.use(VueRouter)
// 2、创建vuerouter对象
const routes = new VueRouter({
    
    
  //配置路由和组件之间的关系
  router:[]
})
// 3、将router对象传入到vue实例中，将router对象导出
export default router

然后需要在src下的main.js中导入，并将router挂载

import router from './router'

new Vue({
    
    
  render: h => h(App),
  router
})

使用vue-router的步骤

1、创建路由组件
2、配置路由映射：组件和路径之间的关系
3、使用路由：通过router-link和router-view标签

• 先创建.vue文件，并通过export default{}导出
• 在router下的index.js中导入
• 创建路由组件并配置路由映射

routes = [
  {
    
    
    path: '/home',----------------路径
    component: 组件名称
  },

• 在 App.vue中，使用router-link和router-view

router-link：该标签是一个vue-router中已经内置的组件，它会被渲染成一个a标签

router-view：该标签会根据当前路径动态渲染出不同的组件

路由的懒加载

1、路由懒加载的作用主要是将路由对应的组件打包成一个个的js的代码块
2、只有在这个路由被访问到的时候，才加载对应的组件
懒加载的方式：

const Home = () => import(’…/views/home/Home.vue’)

$router和$route的区别

$router为VueRouter实例

$route为当前router跳转对象