Vue

入门代码

Vue-快速入门

<div id="app">
    <input type="text" v-model="message">
    {{message}}//内容由Vue决定
</div>

vue常用的属性：

el: 用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data: 用来定义数据模型
methods: 用来定义函数。这个我们在后面就会用到

Vue指令

vue的常用指令，如下表所示：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind v-model

    <a v-bind:href="url">链接1</a>
    //v-bind指令是可以省略的，但是:不能省略
    <a :href="url">链接2</a>

    <input type="text" v-model="url">

</div>

**双向绑定的作用：可以获取表单的数据的值，然后提交给服务器**

v-on绑定事件

需要注意的是如下2点：

v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
v-on语法绑定事件时，事件名相比较js中的事件名，没有on

<body> <div id="app"> **v-on:click 表示绑定点击事件** <input type="button" value="点我一下" v-on:click="handle()"> **简写方式** <input type="button" value="点我一下" @click="handle()">

</div>

v-if和v-show

指令	描述
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-if-else
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值

    年龄<input type="text" v-model="age">经判定,为:
    <span v-if="age <= 35">年轻人(35及以下)</span>
    <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
    <span v-else>老年人(60及以上)</span>

    <br><br>

    年龄<input type="text" v-model="age">经判定,为:
    <span v-show="age <= 35">年轻人(35及以下)</span>
    <span v-show="age > 35 && age < 60">中年人(35-60)</span>
    <span v-show="age >= 60">老年人(60及以上)</span>

</div>

v-for遍历

<body> <div id="app"> <div v-for="addr in addrs">{{addr}}</div> <hr>**addr是用户自定义的变量名，in是关键字** <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div> </div> </body> <script> //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ addrs:["北京", "上海", "西安", "成都", "深圳"] }, methods: {

    }
})

2.4 生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

其中我们需要重点关注的是mounted,其他的我们了解即可。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

我们在VS Code中创建名为18. Vue-生命周期.html的文件编写代码来演示效果，提前准备如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        }
    })
</script>
</html>

然后我们编写mounted声明周期的钩子函数，与methods同级，代码如下：

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。

标签：生命周期,vue,绑定,60,Vue,mounted
From： https://www.cnblogs.com/Yunyuzuiluo/p/18619879

Vue

Vue