在这里插入图片描述

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

002-实现第一个VueJS应用.html

  • 下载vue: https://unpkg.com/vue/dist/vue.js
  • 将vue.js拷贝到任意一个目录(工作目录)
  • 在同一个目录下新建一个文件,输入以下代码:
     <script src="vue.js"></script>
     <div id="app">
         <p>{{title}}</p>
     </div>
     
     <script>
         new Vue({
             el:"#app",
             data:{
                 title: "Hello World!"
             }
         });
     </script>
    

003-扩展这个VueJS应用.html

  • 代码如下:
    <script src="vue.js"></script>
    <div id="app">
        <input type="text" v-on:input="changeTitle">
        <p>{{title}}</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                title: "Hello World!"
            },
            methods: {
                changeTitle:function (event) {
                    this.title = event.target.value;
                }
            }
        });
    </script>
    
  • 试试看,你输入的每一个字符都会被克隆,很有意思的一个程序!

009-VueJS的模板语法和实例.html

  • 在上面的例子中,通过创建这个新的Vue实例,注意,虽然没有把它存入一个变量内,Vue实例还是被创建了。
  • 通过创建这个Vue实例,就跟我们的HTML代码建立了一个联系,Vue基于上面的HTML代码,创建了一个模版,要特别注意的是,Vue在运动的时候,并不
    直接使用我们写的HTML代码。实际运行的网页里面也没有我们写的这些命令(最终页面你并看不到大括号之类的东西),
  • Vue根据HTML代码创建的模版存储在内部,然后用这个模版,创建真正渲染成DOM的HTML代码,我们写的HTML代码并不是最后在
    浏览器里面运行的那一份,中间有一层Vue实例把HTML代码转换成模版,然后渲染模版(比如花括号里面的{{title}}}等),最终再由它输出渲染后的HTML代码
  • Vue实例中存储在data属性内的数据,例如上面的title,可以直接在data属性内修改他们,也可以调用methods里的函数去生成内容。例如:
    <script src="vue.js"></script>
    <div id="app">
        <!-- 注意此处并没有调用Vue模板,而是调用了一个函数 -->
        <p>{{sayHello()}}</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                title: "Hello World!"
            },
            methods: {
                //此处sayHello是一个方法(函数),但它返回的内容被传送到模版里去了
                sayHello:function (event) {
                    return 'Hello!';
                }
            }
        });
    </script>
    

010-访问Vue实例里的数据.html

  • 在vue实例中的任何地方,都可以用this来访问所有的属性和方法
    <script src="vue.js"></script>
    <div id="app">
        <p>{{sayHello()}}</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                title: "Hello World!"
            },
            methods: {
                
                sayHello:function (event) {
                //注意此处,return的是Hello World!
                //原生的JS是不允许这么调用的,Vue在中间层做了调剂
                    return this.title; 
                }
            }
        });
    </script>
    

011-属性绑定.html

  •   <script src="vue.js"></script>
      <div id="app">
          <!-- 注意:此处不能用<a href="{{link}}"> 这种形式来传递超链接值,只能用v-bind绑定并设置href的值 -->
          <p>{{sayHello()}} - <a v-bind:href="link">Baidu</a> </p>
      </div>
      <script>
          new Vue({
              el: "#app",
              data: {
                  title: "Hello World!",
                  link:"http://baidu.com"
              },
              methods: {
      
                  sayHello:function () {
                      return this.title;
                  }
              }
          });
      </script>
    

012-理解和使用指令

  • 指令就是你放在代码中的一些指示
  • 例如上面v-bind,它将一些东西和我们的数据(href值)绑定,一般来说如果需要在HTML内直接
    显示内容的时候,我们采用花括号来解决,但在花括号不适用的时候,就要使用指令。
  • 格式:
    • 指令 + 冒号 + 参数,如 v-bind:href = “link”
    • link 就是你想要的从Vue实例中绑定的内容,可以是属性或者函数
    • 一般来说你不能给HTML属性传递动态数据,有了这些Vue指令,就可以了

013-用v-once禁止二次渲染.html

  • 输入以下代码:
<script src="vue.js"></script>
<div id="app">
    <!-- 注意此处的v-once -->
    <h1 v-once>{{title}}</h1>
    <p>{{sayHello()}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "Hello World!",
        },
        methods: {

            sayHello:function () {
                this.title = 'Hello';
                return this.title;
            }
        }
    });
