Vue学习，可是没学会

想把springboot和vue结合起来，可是简单的学完了vue仍是不知道怎么使用，vue要不要单独开一个服务去支撑才可使用？一直没想明白这个问题 ，先记录下他的简单使用方法和标签

@初始化：
var vm = new Vue({
  // 选项
})

@数据绑定最多见的形式就是使用 {{...}}（双大括号）的文本插值：

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 咱们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})

@它们都有前缀 $，以便与用户定义的属性区分开来
document.write(vm.$data === data) // true
document.write("<br>") 
document.write(vm.$el === document.getElementById('vue_det')) // true

@使用 v-html 指令用于输出 html 代码：
<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>
@HTML 属性中的值应使用 v-bind 指令。
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
@Vue.js 都提供了彻底的 JavaScript 表达式支持。
@指令是带有 v- 前缀的特殊属性。
<div id="app">
    <p v-if="seen">如今你看到我了</p>
</div>
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
@参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
 <pre><a v-bind:href="url">菜鸟教程</a></pre>
@ v-on 指令，它用于监听 DOM 事件：
	<a v-on:click="doSomething">
	
@修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>

@v-model 在 input 输入框中咱们可使用 v-model 指令来实现双向数据绑定：
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上建立双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件咱们可使用 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>

@Vue.js 容许你自定义过滤器，被用做一些常见的文本格式化。由"管道符"指示, 格式以下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

@缩写
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>
@v-if 指令
在元素 和 template 中使用 v-if 指令：
@v-else
能够用 v-else 指令给 v-if 添加一个 "else" 块：
@v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用做 v-if 的 else-if 块。能够链式的屡次使用：
@v-show
咱们也可使用 v-show 指令来根据条件展现元素：
@v-for 指令。

v-for 指令须要以 site in sites 形式的特殊语法， sites 是源数据数组而且 site 是数组元素迭代的别名。

<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>
第三个参数为索引：
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
 第二个的参数为键名：
   <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
	v-for 也能够循环整数
	 <li v-for="n in 10">
     {{ n }}
    </li>
	
	@计算属性关键词: computed。
	computed vs methods
	能够说使用 computed 性能会更好，可是若是你不但愿缓存，你可使用 methods 属性。

@ 监听属性 watch，咱们能够经过 watch 来响应数据的变化。

如下实例经过使用 watch 实现计数器：
<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>


如下实例进行公里与米之间的换算：

实例
<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 = this.kilometers * 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>
@class 属性绑定
咱们能够为 v-bind:class 设置一个对象，从而动态的切换 class:
实例中将 isActive 设置为 true 显示了一个绿色的 div 块，若是设置为 false 则不显示：

<div v-bind:class="{ active: isActive }"></div>
@ v-on 在监听
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
 
 @别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
所有的按键别名：

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

@修饰符
.lazy
在默认状况下， v-model 在 input 事件中同步输入框的值与数据，但你能够添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
若是想自动将用户的输入值转为 Number 类型（若是原值的转换结果为 NaN 则返回原值），能够添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">
这一般颇有用，由于在 type="number" 时 HTML 中输入的值也老是会返回字符串类型。

.trim
若是要自动过滤用户输入的首尾空格，能够添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">
@组件<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>
@Prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据须要经过 props 把数据传给子组件，子组件须要显式地用 props 选项声明 "prop"：
用 v-bind 指令将 todo 传到每个重复的组件中：
<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>
 
<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>
@Prop 验证
type 能够是下面原生构造器：

String
Number
Boolean
Array
Object
Date
Function
Symbol
type 也能够是一个自定义构造器，使用 instanceof 检测。
@若是你想在某个组件的根元素上监听一个原生事件。可使用 .native 修饰 v-on 。例如：

<my-component v-on:click.native="doTheThing"></my-component>
@Vue.js 自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<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>
</body>
</html>
@钩子函数
指令定义函数提供了几个钩子函数（可选）：

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 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

@Vue.js 路由
Vue.js 路由须要载入 vue-router 库

中文文档地址：vue-router文档。
<router-link> 是一个组件，该组件用于设置一个导航连接，切换不一样 HTML 内容。 to 属性为目标地址， 即要显示的内容