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>