</script>
  • 运行以上代码,我们原意是想要一个Hello World!和Hello的,但两个元素都被渲染成Hello了,怎么办?
    用v-once, 即在第一个元素h1那里加上一个v-once,则表示该元素只会被渲染一次,之后不能再
    改变。

014-如何输出基础的HTML.html

  • 输入以下代码:
<script src="vue.js"></script>
<div id="app">
    <!-- 注意此处的v-once -->
    <h1 v-once>{{title}}</h1>
    <p>{{sayHello()}}</p>
    <!-- 注意:v-html指令让finishedLink以渲染后的HTML格式输出,而不是纯文本
    如果以花括号{{finishedLink}} 来表示的话,将会是一个HTML形式的纯文本。
    -->
    <p v-html = "finishedLink" ></p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "Hello World!",
            finishedLink:'<a href="http://baidu.com">Baidu.com</a>',
        },
        methods: {

            sayHello:function () {
                this.title = 'Hello';
                return this.title;
            }
        }
    });
</script>
  • 以上这段代码并不会输出一个Baidu.com的超链接,而是连同HTML代码一起全部输出了。
  • 这样的好处是,HTML元素不会被解析和渲染,而是被输出为纯文本,避免了跨站攻击。
  • 但是,如果某些情况下你确实想输出渲染后的HTML代码,比如此处你确实希望看到一个
    百度的超链接,你就应该使用v-html指令。在需要的元素内嵌入v-html即可。请谨慎使用这个
    指令,它会把你暴露给XSS攻击,比如此处的内容可能是由用户提交的,你是不能控制用户上传
    什么内容的,若确定内容安全,或者是由你自己合成的代码,那就可以放心使用v-html

015 作业1

  • 015-作业1-1.html
  • 输出你的姓名和年龄,两者都作为属性保存在data内,在P标签里面输出
<script src="vue.js"></script>
<div id="app">
    <p>I am {{name}}</h1>
    <p>I am {{age}} years old.</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "Rockage",
            age: "40",
        }
    });
</script>
  • 015-作业1-2.html
  • 在插值语法中,即在大括号中, 使用JavaScript表达式,输出的年龄乘以3
<script src="vue.js"></script>
<div id="app">
    <p>I am {{name}}</p>
    <p>I am {{age * 3}} years old.</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "Rockage",
            age: "40",
        }
    });
</script>
  • 015-作业1-3.html
  • 调用函数,输出这个函数的返回值,函数返回一个0到1之间的随机数
<script src="vue.js"></script>
<div id="app">
    <p>The Random Number is : {{sayRnd()}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        methods: {
            sayRnd: function () {
                // random_number = Math.random(); // 产生一个0到1的随机数
                // random_number = random_number.toFixed(2) //保留两位小数
                // 产生一个1到100的随机数
                random_number = Math.floor(Math.random() * (100 - 1 + 1)) + 1
                return random_number;
            }
        }
    });
</script>
  • 015-作业1-4.html
  • 使用baidu, 让一个img标签显示搜索到的图片
  • 和超链接的href属性一样,也不允许直接将URL强填进img的src里面,应该把URL存在data里面,绑定到img标签的src属性
<script src="vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
<div id="app">
    <img  v-bind:src = "url">
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            url: "http://img.mp.itc.cn/upload/20170217/1f650c2645c541ad8cc70842d7d0bbe5_th.jpeg"
        }
    });
</script>
  • 015-作业1-5.html
  • 用名字预先填充一个TextBox,让它默认显示你的名字
<script src="vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
<div id="app">
    Name <input type = "text" v-bind:value = "default_name" />
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            default_name: "Hua Yang"
        }
    });
</script>

017-监听事件.html

  • 通过指令v-on监听来自模版的事件
  • v-on 可以监听任何由这个按钮产生的DOM事件
  • 格式: v-on:事件名称 = “事件函数名”,如v-on:click = “increase”
<script src="vue.js"></script>
<div id="app">
    <button v-on:click="increase">Click Me</button>
    <p>{{ counter}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter: 0,
            x: 0,
            y: 0
        },
        methods: {
            increase: function () {
                this.counter++;
            }
        },

    });
</script>

018-从事件对象里获取事件数据.html

  • 用v-on来获取事件数据
  • 这个例子很好地说明了如何通过Vue传递事件对象
<script src="vue.js"></script>
<div id="app">
   <p v-on:mousemove="updateCoordinates">Coordonates : {{x}}/{{y}}</p>
