【从入门到精通】Vue.js 教程

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

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

• 下载vue: https://unpkg.com/vue/dist/vue.js
• 将vue.js拷贝到任意一个目录（工作目录）
• 在同一个目录下新建一个文件，输入以下代码：

   
   
  
       
  {{title}}
   
   
   
  

003-扩展这个VueJS应用.html

• 代码如下：

  
  
      
      
  {{title}}
  
  
  

• 试试看，你输入的每一个字符都会被克隆，很有意思的一个程序！

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里的函数去生成内容。例如：

  
  
      
      
  {{sayHello()}}
  
  
  

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

• 在vue实例中的任何地方，都可以用this来访问所有的属性和方法

  
  
      
  {{sayHello()}}
  
  
  

011-属性绑定.html

•   
    
  
        
        
  {{sayHello()}} - Baidu 
    
    
  

012-理解和使用指令

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

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

• 输入以下代码：

    
    
{{title}}
    
{{sayHello()}}

• 运行以上代码，我们原意是想要一个Hello World!和Hello的，但两个元素都被渲染成Hello了，怎么办？
  用v-once, 即在第一个元素h1那里加上一个v-once，则表示该元素只会被渲染一次，之后不能再
  改变。

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

• 输入以下代码：

    
    
{{title}}
    
{{sayHello()}}
    
    

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

015 作业1

• 015-作业1-1.html
• 输出你的姓名和年龄，两者都作为属性保存在data内，在P标签里面输出

    
I am {{name}}
    
I am {{age}} years old.

• 015-作业1-2.html
• 在插值语法中，即在大括号中， 使用JavaScript表达式，输出的年龄乘以3

    
I am {{name}}
    
I am {{age * 3}} years old.

• 015-作业1-3.html
• 调用函数，输出这个函数的返回值，函数返回一个0到1之间的随机数

    
The Random Number is : {{sayRnd()}}

• 015-作业1-4.html
• 使用baidu， 让一个img标签显示搜索到的图片
• 和超链接的href属性一样，也不允许直接将URL强填进img的src里面，应该把URL存在data里面，绑定到img标签的src属性

• 015-作业1-5.html
• 用名字预先填充一个TextBox，让它默认显示你的名字

    Name 

017-监听事件.html

• 通过指令v-on监听来自模版的事件
• v-on 可以监听任何由这个按钮产生的DOM事件
• 格式： v-on:事件名称 = “事件函数名”，如v-on:click = “increase”

    Click Me
    
{{ counter}}

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

• 用v-on来获取事件数据
• 这个例子很好地说明了如何通过Vue传递事件对象

   
Coordonates : {{x}}/{{y}}

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

• 给组件传递自定义参数，方法很简单，在调用函数或者说
  设置引用时传入参数即可。
• 加入不仅要传递自定义参数，还要传递DOM生成的事件对象给方法，
  也很简单，只需要再加一个参数，但这个参数的命名需为
  $event，vue会自动捕捉这个默认的事件参数，并复制给一个可以在
  函数中使用的变量
• 本例中不对$event做详解，下面的例子会提到它

   
   Click Me
   
{{ counter}}

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

• 现在我们用#11（鼠标悬浮显示XY坐标）那个为例
• 我想设置一个区域，姑且称为DEAD SPOT, 鼠标进入这个
  区域XY停止更新。
• 常规方法是让这个SPAN也绑定一个mousemove事件，然后调用
  一个事件函数，事件函数不做任何处理。

HTML中：
DEAD SPOT

JS中：
dummy: function(){
event.stopPropagation();
}

• 以上代码确保事件不会传播给绑定有这个属性的SPAN上。
• 当然，我们还有更简单的方法，就是使用事件修饰符。
• 使用stop修饰符即可实现这个目的

    
Coordonates : {{x}}/{{y}}
        
        - DEAD SPOT
    

021-监听键盘事件.html

• 这个例子很简单，在输入框中监控键盘事件
• 一旦敲入回车键，则弹出Alert窗口。

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

• 作业2-1：按下按钮，弹出警告框。

  Show Alert

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

    
    
{{myValue}}

• 作业2-3：记录键盘输入的值，存到data里，但只有按下enter才更新显示。
• 这题很简单，在上题的基础上增加一个.enter就可以了

    
    
{{myValue}}

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

• 在所有能访问Vue实例的地方，无论是监听鼠标点击事件还是输出counter,
  只要访问了Vue实例， 就可以使用任何合法的JavaScript代码，只要它是一个简单
  表达式即可，当然这个表达式中不能有if或者for循环等复杂语句。
• 这就是所谓的“内联”调用法
• 例如上面那个鼠标点击按钮增加数字的例子，因为逻辑足够简单，
  我们甚至在v-onclick里都不需要绑定任何函数，而是可以直接让它
  执行一条语句，也就是说在调用的时候就直接写成counter++即可。
  当然，如果程序逻辑比较复杂，不足以用一条语句表达，那么还是老老实实
  编写一个函数并绑定到事件里为好。
• 在模板中也可以直接插入表达式，例如像{{counter * 2}}这样的表达式。
• 当然，我们还以用简短的“三元表达式”，这种表达式是if语句的一个变种，能够在一行内完成对变量的判断。

    
    Click Me
    
    
{{ counter * 2}}
    
    
{{ counter * 2 > 10 ? 'Greate than 10' : 'Smaller than 10'}}

025-使用双向绑定.html

• 某些情况下，我们需要一边同时监听事件，一边实施更新数据的时候
  就要用到双向绑定。
• Vue的双向绑定真的非常简单，只需要在监听的的元素上加一个v-model即可
• 其实用v-bind + v-on加上事件函数，也能够实现这个功能，但是显然
  v-model要简单、清晰许多。

    
    
{{name}}

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

    Increase Counter 1
    Decrease Counter 1
    Increase Counter 2
    
Counter:{{counter1}} | {{counter2}}
    
    
Counter 1 Result: {{result()}} | {{output}}

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

    Increase Counter 1
    
Counter:{{counter1}}