Vue

Vue

什么是Vue?

1.Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。

2.基于MVVM(Moedel-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。

框架:是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷、更加高效。

Vue快速入门

1.新建HTML页面,引入Vue.js文件

<script src = "js/vue.js"></script>

2.在JS代码区域,创建Vue核心对象,定义数据模型

<script>
    new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
    })
</script>

3.编写视图

<div id = "app">
    <input type = "text" v-model = "message">
    {{message}}
</div>

插值表达式

1.形式:{{表达式}}

2.内容可以是:变量,三元运算符,函数调用,算数运算

常用指令

1.指令:HTML标签上带有v-前缀的特殊属性,不同指令具有不同含义。例如:v-if,v-for...

2.常用指令

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

<script>
	//定义Vue对象
    new Vue({
        el: "#app",
        data:{
            url:"https://bilibili.com"
        }
    })
</script>

注意:通过v-bind或者v-model绑定的变量,必须在数据模型中声明。

//v-on
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">

<script>
    new Vue({
        el:"#app",
        data:{
            //...
        },
        methods:{
            handle:function(){
                alert('我被点击了');
            }
        },
    })
</script>
//v-if
//年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
//v-show
//年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>
/v-for
<div v-for="addr in addrs">{{addr}}</div>//addr是可以随便取的元素,addrs是数组
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>//为了拿到数组的索引

data:{
	...
	addrs:['北京','上海','广州','深圳','成都','杭州']
},

Vue的生命周期

1.生命周期:指一个对象从创建到销毁的整个过程。

2.生命周期的八个阶段:每触发一个生命周期事件后,会自动执行一个生命周期方法(钩子)。

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

目的:在指定的生命周期做指定的事

mounted: 挂在完成,Vue初始化成功,HTML页面渲染成功。(发送请求到服务端,加载数据)

<script>
    new Vue({
        el:"#app",
        data:{
            
        }
        mounted() {
        console.log("Vue挂载完毕,发送请求获取数据");
        smethods:{
            
        },
    })
</script>
posted @ 2024-04-07 12:41  JenckMin  阅读(3)  评论(0编辑  收藏  举报