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>