前端框架Vue

Vue

前端框架，免除了javaScript中的DOM操作 ,简化书写

基于MVVM（Model-View-View Model）思想，实现数据的双重绑定

流程

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="test" v-model="message">  <!--绑定数据模型 -->
    
   	{{message}}      <!--插值表达式 -->
   </div>
   

   ​

常用指令

v-bind

<a v-bind:href="url">传智播客</a>
<a :href="url">传智播客</a> //简写

<script>
    new Vue({
        el:"#app",
        data:{//变量
            url:"https://www.itcast.cn"
        }
    })
</script>

> 可以动态的修改标签的属性

v-model

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

> 表单内容和与数据模型"url"自动绑定

v-on

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

<script>
    new Vue({
        el:"#app",
        data:{
           //......
        }，
        methods:{//方法
            handle:funtion(){
                alert('我被点击了')；
            }
        }，
    })
</script>

和上面的一样

v-if v-else-if v-else

直接放图片了

前三个根据条件渲染，show是全部渲染，根据条件展示

v-for

生命周期

生命周期有八个阶段，每触发一个生命周期时间，会自动执行相应的生命周期方法（钩子）

<script>
    new Vue({
        el:"#app",
        mounted(){
            console.log("Vue挂在完成，发送请求数据");
        }
    })
</script>

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