vue | 恬静荒芜的时光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span v-html="text"></span>
        <br />
        <span v-bind:test="abc">{{text}}</span>
        <br />
        <a v-bind:href="url">百度</a>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</html>

    const vm= new Vue({
        el: "#app",
        data: {
            userName: "roy",
            age: 18,
            abc:"test",
            url:"https://www",
            text:"test"
        },
        methods:{
	        change(){
	            age++;
		        console.log("======")
	        },
	        queryUser(){
		        axios.get(".....").then(...)
	        }
	        
        },
        created:function(){
	        this.queryUser();
        }
    })

类型	指令	说明	示例
文本插值	`{{}}`
文本插值	`v-html`
绑定属性	`v-bind:attr`	:attr / :href	`<input v-bind:value="userName"/>`
条件渲染	`v-if`
条件渲染	`v-show`
列表渲染	`v-for`	v-for=”(element,index) in 数组或对象”	`<li v-for="element in names">{{element}}</li>`
事件绑定	`v-on:event`	@click event （事件名）: click、	`<button v-on:click="change()">按钮</button>`
双向绑定	`v-model`

双向绑定

view viewmodel mode

v-model

生命周期

周期函数	说明
`beforeCreate`	vue对象创建之前执行
`created`	vue 创建对象之后，元素还未加载，data已经初始完成，一般在该函数中书写异步请求代码到后台服务请求数据
`beforeMount`	vue对象挂载到视图之前执行，el元素已经获取到,但未完成数据绑定
`mounted`	vue 对象挂载到视图之后执行，已完成数据绑定
`beforeUpdate`	vue对象更新前执行，必需有更新，双向绑定的数据被更新，下一步需要影响到view之前
`updated`	vue对象更新完成执行，双向绑定的数据被更新，view状态也更新完成
`beforeDestroy`	vue对象销毁前执行 `vm.$destory()`
`destoryed`	vue对象销毁完后执行 `vm.$destory()`