zoukankan      html  css  js  c++  java
  • Vue简介

     

    1,什么是vue?

      Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

      Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

      另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    2,vue的优点?

      1.性能会更好  

          vue中用到的是虚拟dom(vdom)

       2.视图和数据是分离的,数据去驱动视图的
       3.维护成本更低

    3,用法导入

      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

      当然你也可以把源码下载下来

    4,怎么用

      el:""   渲染的模板。

      data   渲染的数据,可以放所有的数据,注意这里的this指向是window

      methods  方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
                   {{ content }}//差值表达式
        </div>
        <script type="text/javascript">
        
        var vm = new Vue({
            el:"#app",
            data:{
                content:"hello world",
            }
        })
        </script>
    </body>
    </html>

     5,差值表达式

      {{ 表达式 }}:注意:表达式为对象的时候前后的空格不能省。

      表达式也只能是一些简单的运算,只能是表达式,一元,二元,三元,切记不能使用JavaScript语句

      

           
    <div   id="app"> //渲染的模板
        <!-- 插值表达式 -->
            <!-- {{ 表达式 }} -->
            {{"hello world"}}
            {{1}}
            {{true}}
            {{[1,2,3,4]}}
            {{ {a : 1, b : 2} }}     <!-- 表达式为对象的时候,前后的空格不能省略,两个花括号为表达式,三个就不认识了 -->
            <!-- 简单的数学运算 -->
            {{ 1+1 }}
            {{ 'hello' + 'world' }}
            <!-- {{ var a = 10;return a; }}  javascript语句 -->
            <!-- {{ if(true){return "a"} }} if语句,JavaScript语句 -->
            
            <!-- 三元表达式 -->
            {{ true ? "a" : "b" }}
    </div>

      


  • 相关阅读:
    Linux更改文件文件夹所属用户组(chgrp)
    Linux服务器查看请求数
    装Office 2010提示Error 1406的解决方法
    实时数据库简介和比较
    敏捷软件开发模型SCRUM【转】
    实时数据库系统
    实时数据库的事务处理
    各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异
    中国煤矿历年事故死亡人数及分析
    实时/历史数据库和关系型数据库的区别
  • 原文地址:https://www.cnblogs.com/Godfather-twq/p/11805743.html
Copyright © 2011-2022 走看看