vue总结篇

最新推荐文章于 2022-02-25 15:56:44 发布

Crystal_Mria

最新推荐文章于 2022-02-25 15:56:44 发布

阅读量326

点赞数

本文链接：https://blog.youkuaiyun.com/m0_37984616/article/details/83061425

版权

基本语法：

v-if,v-else
判断是否加载html的DOM。
v-show
调整css的display属性，DOM已经加载，只是没有CSS控制没有显示出来
v-for
循环渲染一组data的数组
v-text v-html
v-text防止暴露我们的{{xxx}}，v-html可以写html标签
v-on
监听事件，可以监听DOM事件来触发一些JS代码
v-model
可以实现双向数据绑定，如文本，文本域，多选按钮，单选按钮
v-bind
绑定html中的属性
8、v-pre v-cloak v-once
v-pre 在模版跳过vue的编译，直接输出原始值
v-cloak 在渲染完指定的DOM后才显示
v-once 在第一次DOM时进行渲染，之后视为静态内容

第二章全局API

1. Vue.directive
例：http://jsrun.net/5BpKp/edit?utm_source=website
在这里插入图片描述

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
自定义指令的生命周期
bind,inserted,update,componentUpdated,unbind

2. Vue.extend
返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。
例：http://jsrun.net/AMpKp/edit?utm_source=website
在这里插入图片描述

3. Vue.set

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。
由于Javascript的限制，Vue不能自动检测以下变动的数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Vue.set 全局操作</title>
</head>
<body>
    <h1>Vue.set 全局操作</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for=" aa in arr">{{aa}}</li>
        </ul>
    </div>
    <button onclick="add()">外部添加</button>
    <script type="text/javascript">
        function add(){
            console.log("我已经执行了");
           app.arr[1]='ddd';
           //Vue.set(app.arr,1,'ddd');
        }
        var outData={
            arr:['aaa','bbb','ccc']
        };
        var app=new Vue({
            el:'#app',
            data:outData
        })
    </script>
</body>
</html>

4. Vue的生命周期（钩子函数）

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>构造器的声明周期</title>
</head>
<body>
    <h1>构造器的声明周期</h1>
    <hr>
    <div id="app">
        {{message}}
        <p><button @click="jia">加分</button></p>
    </div>
        <button onclick="app.$destroy()">销毁</button>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:1
            },
            methods:{
                jia:function(){
                    this.message ++;
                }
            },
            beforeCreate:function(){
                console.log('1-beforeCreate 初始化之后');
            },
            created:function(){
                console.log('2-created 创建完成');
            },
            beforeMount:function(){
                console.log('3-beforeMount 挂载之前');
            },
            mounted:function(){
                console.log('4-mounted 被创建');
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate 数据更新前');
            },
            updated:function(){
                console.log('6-updated 被更新后');
            },
            activated:function(){
                console.log('7-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 销毁之前');
            },
            destroyed:function(){
                console.log('10-destroyed 销毁之后')
            }
        


        })
    </script>
</body>
</html>

5. Template 制作模版
一、直接写在选项里的模板

var app=new Vue({
     el:'#app',
     data:{
         message:'hello Vue!'
      },
     template:`
        <h1 style="color:red">我是选项模板</h1>
     `
})

二、写在template标签里的模板

 <template id="demo2">
             <h2 style="color:red">我是template标签模板</h2>
    </template>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            template:'#demo2'
        })
    </script>

三、写在script标签里的模板

<script type="x-template" id="demo3">
        <h2 style="color:red">我是script标签模板</h2>
    </script>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            template:'#demo3'
        })
    </script>

6. 组件
全局组件和局部组件
在这里插入图片描述
6. Component 组件props 属性设置