码迷,mamicode.com
首页 > 其他好文 > 详细

vue基础

时间:2020-06-12 14:10:56      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:渐进   属性   var   span   tle   child   分析   org   append   

  • Vue概述
  • Vue基本使用
  • Vue模板语法
  • 基础案例
  • Vue常用特性
  • 综合案例

1. Vue概述

Vue:渐进式JavaScript框架
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

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

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

2. Vue基本使用

① 传统开发模式对比

<!-- 原生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>

② Vue.js之HelloWorld基本步骤

<!-- vue方法 -->
<div id="app">
    <div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: #app,
        data: {
            msg: HelloWorld
        }
    })
</script>

最直观的改变就是:vue不需要我们直接操作DOM了

③ Vue.js之HelloWorld细节分析

1)实例参数分析

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

2)插值表达式用法 :插值表达式就是{{msg}}形式

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

3)Vue代码运行原理分析

  • 概述编译过程的概念(Vue语法原生语法)

技术图片

3. Vue模板语法

① 模板语法

1)如何理解前端渲染?

把数据填充到HTML标签中 

技术图片

2)前端渲染方式

  • 原生js拼接字符串
  • 使用前端模板引擎
  • 使用vue特有的模板语法 

3)原生js拼接字符串 

基本上就是将数据以字符串的方式拼接到HTML标签中,前端代码风格大体上如下  

var d = data.weather;
var info = document.getElementById(‘info‘);
info.innerHTML = ‘‘;
for(var i=0;i<d.length;i++){
    var date = d[i].date;
    var day = d[i].info.day;
    var night = d[i].info.night;
    var tag = ‘‘;
    tag += ‘<span>日期: ‘+date+‘</sapn><ul>‘;
    tag += ‘<li>白天天气: ‘+day[1]+‘</li>‘
    tag += ‘<li>白天温度: ‘+day[2]+‘</li>‘
    tag += ‘<li>白天风向: ‘+day[3]+‘</li>‘
    tag += ‘<li>白天风速: ‘+day[4]+‘</li>‘
    tag += ‘</ul>‘;
    var div = document.createElement(‘div‘);
    div.innerHTML = tag;
    info.appendChild(div);
}

缺点: 不同开发人员的代码风格差别很大,随着业务的复杂,后期的维护变得逐渐困难起来

4)使用前端模板引擎

下面代码是基于模板引擎art-template的一段代码,与拼接字符串相比,代码明显规范了很多,它拥有自己的一套模板语法规则。

<script id="abc" type="text/html">
    {{if isAdmin}}
    <h1>{{title}}</h1>
    <ul>
        {{each list as value i}}
            <li>索引 {{i + 1}} : {{value}}</li>
        {{/each}}
    </ul>
    {{/if}}
</script>

优点:大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护。
缺点:没有专门提供事件机制。在模板引擎里面不提供事件处理机制,只能等渲染完模板之后,然后通过原生JS的方式获取DOM元素,再绑定事件。这样做也相对比较原始。

5)vue的模板语法

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

4. 基础案例

tab选项卡功能

5. Vue常用特性

6. 综合案例

 

vue基础

标签:渐进   属性   var   span   tle   child   分析   org   append   

原文地址:https://www.cnblogs.com/zcy9838/p/13090481.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!