20201012岳浩天

学习知识

Vue

Vue是第三方开发的、渐进式的、基于MVVM设计模式的、纯前端的JS框架

第三方:别人写好的,我们直接下载即可

渐进式:可以逐步在项目中引入Vue的各项功能,同时,可以与其他技术混用

MVVM设计模式:

界面(View):视图,指网页中的元素和样式,一般指的就是html和css。view是.html网页中的一个需要动态加载内容的父元素,比如:"div#app"。html中的视图,也被称为模板template,如果发生template错误,那么就在html中查找就可以了

数据模型(Model):集中保存界面中所需要的所有变量和变量值。模型,指程序中创建的或者从远程获取的数据,一般使用js中的一个对象data来保存,内容就会直接显示到view中

控制器(ViewModel):视图模型/控制,用于替代之前DOM/jQuery操作,封装了重复的增删改查操作,把模型中的数据和视图中的html元素“绑定”到一起。Vue类型提供的就是一种强大的ViewModel对象,可以自动同步数据和页面元素。专门负责自动将模型中的变量值自动同步到界面中所需要的位置,实现实时同步

ViewModel核心原理:(响应系统/虚拟DOM树)

纯前端:不需要任何后端技术,就能够独立运行

框架:包含核心功能的半成品代码,开发人员只需要根据业务的需求,添加定制自己个性化的一部分内容即可

(构造+原型)

什么时候使用Vue?为什么使用Vue?

1.Vue适用于以数据操作为主的项目(web/app),2.我们使用vue框架可以提高项目的开发效率

v-bind 绑定class/style

<body>
    <div id="app">
        <img :src="imgUrl" alt="">
        <h3 :class="titleColor">标题</h3>
        <!-- 动态绑定 -->
        <!-- <h3 :class="{
            titleColor:istitleColor,fontS:isfontS
        }">标题</h3> -->
        <h3 :class="getClasses()">标题</h3>
        <!-- 动态绑定style -->
        <h3 :style="{color:color,fontSize:fontSize+'px'}">标题</h3>
        <h3 :style="getStyles()">标题</h3>


    </div>

    <script src="./js/vue.js"></script>
    <script>
        var data = {
            imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340',
            titleColor: "titleColor",
            color: 'red',
            fontSize: 100,
            istitleColor: true,
            isfontS: true
        }
        var vm = new Vue({
            el: "#app",
            data: data,
            methods: {
                getClasses: function () {
                    return {
                        titleColor: this.istitleColor,
                        fontS: this.isfontS
                    }
                },
                getStyles: function () {
                    return {
                        color: this.color,
                        fontSize: this.fontSize + 'px'
                    }
                }
            },
        })
    </script>
</body>

计算属性的简单应用

<body>
    <div id="app">
        <p>{{firstName+' '+lastName}}</p>
        <p>{{firstName}} {{lastName}}</p>
        <p>{{getFullName()}}</p>
        <p>{{fullName}}</p>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        var data = {
            firstName: 'Lebron',
            lastName: 'James'
        }
        var vm = new Vue({
            el: "#app",
            data: data,
            computed: {
                fullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            },
            methods: {
                getFullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            },
        })
    </script>
</body>

心得

今天进入了vue的学习,很重要,所以老师讲的比较慢,知识点一个一个弄懂了

还有就是说,近期可能会有企业来宣讲招人,心里有些没底,自我认知还没有达到上岗要求,近期要抓紧时间,临阵磨枪那也得磨!

标签

评论

this is is footer