</div>
<script>
   new Vue({
       el: "#app",
       data: {
           counter: 0,
           x: 0,
           y: 0
       },
       methods: {
           updateCoordinates: function (event) {
               this.x = event.clientX;
               this.y = event.clientY;
           }
       },

   });
</script>

019-传递你自己的事件参数.html

  • 给组件传递自定义参数,方法很简单,在调用函数或者说
    设置引用时传入参数即可。
  • 加入不仅要传递自定义参数,还要传递DOM生成的事件对象给方法,
    也很简单,只需要再加一个参数,但这个参数的命名需为
    $event,vue会自动捕捉这个默认的事件参数,并复制给一个可以在
    函数中使用的变量
  • 本例中不对$event做详解,下面的例子会提到它
<script src="vue.js"></script>
<div id="app">
   <!--
   请注意, 调用increase时增加了两个参数
   -->
   <button v-on:click="increase(2,$event)">Click Me</button>
   <p>{{ counter}}</p>
</div>
<script>
   new Vue({
       el: "#app",
       data: {
           counter: 0,
           x: 0,
           y: 0
       },
       methods: {
           // increase 函数用step和event接收参数
           increase: function (step,event) {
               this.counter += step;
           }
       },

   });
</script>

020-用事件修饰符来修改事件.html

  • 现在我们用#11(鼠标悬浮显示XY坐标)那个为例
  • 我想设置一个区域,姑且称为DEAD SPOT, 鼠标进入这个
    区域XY停止更新。
  • 常规方法是让这个SPAN也绑定一个mousemove事件,然后调用
    一个事件函数,事件函数不做任何处理。
HTML中:
<span v-on:mousemove = "dummy">DEAD SPOT</span>

JS中:
dummy: function(){
event.stopPropagation();
}
  • 以上代码确保事件不会传播给绑定有这个属性的SPAN上。
  • 当然,我们还有更简单的方法,就是使用事件修饰符。
  • 使用stop修饰符即可实现这个目的
<script src="vue.js"></script>
<div id="app">
    <p v-on:mousemove="updateCoordinates">Coordonates : {{x}}/{{y}}
        <!-- 请注意下面这个SPAN绑定的事件mousemove
        采用了.stop修饰符,表示此元素的mousemove事件不做任何处理
        -->
        - <span v-on:mousemove.stop = "">DEAD SPOT</span>
    </p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter: 0,
            x: 0,
            y: 0
        },
        methods: {
            updateCoordinates: function (event) {
                this.x = event.clientX;
                this.y = event.clientY;
            }
        },

    });
</script>

021-监听键盘事件.html

  • 这个例子很简单,在输入框中监控键盘事件
  • 一旦敲入回车键,则弹出Alert窗口。
<script src="vue.js"></script>
<div id="app">
    <input type = "text" v-on:keyup.enter="alertMe" />
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter: 0,
            x: 0,
            y: 0
        },
        methods: {
            alertMe: function () {
                alert("Alert!");
            }
        },

    });
</script>

022-作业2问题:事件.html

  • 作业2-1:按下按钮,弹出警告框。
<script src="vue.js"></script>
<div id="app">

  <button v-on:click="alertMe">Show Alert</button>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter: 0,
            x: 0,
            y: 0
        },
        methods: {
            alertMe: function () {
                alert("You Clicked me!");
            }
        },

    });
</script>
  • 作业2-2:记录键盘输入的值,存到data里并立即显示。
  • 特点1: 除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法,即不再绑定一个函数,直接在调用的时候执行JS语句,这种方法适用于
    函数体很短,只有一行的函数。
  • 特点2:采用了Vue的关键字 e v e n t , 它 表 示 J a v a S c r i p t 自 动 生 成 的 默 认 事 件 对 象 , 它 保 存 了 许 多 重 要 信 息 , 如 事 件 的 目 标 元 素 等 。 而 这 里 , 目 标 元 素 就 是 输 入 框 , 输 入 框 有 一 个 v a l u e 属 性 , 它 就 是 用 户 输 入 值 的 来 源 , 可 以 借 由 这 个 事 件 对 象 ( event,它表示JavaScript自动生成的默认事件对象, 它保存了许多重要信息,如事件的目标元素等。而这里,目标元素就是输入框,输入框有一个value属性, 它就是用户输入值的来源,可以借由这个事件对象( eventJavaScriptvalueevent)来访问它的目标元素(target),再访问它的属性(value),
    并赋值给变量myValue.
  • 如果不采用内联的方式,也可以在此绑定一个事件函数,然后将$event作为参数传递进去,以同样的
    方法在事件函数中访问value并赋值给myValue,效果一样。
<script src="vue.js"></script>
<div id="app">

    <input v-on:keydown = "myValue = $event.target.value" type="text"/>
    <p>{{myValue}}</p>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            myValue: ''
        }
    });
