微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

vue初学前端笔记整理2021年

发布时间:2021-05-04 来源:未知 点击:

前端笔记

  1. 前端框架

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

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

  1. 前端分层

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

  1. MVVM模式

gAtpVg.png

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,交由浏览器去绘制。

参考链接

  1. 双向绑定

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

gV5Ym6.png](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>
  1. 组件

gV5b7T.png](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>
  1. axios

gVHhyd.png

<!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>

各部分关系如下:

自定义事件分发

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


这就是微学网-程序员之家为你提供的"vue初学前端笔记整理2021年"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14362.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