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

合集 - Vue学习(5)

1.vue学习--模板语法(一、概述&基本使用)2022-09-15

2.vue学习--模板语法(二、指令&数据绑定)2022-09-153.vue学习--模板语法(三、事件绑定)2022-09-154.vue学习--模板语法(四、属性样式绑定&流程语句)2024-05-095.vue学习--模板语法(五、选项卡案例)2024-05-09

收起

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>

2.3 Vue.js之HelloWorld细节分析

1.实例参数分析

• el:元素的挂载位置（值可以是CSS选择器或DOM元素）
• data:模型数据（值是一个对象）

2.插值表达式用法

• 将数据填充到HTML标签中
• 插值表达式支持基本的计算操作

3.Vue代码运行原理分析

• 概述编译过程概念（Vue语法->原生语法）

3.Vue模板语法

模板语法概览

• 差值表达式
• 指令
• 事件绑定
• 属性绑定
• 样式绑定
• 分支循环结构