</script>
  • 作业2-3:记录键盘输入的值,存到data里,但只有按下enter才更新显示。
  • 这题很简单,在上题的基础上增加一个.enter就可以了
<script src="vue.js"></script>
<div id="app">

    <input v-on:keydown.enter = "myValue = $event.target.value" type="text"/>
    <p>{{myValue}}</p>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            myValue: ''
        }
    });
</script>

024-在模板中编写JS代码.html

  • 在所有能访问Vue实例的地方,无论是监听鼠标点击事件还是输出counter,
    只要访问了Vue实例, 就可以使用任何合法的JavaScript代码,只要它是一个简单
    表达式即可,当然这个表达式中不能有if或者for循环等复杂语句。
  • 这就是所谓的“内联”调用法
  • 例如上面那个鼠标点击按钮增加数字的例子,因为逻辑足够简单,
    我们甚至在v-onclick里都不需要绑定任何函数,而是可以直接让它
    执行一条语句,也就是说在调用的时候就直接写成counter++即可。
    当然,如果程序逻辑比较复杂,不足以用一条语句表达,那么还是老老实实
    编写一个函数并绑定到事件里为好。
  • 在模板中也可以直接插入表达式,例如像{{counter * 2}}这样的表达式。
  • 当然,我们还以用简短的“三元表达式”,这种表达式是if语句的一个变种,能够在一行内完成对变量的判断。
<script src="vue.js"></script>
<div id="app">
    <!-- 此处取消了事件函数,直接用counter++代替 -->
    <button v-on:click="counter++">Click Me</button>
    <!-- 此处直接修改模板counter的值 -->
    <p>{{ counter * 2}}</p>
    <!-- 此处是一个三元表达式,用以判断counter的值 -->
    <p>{{ counter * 2 > 10 ? 'Greate than 10' : 'Smaller than 10'}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter: 0
        }
    });
</script>

025-使用双向绑定.html

  • 某些情况下,我们需要一边同时监听事件,一边实施更新数据的时候
    就要用到双向绑定。
  • Vue的双向绑定真的非常简单,只需要在监听的的元素上加一个v-model即可
  • 其实用v-bind + v-on加上事件函数,也能够实现这个功能,但是显然
    v-model要简单、清晰许多。
<script src="vue.js"></script>
<div id="app">
    <input type = "text" v-model = "name">
    <p>{{name}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: ''
        }
    });
</script>

026-用计算属性来响应改变.html

  • 目前为止,我们已经学会了两种Vue的属性:data, methods,一个放置数据,一个放置函数,现在引入第三个属性:computed
  • 先大致梳理一下本例子的效果:
  • 界面有3个按钮,两个计数器,第一个按钮是计数器1增加,第二个按钮是计数器1减少,第三个按钮是计数器2增加
  • 另有1行文本,当counter1大于5时候显示:Greater than 5, 当counter1小于5时显示:Smaller than 5
  • 注意:counter2并没有做这样的判断
  • 为了实时监控counter1的值,这里运用了两种同步方法,第一种是在methods里写一个事件函数result
  • 另一个办法是运用computed,写一个事件函数output
  • 乍看上去,两者代码是相同的,并没有什么区别,但实际区别是:
  • 1、在调用方法上,写在methods的函数是带括号调用的,即: result() 这样的形式来调用
  • 2、写在computed的函数并不需要像调用函数那样调用,省略了括号,直接像调用数据一样即可:output
  • 事实上,对于最终的结果,两种方式确实是相同的,那么问题来了,有了methods不就可以了吗?我们为什么还多此一举冒出一个computed呢?
  • 答案揭晓:
  • 1、在Vue内部,computed属性是基于他们的依赖的数据进行缓存的,只有在它相关的依赖发生改变时才会重新求值,与之不相关的数据变化的时候它不会做出任何动作。
  • 2、method则不同,只要页面有所变化(重新渲染),它总会被执行,无论数据是否与之相关。
  • 为了验证以上结论,我们在界面上再放一个按钮,再增加一个变量counter2,注意,这个按钮和变量和counter1八竿子打不着关系,完全是一个独立的东西。
  • 按下F12键,进入浏览器调试模式,观察console控制台输出
  • 现在按下Increase Counter 1或Decrease Counter 1
  • counter1的值开始发生了变化,并且控制台出现:Here is Computed 和 Here is Methods 两行字
  • 这是因为改变counter1值的时候,同时触发了基于methods的result函数,和基于computed的output函数
  • 以上逻辑容易理解,说得通!
  • 现在,按下Increase Counter 2按钮,这时候counter2的值开始增大了,但是诡异的是,控制台显示:Here is Methods
  • 这是为什么呢?明明result函数里没有任何一处是跟counter2有关系的,那为什么每次改变counter2的时候程序会跳进result函数里呢?
  • 这正好印证了我们上面说过的一个结论:“只要页面有所变化(重新渲染),它总会被执行,无论数据是否与之相关”
  • 刷新的虽然是counter2,但是请注意:只要页面被重新渲染,它总是会被执行。
  • 不言而喻,如果是很复杂的页面,反复去执行一个与之无关的函数,效率开销肯定是很大的。
  • 所以我们需要computed属性,这个属性只处理与之相关的变量(例如本例中的counter1),而与之无关的变量(counter2)即使发生变化,即使页面被重新渲染了,它也不会被执行。
  • 大部分时候我们选择computed就对了,但是有时候我们就是希望某些数据不要经过缓存,就是想让它直截了不停刷新并显示的时候,选择methods
