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>

      


  • 相关阅读:
    “12306”的架构到底有多牛逼
    数字治理
    浅谈web网站架构演变过程
    MapReduce基本原理
    Flink+Hologres亿级用户实时UV精确去重最佳实践
    全链路压测体系建设方案的思考与实践
    如何做好一场技术演讲?
    “控本焦虑”的工程企业 用钉钉宜搭找到了低成本数字化的“捷径”
    友盟+《小程序用户增长白皮书》:从五个角度入手分析小程序数据
    数字化让618有了洞悉消费者内心的“大脑”
  • 原文地址:https://www.cnblogs.com/Godfather-twq/p/11805743.html
Copyright © 2011-2022 走看看