Vue声明式渲染、条件与循环、事件绑定、双向绑定、生命周期

Vue声明式渲染、条件与循环、时间绑定、双向绑定、生命周期
1.Vue声明式渲染
采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<div id="app">
  {{ message }}
</div>

 data: {
    message: 'Hello Vue!'+ new Date().toLocaleString()
  }

列表渲染
v-for:可以绑定数组的数据来渲染一个项目列表

<div v-for="(value,name,index) in objects " :key="value.id"> //要写key值
      {{index}}.{{name}}:{{value}}
    </div>

data(){
	return{
		objects:{
        id:1,
        title:"How to do lits in Vue",
        data:"Heart a leg",
        pulis:"2020-07-22"
      }
	}
}

v-for v-if 同时使用

<ul v-if="items.length">
      <li v-for="item in items1" :key="item.id">{{item.id}}---{{item.text}}</li>
    </ul>
    <p v-else>No todos left!</p>

data(){
	return{
		items1: [
        { id: 1, text: "学习JavaScript" },
        { id: 2, text: "学习vue" },
        { id: 3, text: "前端" }
      ]
	}
}

***注意：***v-if与v-for处于同一节点时，v-for的优先级比v-if高，这就意味着v-if分别重复运行于每个v-for循环中
2.条件与循环
v-if

<div v-if="seen">{{message}}---{{sky}}</div>

 data(){ return{
  message: 'Hello Vue!'+ new Date().toLocaleString(),
    sky: "晴朗",
    seen: true,
}
  }

v-else

<h1 v-if="some">Vue is awesome!</h1>
    <h1 v-else>haha</h1>

data(){
	return{
	some: false,//flase显示 haha;true显示Vue is awesome!
}	
}

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

data(){
	return{
	type: "",//根据type的值做出判断
}
}

v-show:元素的显示与隐藏

 <h2 v-show="ok">夕阳和海洋</h2>

data(){
	return{
		ok:true //true:显示 false:隐藏
	}
}

v-if 与v-show：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
注意： v-else，v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后

3.事件绑定
v-on:click也可以简写成@click

	<button v-on:click="reverse">反转消息</button>
    <!-- <button @click="reverse">反转消息</button> -->

  methods: {
    // 写事件用methods
    // 方法一：reverse:function(){
    // },
    //方法二：
    reverse() {
      alert("触发成功！");
      this.message = this.message
        .split("")
        .reverse()
        .join("");
    }
  }

4.双向绑定
v-mode:本质是负责监听用户的输入事件，从而更新数据。当输入事件发生改变时，实时更新Vue中的数据。

<div id="app-1">
      <p>{{model}}</p>
      <input type="text" v-model="model" placeholder="请输入内容" />
    </div>

data(){
return{
	 model: "",
}
}

5.生命周期
Vue的生命周期：
1.beforeCreate(创建前)
2.created (创建后)
3.beforeMount (载入前)
4.mounted (载入后)
5. beforeUpdate (更新前)
6. updated (更新后)
7. beforeDestroy (销毁前)
8. destroy (销毁后)
vue第一次加载页面会触发那几个钩子函数？
beforeCreate、created、beforeMount、mounted
Dome渲染在那个周期就已经完成？
mounted
生命周期运行图：