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>

 

  

 


posted on 2019-11-06 19:15  Godfather-twq  阅读(266)  评论(0编辑  收藏  举报