美文网首页
2019-04-16(Vue基础入门一)

2019-04-16(Vue基础入门一)

作者: 随性个性随机 | 来源:发表于2019-04-16 13:09 被阅读0次

    vue(一)

    标签(空格分隔): 前端笔记


    vues是一套用于构建用户界面的渐进式框架。与其他大型框架的不同的是,vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用。vue也完全能够为复杂的单页应用提供驱动。


    1、 vue基础

    1.1 历史介绍

    • angular:2009年,

    • react:用户体验好

    • vue:2014年,

    1.2 前端框架和库的区别

    • jquery库 --> dom操作+ 请求

    • art-template库:模板引擎

    • 框架:全方位功能齐全

    • KFC的是世界里,库就是一个小套餐,框架就是全家桶

    • 代码上的不同

      • 一般使用库的代码,是调用某个函数,我们自己把控库的代码

      • 一般使用框架,其框架在帮我们运行我们编写好的代码

    1.3 vue 起步

    • 引包

    • 创建实例对象

    • 绑定数据

    
    <div>
    
        <!--vue的模板语法 {{}} 双大括号 (插值表达式)-->
    
        <p> {{msg}} </p>
    
        <p> {{1+1}} </p>
    
        <p> {{isTrue}} </p>
    
        <p> {{str.split(' ').reverse().join(' ')}} </p>
    
        <p> {{1>2?'真的':'假的'}} </p>
    
    </div>
    
    <script src="vue.js"></script>
    
    <script>
    
        //创建实例对象
    
        //如果template中定义了内容,那么优先加载template,如果没有定义内容那么加载的是#app的模板
    
        var app =  new Vue({
    
            el:"#app",
    
            data:{
    
                //数据属性,既可以是一个对象,也可以是一个函数
    
                msg:"黄瓜",
    
                isTrue:1==1,
    
                str:"hello vue"
    
            },
    
            template:""
    
        });
    
        //除了数据属性 vue实例还暴露了一些有用的实例属性和方法,他们都有前缀$
    
        console.log(app);
    
        console.log($el);
    
        console.log($data);
    
    </script>
    
    

    相关文章

      网友评论

          本文标题:2019-04-16(Vue基础入门一)

          本文链接:https://www.haomeiwen.com/subject/gcqbwqtx.html