<script src="vue.js"></script>
<div id="app">
    <button v-on:click="counter1++">Increase Counter 1</button>
    <button v-on:click="counter1--">Decrease Counter 1</button>
    <button v-on:click="counter2++">Increase Counter 2</button>
    <p>Counter:{{counter1}} | {{counter2}}</p>
    <!-- 注意两种调用方法是不同的 -->
    <p>Counter 1 Result: {{result()}} | {{output}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter1: 0,
            counter2: 0
        },
        computed: {
            output: function () {
                console.log('Here is Computed')
                return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5"
            }
        },
        methods: {
            result: function () {
                console.log('Here is Methods')
                return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5"
            }
        }
    });
</script>

027-计算属性的替代:观察改变.html

  • 现在再加入一个新的属性:watch
  • watch是Vue提供了另外一种处理数据依赖的方法,其最终效果其实和上例的methods和computed差不太多,不同的地方在于:
  • 在computed属性里面我们设置需要计算的属性(如上例的output),然后在函数体里设置计算这个属性(output)的逻辑。
  • watch则采用的是另外一种机制,把想要侦听的属性名称设置为键, 而这个键必须是在data里面能够找到的,例如上例的counter1或counter2,
    键名必须与data里面的属性名称相同。
  • 在watch中定义一个和属性名相同的函数,即当属性值发生变化时
    需要执行的代码,Vue会自动把属性变化之后的数值传递给该函数。
  • 从结果而言,既然说watch和computed的作用相当,那我们为啥非要用watch不可呢?因为watch是异步执行的。
  • 关于什么是异步执行,三言两语讲不清楚,请移步搜索引擎
  • computed只能执行同步任务,也就是说在它return的时候,必须立即返回一个结果
    中间不能访问服务器或者执行异步任务。
  • 比如说,你需要一个值,在两秒之后更新,就必须用watch
  • 理论上,在Vue实例里,总是可以用this访问其自身(请参见前面的内容),但在
    回调闭包中却不行,定时器函数(setTimer)是一个典型的回调闭包的例子,因此
    不能在其中直接访问this,而是应该用一个变量先保存起来,以便在setTimer函数中使用。
  • 关于什么叫“回调闭包”,请移步搜索引擎
  • 当然,你也可以尝试一下把watch这段代码放到computed里面去试试看,结果就是只会清0一次,然后代码就不再执行了。
  • 大部分情况下,建议使用computed,因为它拥有最佳的速度,但是在执行异步任务的时候,我们只能选择watch
<script src="vue.js"></script>
<div id="app">
    <button v-on:click="counter1++">Increase Counter 1</button>
    <p>Counter:{{counter1}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            counter1: 0,
        },
        watch: {
            counter1: function (value) {
                // 注意:回调闭包中不允许直接使用this
                // 因此此处需要先用一个变量vm来保存this
                var vm = this;
                setTimeout(function () {
                    vm.counter1 = 0
                }, 2000)

            }

        }
    });
</script>
Logo

前往低代码交流专区

更多推荐