Vue入门1

<div id="app">
    <p>{{message}}</p>
    <h1>{{details()}}</h1>
</div>
引入：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

实例化：
<script>
var app = new Vue({
    el : '#app',
    data : {
        message : '123123',
    },
    methods: {
        details: function() {
            return  this.site + " - 学的不仅是技术，更是梦想！";
        }
    }
});
</script>

注：vue实例中的
1）el 是dom元素的id
2）data 定义了属性
3）methods 用于定义函数，return 来返回函数值
4）{{}}用于输出对像的属性和返回值
5）vue中数据的拷贝是浅拷贝

var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
// 它们引用相同的对象！
document.write(vm.site === data.site) // true
// 设置属性也会影响到原始数据
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob

v-html 用于输出html代码

<div id="app">
    <div v-html="message"></div>
</div>
<script>
new Vue({
      el: '#app',
      data: {
        message: '<h1>菜鸟教程</h1>'
      }
});
</script>

v-bind 用于进行属性的绑定
v-bind:+html属性能更新html的属性

<div id="app2">
  <span v-bind:title="message">
       鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<script>
var app2 = new Vue({
    el : '#app2',
    data : {
        message : '123123123 ' + new Date().toLocaleString()
    },
});
</script>

vue中判断用v-if && v-show用来判断是否展示元素

<div id="app"><p v-if="seen">现在你看到我了</p></div>
<script>
new Vue({
    el: '#app',
      data: {
        seen: true
    }
});
</script>

<div v-if="type === 'A'"></div>
<div v-else-if="type === 'B'"></div>
<div v-else-if="type === 'C'"></div>
<div v-else></div>

在 <template> 元素上使用 v-if 条件渲染分组,最终的渲染结果将不包含 <template> 元素。
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show 只是简单地切换元素的 CSS 属性 display。
<h1 v-show="ok">Hello!</h1>

v-once 只渲染元素和组件一次

<span v-once>不会改变{{message}}</span>

v-for循环 
1)把一个数组对应为一组元素

<ul id="example-2">
    <li v-for="item in items">
        {{ item.message }}
    </li>
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</ul>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});
</script>

2)一个对象的 v-for

<ul id="v-for-object" class="demo">
    <li v-for="value in object">
        {{ value }}
    </li>
      <div v-for="(value, name) in object">
          {{ name }}: {{ value }}
    </div>
</ul>
<script>
var vm =new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
});
</script>

数组相关方法：基于js中数组的方法

修改数组中单个元素方法：
1. vm.items[indexOfItem] = newValue
2. 使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：
vm.$set(vm.items, indexOfItem, newValue)

修改object中单个元素方法：

Vue.set(object, propertyName, value)

或vm.$set(vm.items, indexOfItem, newValue)

组件v-for

v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

<div id="app">
    {{message}}
    <input v-model="message">
</div>
<script>
var app = new Vue({
    el : '#app',
    data : {
        message : '123123',
    },
});
</script>

表单相关v-model.值绑定

v-model修饰符
.lazy 在输入时就于后台的数据进行同部，在change事件同步

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number 自动将输入值转换为number
.trim 过滤输入中首尾的空格

v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
用v-on:click监听是否点击

<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>

<!-- 阻止单击事件继续传播 -->
<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>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

v-on 在监听键盘事件时提供了按键的修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!-- 只有在 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