vue笔记

前端笔记

前端框架

](https://imgtu.com/i/gAGJsS)

](https://imgtu.com/i/gAJ8YR)

前端分层

](https://imgtu.com/i/gAJqXT)

MVVM模式

js更换内容时，需要操作dom进行内容的替换删除

而vue不删除dom元素

vue.js的核心概念就是：监听、替换

虚拟DOM?

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

参考链接

双向绑定

通过v-model属性进行双向绑定,可以实时的显示填写的数据。

](https://imgtu.com/i/gV5Ym6)

<!--双向绑定-->
<div id="app">
    内容:<input type="text" v-model="message"> {{message}}
</div>

<div id="app2">
    <input type="radio" name="sex" value="男" v-model="sex" >男
    <input type="radio" name="sex" value="女" v-model="sex" >女
    <p>
        性别:{{sex}}
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
            el: '#app',
            data: {
                message: ''
            }
        }
    )

    new Vue({
            el: '#app2',
            data: {
                sex: '女'
            }
        }
    )
</script>

组件

](https://imgtu.com/i/gV5b7T)

<div id="components-demo">
    <!--组件 基础-->
    <blog-post title="My journey with Vue"></blog-post>
    <blog-post title="Blogging with Vue"></blog-post>
    <blog-post title="Why Vue is so fun"></blog-post>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('blog-post', {
        props: ['title'],
        template: '<h3>{{ title }}</h3>'
    });

    new Vue({ el: '#components-demo' })   //类似于 中间商，不可或缺
</script>

axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

<!-- axios异步-->
<div id="app" v-clock>
    <p>姓名:{{info.name}}</p>
    <p>性别:{{info.sex}}</p>
    <p>年龄:{{info.age}}</p>
</div>
    
<!--引入 js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return{
                info:{
                    name:null,
                    sex: null,
                    age: null
                }
            }
        },
        //钩子函数
        mounted(){
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    })
</script>
</body>
</html>

关于mounted(), 有关vue的生命周期

lifecycle.png (1200×3039) (vuejs.org)

计算属性

只要内容没有被修改，就不会重新计算，而是从缓存中取出数值。

<div id="app">
    <p>time: {{curTime()}}</p>  <!--函数，带括号-->
    <p>time2: {{curTime2}}</p>   <!--计算属性，不带括号-->
</div>
<script>
    let vm = new Vue({
        el: '#app',
        methods:{
            curTime: function (){
                return Date.now();
            }
        },
        computed: {
            curTime2: function (){
                return Date.now();
            }
        }
    })
</script>

插槽

插槽就是通过组件，实现内容的热替换。

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in items":item="item"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component("todo",{
        template: '<div><slot name="todo-title"></slot> <ul><slot name="todo-items"></slot></ul></div>'
    });
    
    Vue.component('todo-title', {
        props:['title'],
        template: '<div>{{title}}</div>'
        }
    );
    Vue.component("todo-items", {
        props:['item'],
        template: '<li>{{item}}</li>'
        }
    );
    
    new Vue({
        el: "#app",
        data: {
            title: "anchris学VUE",
            items: ['Java','计算机网络','linux']
        }
    });
</script>

各部分关系如下：

自定义事件分发

实现的功能：点击按钮可删除对应的数据

小结

posted @ 2021-05-04 12:41 AnChris 阅读(79) 评论(0) 收藏举报

刷新页面返回顶部

Chris111

vue笔记

前端笔记

公告