Yunyuzuiluo

Vue

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

<body> <div id="app"> 
    <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属性的值
<body> <div id="app"> 
    年龄<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所绑定的钩子函数，然后自动执行，弹框。

posted on 2024-12-20 19:20  刘晋宇  阅读(17)  评论(0)    收藏  举报

导航