vue笔记（一）基础语法

记录一些vue的例子，整理自官方文档。

vue可以理解为js进阶版中的一种，相关内容如下：

1、vue.js 核心
2、VueRouter2 实现路由组织工具。
3、webpack 项目打包以及编译工具。
4、nodejs 前端开发环境。
5、npm 前端包管理器。
6、axios ajax 接口请求工具。
7、sass-loader 和 node-sass css 预处理。
8、element 基于 vue 的后台组件库。
9、iview 基于 vue 的另一套后台组件库。
10、vue-cli vue 项目脚手架。一键安装 vue 全家桶的工具。

data 用于定义属性
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。


1，使用 v-html 指令用于输出 html 代码，正好可以在含有格式（html）的文章使用：
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
message: '<h1>菜鸟教程</h1>'
  }
})
</script>

2，HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
directiva v-bind:class
  </div>
</div>
<script>
new Vue({
el: '#app',
  data:{
  class1: false
  }
});
</script>

3，Vue.js 都提供了完全的 JavaScript 表达式支持。
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
ok: true,
message: 'RUNOOB',
id : 1
  }
})
</script>

4，指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
seen: true
  }
})
</script>

5，参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script>
new Vue({
  el: '#app',
  data: {
url: 'http://www.runoob.com'
  }
})
</script>

另一个例子是 v-on 指令，它用于监听 DOM 事件，在这里参数是监听的事件名。
<a v-on:click="doSomething">

6，修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>//取消事件的默认操作，对应这里的form就是取消提交操作

7，在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
  el: '#app',
  data: {
message: 'Runoob!'
  }
})
</script>

8，按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
message: 'Runoob!'
  },
  methods: {
reverseMessage: function () {
  this.message = this.message.split('').reverse().join('')
}
  }
})
</script>

9，过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：
<div id="app">
  {{ message | capitalize }}
</div>
<script>
new Vue({
  el: '#app',
  data: {
message: 'runoob'
  },
  filters: {
capitalize: function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
}
  }
})
</script>


10，过滤器是 JavaScript 函数，因此可以接受参数：
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
{{ message | filterA('arg1', arg2) }}

11，v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

12，当我们给一个比如 props 中，或者 data 中被观测的对象添加一个新的属性的时候，不能直接添加，必须使用 Vue.set 方法。
Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是响应式的，同时触发视图更新。


13，条件判断使用 v-if 指令：
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
  <h1>菜鸟教程</h1>
  <p>学的不仅是技术，更是梦想！</p>
  <p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div>
<script>
new Vue({
  el: '#app',
  data: {
seen: true,
ok: true
  }
})
</script>

14，可以用 v-else 指令给 v-if 添加一个 "else" 块：
<div id="app">
<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>
</div>
<script>
new Vue({
  el: '#app'
})
</script>

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
<div id="app">
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
type: 'C'
  }
})
</script>


15，我们也可以使用 v-show 指令来根据条件展示元素：
<h1 v-show="ok">Hello!</h1>

比较：
v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译
v-show 元素始终被编译并保留，只是简单地基于 CSS 切换。


16，循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
<div id="app">
  <ol>
<li v-for="site in sites">
  {{ site.name }}
</li>
  </ol>
</div>  
<script>
new Vue({
  el: '#app',
  data: {
sites: [
  { name: 'Runoob' },
  { name: 'Google' },
  { name: 'Taobao' }
]
  }
})
</script>

v-for 可以通过一个对象的属性来迭代数据：
<div id="app">
  <ul>
<li v-for="value in object">
{{ value }}
</li>
  </ul>
</div>  
<script>
new Vue({
  el: '#app',
  data: {
object: {
  name: '菜鸟教程',
  url: 'http://www.runoob.com',
  slogan: '学的不仅是技术，更是梦想！'
}
  }
})
</script>

也可以提供第二个的参数为键名，第三个参数为索引：
<div id="app">
  <ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
  </ul>
</div>
v-for 也可以循环整数：
<div id="app">
  <ul>
<li v-for="n in 10">
{{ n }}
</li>
  </ul>
</div>

17，计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>  
<script>
var vm = new Vue({
  el: '#app',
  data: {
message: 'Runoob!'
  },
  computed: {
// 计算属性的 getter
reversedMessage: function () {
  // `this` 指向 vm 实例
  return this.message.split('').reverse().join('')
}
  }
})
</script>

computed vs methods：
可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。


18，Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化:
<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>

19，可以为 v-bind:class 设置一个对象，从而动态的切换 class:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>


<script>
new Vue({
  el: '#app',
  data: {
isActive: true
  }
})
</script>
</body>
</html>

也可以在对象中传入更多属性用来动态切换多个 class ：
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

也可以直接绑定数据里的一个对象：
<div id="app">
  <div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
classObject: {
  active: true,
  'text-danger': true
}
  }
})
</script>

20，可以在 v-bind:style 直接设置样式：可以在 v-bind:style 直接设置样式：
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hihi vue</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
activeColor: 'green',
fontSize: 30
  }
})
</script>

也可以直接绑定到一个样式对象，让模板更清晰：
<div id="app">
  <div v-bind:style="styleObject">hihi vue</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
styleObject: {
  color: 'green',
  fontSize: '30px'
}
  }
})
</script>

21，我们需要使用一个方法来调用 JavaScript 方法。
v-on 可以接收一个定义的方法来调用。
<div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div> 
<script>
var app = new Vue({
  el: '#app',
  data: {
name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
greet: function (event) {
  // `this` 在方法里指当前 Vue 实例
  alert('Hello ' + this.name + '!')
  // `event` 是原生 DOM 事件
  if (event) {
  alert(event.target.tagName)
  }
}
  }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>  
<script>
new Vue({
  el: '#app',
  methods: {
say: function (message) {
  alert(message)
}
  }
})
</script>

22，Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

23，在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<input v-model.number="age" type="number">

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">

24，组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用。
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

全局组件：
所有实例都能用全局组件，注册一个简单的全局组件 runoob，并使用它：
<div id="app">
<runoob></runoob>
</div> 
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
<div id="app">
<runoob></runoob>
</div>  
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
// <runoob> 将只在父模板可用
'runoob': Child
  }
})
</script>

25，prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
<div id="app">
<child message="hello!"></child>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
<div id="app">
<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:message="parentMsg"></child>
</div>
</div> 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
parentMsg: '父组件内容'
  }
})
</script>

26，组件可以为 props 指定验证要求。
prop 是一个对象而不是字符串数组时，它包含验证要求：
Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})


27，如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：
<my-component v-on:click.native="doTheThing"></my-component>
如：@keyup.enter.native="loginHandler"


28，除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
 
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
// 聚焦元素
el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

29，路由（下载）：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>


// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
 
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')