vue学习--模板语法(一、概述&基本使用)

最新推荐文章于 2024-09-30 16:19:08 发布

似水明俊德

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量13

点赞数

文章标签： vue.js 学习前端 javascript ecmascript

本文链接：https://blog.csdn.net/nullcodeworld/article/details/139184570

版权

1.Vue概述

Vue.js的创建者：尤雨溪

2014年2月，Vue.js正式发布
2015年10月27日，正式发布1.0.0
2016年4月27日，发布2.0的预览版本

Vue：渐进式JavaScript框架

声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

官网：https://cn.vuejs.org/v2/guide/

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
灵活：在一个库和一套完整框架之间自如伸缩
高效：20KB运行大小，超快虚拟DOM

2.Vue基本使用

2.1传统开发模式对比

原生js:

<div id="msg"></div>
   <script type="text/javascript">
      var msg = 'Hello World';
      var div = document.getElementById('msg');
      div.innerHTML = msg;  
   </script>

jquery:

<div id="msg"></div>
   <script type="text/javascript" src = "js/jquery.js"></script>
   <script type="text/javascript">
      var msg = 'Hello World';
      $('#msg').html(msg);
   </script>

2.2 Vue开发模式

vue:

<div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        })
    </script>