02.Hello Vue.js

1.示例

使用{{ }}来完成数据绑定

//引入vue.js的script文件
<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p>{{ message }}</p>
</div>

//在script中创建一个vue实例，包括el:元素，data：绑定的数据

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js 2!'
  }
})

当message改变时，其内容随之改变。

1.1 vue实例的数据

注意：
值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。
也就是说如果你添加一个新的属性，那么对新添加的属性的改动将不会触发任何视图的更新。
如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。
这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
详情参考官网：https://cn.vuejs.org/v2/guide/instance.html

1.2 vue实例的属性与方法

它们都有前缀 $，以便与用户定义的属性区分开来。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.data===data;//true
vm.$data === data; // => true
vm.$el === document.getElementById('example'); // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

2.指令

2.0 插值的指令，绑定数据

• v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>

• v-html指令，双大括号会将数据解释为普通文本，而非 HTML 代码。
  为了输出真正的 HTML,使用 v-html指令。

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

2.1 v-bind

使用v-bind指令来完成属性值的绑定。
缩写，可以省略v-bind，直接：属性名

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p v-bind:title="title">{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js 2!',
    title:'提示信息哟'
  }
})

实现效果：当鼠标悬停在Hello Vue.js 2!上边时，会有提示框显示“提示信息呦”

2.2 v-if,v-else-if，v-else,v-show指令

• 使用v-if指令控制元素是否显示，当值为true时显示,为false时不显示。

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p v-if="seen">{{ message }}</p>
</div>

new Vue({
  el: '#app',
 data: {
    seen: true,
    message: 'Hello Vue.js 2!'
  }
})

• v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别,用法和v-if相同，表示if之外的其他情况。

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

• v-show

<h1 v-show="ok">Hello!</h1>

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

2.3 v-for指令

• 可以用来遍历一个数组

<script src="https://unpkg.com/vue"></script>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

• 支持item，index作为参数

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

• 可以用来遍历一个对象
  只有一个参数，返回value值。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

有两个参数，返回key，value键值对

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

三个参数，返回key，value，index

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

尽量在使用v-for时提供key值

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

2.4 v-on指令

添加onclick事件。
缩写@click

<script src="https://unpkg.com/vue"></script>
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
   //注册reverseMessage方法
    reverseMessage: function () {
      //this表示创建的vue实例，逆转message的值
      this.message = this.message.split('').reverse().join('')
    }
  }
})

• 可以在调用v-on:click的时候传递参数，如果需要访问原始的DOM事件，可以使用$event方法。

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

• 事件修饰符

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

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

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

其他参考官网：https://cn.vuejs.org/v2/guide/events.html

2.5 v-model实现双向绑定

• 绑定表单

<script src="https://unpkg.com/vue"></script>
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

其他参考官网：https://cn.vuejs.org/v2/guide/forms.html

2.6 绑定Class

v-bind:class
传递的class对象中类的值为true，该类就存在。

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

2.7 绑定Style

v-bind:style

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

添加多个样式，使用数组即可

<div v-bind:style="[baseStyles, overridingStyles]"></div>

3.计算属性

官网：https://cn.vuejs.org/v2/guide/computed.html

4.在vue.js中获取dom，并修改样式

在vue.js中可以通过ref属性来标记一个dom结构

<ul ref="tabNav">
</ul>

在获取dom的时候

 mounted () {
    this.$nextTick(() => {
      // 通过 this.$refs.属性名来获取注册的dom
      let navHeight = this.$refs.tabNav.clientHeight
    })
  },

可以看到在mounted方法中使用了this.nextTick()可以等待dom生成以后再来获取dom对象。