Vue.js学习笔记

一、Vue 简介及安装

1. 简介

• Vue只关注视图层,采用自底向上的增量开发的设计
  
• Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
  
• Vue上手比较容易
  

2. 安装

• 直接使用
  3. 指令
  • 指令基本用法

  v-指令名:参数.修饰符
  
  如 v-bind:href
  
  v-on:submit.prevent
  
  参数: 在指令后以冒号指明。
  
  修饰符: 以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
  
  其中的.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()

  • 表达式

  vue.js提供了完全的 JavaScript 表达式支持

  
      {{5+5}}
  
      {{ ok ? 'YES' : 'NO' }}
  
      {{ message.split('').reverse().join('') }}
      
  菜鸟教程
  
      
  
  

  • 常用指令及用法

  指令是带有 v- 前缀的特殊属性。
  
  指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

  指令	作用
  v-html	用于输出 html 代码 v-html=""
  v-bind	HTML 属性中的值应使用 v-bind 指令,语法示例:v-bind:属性值,如指定class v-bind:class="{class1:class}"
  v-on	用于监听 DOM 事件,如v-on:submit.prevent
  v-if v-else v-else-if	条件语句 如 v-if="变量"
  v-for	循环
  v-model	实现双向数据绑定
  v-show	根据条件展示元素

  • 过滤器

  Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示,格式如下:

  
  
  {{ message | capitalize }}
  
  
  
  
  
  {{ message | filterA | filterB }}
  {{ message | filterA('arg1', arg2) }}
  

  示例:

  
    {{ message | capitalize }}
  
      
  
  

  • 指令缩写

  Vue.js 为两个最为常用的指令提供了特别的缩写：

  v-bind

  v-on 缩写

  4. Vue 实例

  每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的
  
  每个 Vue 实例都会代理其 data 对象里所有的属性
  
  除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。

  示例

  var data = { a: 1 }
  var vm = new Vue({
    el: '#example',
    data: data
  })
  vm.a === data.a // -> true
  // 设置属性也会影响到原始数据
  vm.a = 2
  data.a // -> 2
  // ... 反之亦然
  data.a = 3
  vm.a // -> 3
  vm.$data === data // -> true
  vm.$el === document.getElementById('example') // -> true
  // $watch 是一个实例方法
  vm.$watch('a', function (newVal, oldVal) {
    // 这个回调将在 `vm.a`  改变后调用
  })
  

  5. v-if 示例

  v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

  示例一

  
      
  现在你看到我了
      
  
  
  

  示例二

  
      
  
        A
      
      
  
        B
      
      
  
        C
      
      
  
        Not A/B/C
      
  
      
  
  

  6. v-for 示例

  v-for 可以绑定数据到数组来渲染一个列表
  
  v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
  
  v-for 可以通过一个对象的属性来迭代数据：
  
  你也可以提供第二个的参数为键名
  
  v-for 也可以循环整数

  示例一:

  
    
  
      
  
        {{ site.name }}
      
    
  
   
  
  

  示例二:

  
  
    
  
  
  
    
  
      
  
      {{ value }}
      
    
  
  
    
  
      
  
      {{ key }} : {{ value }}
      
    
  
  
    
  
      
  
       {{ index }}. {{ key }} : {{ value }}
      
    
  
  
    
  
    
  
      
  
       {{ n }}
      
    
  

  7. v-model

  v-model 指令在表单控件元素上创建双向数据绑定
  
  v-model 会根据控件类型自动选取正确的方法来更新元素
  
  修饰符
  
  .lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
  
  .number 想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
  
  .trim 要自动过滤用户输入的首尾空格

  示例:

  
    
  input 元素：
    
    
  消息是: {{ message }}
      
    
  textarea 元素：
    
  {{ message2 }}
    
  
  
  
  
  
  
  
  
  
  

  四、计算属性 computed

  计算属性在处理一些复杂逻辑时是很有用的
  
  使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
  
  可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性
  
  computed 属性默认只有 getter,不过在需要时你也可以提供一个 setter

  示例:

  
    
  {{ site }}
  
  
  
  
  
  
    Say hi
    Say what
  
  
  

  示例二 事件修饰符

  
  
  
  
  
  
  
  
  
  ...
  
  ...
  
  
  

  示例三 按键修饰符

  
  
  
  
  
  
  
  
  
  Do something
  

  七、组件

  组件（Component）是 Vue.js 最强大的功能之一。
  
  组件可以扩展 HTML 元素，封装可重用的代码。
  
  组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。
  
  prop 是父组件用来传递数据的一个自定义属性。
  
  父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"
  
  类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件.
  
  prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来
  
  父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
  

  在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on

  使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

  使用 $on(eventName) 监听事件
  使用 $emit(eventName) 触发事件
  

  另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

  注册一个全局组件语法:
  Vue.component(tagName, options)
  
  tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件
  
  

  示例:

  
      
  
        
  {{ total }}
        
        
      
  
  
  

  八、自定义组件

  除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

  钩子函数
  指令定义函数提供了几个钩子函数（可选）：

  bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  
  inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
  
  update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
  
  componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  
  unbind: 只调用一次， 指令与元素解绑时调用。
  

  钩子函数参数
  钩子函数的参数有：

  el: 指令所绑定的元素，可以用来直接操作 DOM 。
  binding: 一个对象，包含以下属性：
  name: 指令名，不包括 v- 前缀。
  value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
  oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
  arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
  modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
  vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
  oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
  

  示例:

  九、路由

  Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
  
  通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
  
  Vue.js 路由需要载入 vue-router 库

  示例:

  
    
  Hello App!
    
  
      
      
      
      Go to Foo
      Go to Bar
    
    
    
    
  
  
  
  

  ---

  十、总结

  该篇博客主要是学习菜鸟教程网站的Vue教程后，做的学习笔记，仅作个人学习参考。
  
  Vue 相对比较更容易入门,基本语法不太多,但组件、自定义指令及路由有点学习曲线。
  
  个人学习Vue主要目的是能够看懂Vue写的代码，能使用Vue构建简单的网页程序。

  十一、参考

  菜鸟教程

  

  Vue