Vue

Vue

　　一套前端框架，免除原生JavaScript中的DOM操作，简化书写

　　基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上

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

<head></head>中引入官方文件：https：//v2.cn.vuejs.org/
    <script src = "相对路径"></script>
<body></body>中定义视图（与下面数据模型互相影响）
    <div id = "app">
        <input type = "text" v-model = "message">
　　
            {{message}}
                                           //  "{{message}}":插值表达式，形式：{{表达式}},内容可为：变量（主）、三元运算符、函数调用、算数运算
   </div>
<body></body>外定义vue对象（固定位置），数据模型（与上面视图互相影响）
<script>
        new Vue({
            el:"#app",                     //vue接管区域
            data:{
                message:"Hello vue!"
                    }
            })
</script>
                                           //vue 特性：双向数据绑定

 

Vue常用指令

  指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义

  常用：

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

 

 

 

 

 

 

 

 

 

注：通过v-bind或v-model绑定的变量，必须在数据模型中声明

 

v-if指令

v-show指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "../JS/vue.js"></script>             //相对地址路径
</head>
<body>
    <div id = "app">
        年龄<input type="text" v-model = "age">经判定为：

        <span v-if = "age <= 35">年轻人</span>
        <span v-else-if = "age>35 && age<60" >中年人</span>
        <span v-else>老年人</span>                         //满足哪个显示哪个
        <br><br> 

        <span v-show = "age<35">年轻人</span>              //满足条件则显示
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{ 
            age:20
        },
        methods: {                                        //methods与data平级
          
        }
    })
</script>
</html>

 

v-on指令

<input  type = "button"  value = "按钮"  v-on :click = "函数">

<input  type = "button"  value = "按钮"  @click = "函数">

 v-for 指令

<div v-for = "addr in addrs">{{addr}}</div>

<div v-for = "(addr, index) in addrs">{{index + 1}}：{{addr}}</div>

　　data:{

　　　　addrs:['北', '上', '广', '深'……]

　　},

　　……

 

Vue生命周期

　　指一个对象从创建到销毁的整个过程

　　生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成，Vue初始化完成，HTML界面渲染成功（发送请求到服务器，加载数据）
beforeUpdata 更新前
updataed 更新后
beforeDestroy 销毁前
destroyed 销毁后



 

 

 

 

 

 

 

<script>
    new Vue({
        el:"#app",
        data:{
            ……
        },
        mounted(){
                console.log("Vue挂载完成，发送请求获取数据");
        },
        methods:{
        ……
        }
    }）
</script>

 

posted @ 2023-10-24 20:02  suN(小硕)  阅读(7)  评论(0)  编辑  收藏  举报