vue学习系列-核心内容

hello world

改造我们上一节创建好的项目
App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'hello world'
    }
  }
}
</script>

然后运行项目，使用 npm run serve 命令，等待项目运行起来。接着打开浏览器，在浏览器上输入 http://localhost:8080/。如果能在浏览器看到 hello world 的字样，那么恭喜你，你已成功搭建了一个vue helloworld的项目。

数据绑定

当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<template>
  <div class="hello">
    <h1>{{ a }}</h1>
    <button @click="update()">修改</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      a: 1
    }
  },
  methods: {
  	update() {
		this.a++;
	}
  }
}
</script>

页面初始化完成时，页面显示的是1；当点击修改按钮后，页面的内容发生了改变

条件渲染

1、v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

// 当awesome的值为true时，显示Vue is awesome!。反之，不显示
<h1 v-if="awesome">Vue is awesome!</h1>

也可以在v-if后加v-else-if和v-else

<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-else-if也必须紧跟在带 v-if 或者 v-else-if 的元素之后

2、v-show
v-show 只是简单地切换元素的 CSS 属性 display。

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

3、v-if 和 v-show 的区别

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

4、使用场景
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

v-for 指令基于一个数组来渲染一个列表。

<template>
  <ul id="example-1">
    <li v-for="(item, index) in items" :key="item + index">
      {{ item.message }} - {{ index }}
    </li>
  </ul>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      items: [{ message: "Foo" }, { message: "Bar" }]
    };
  }
};
</script>

事件处理

class和style绑定