Vue快速入门_vue样式表快速入门-优快云博客

文章目录

概念

Vue 是一套前端框架,免除JavaScript中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定,将编程的关注点放在数据上
基础代码
- el指的是需要控制哪个区，即CSS选择器
- data指的是数据模型，是一个对象

<script>
        new Vue({
            el: "#app",  //vue接管区域
            data: {           
            }
        })
    </script>

常用指令

指令：HTML标签上带有 v-前缀的特殊属性，不同指令不同含义。
本文介绍了v-bind,v-model,v-on,v-if,v-show,-v-for六种不同的指令

v-bind

概述:为HTML标签绑定属性值，如设置 href,css样式等

<!--为url标签绑定超链接-->
<a v-bind:href="url">超链接</a>
<!--简写-->
<a :href="url">超链接</a>

v-model

概述
- 绑定的数据回合表单元素值相关联
- 绑定的数据等于表单元素的值(双向绑定)

<div id="app">
	<a :href="url">超链接</a>
	<!--为url进行绑定，当修改表格内容时，会改变url对应的超链接的值-->
	<input type="text" v-model="url">
</div>

<script>
        new Vue({
            el: "#app",  //vue接管区域
            data: {
                url: "https://www.baidu.com"
            },
            methods:{
                handle:function(){
                    alert("点击事件")
                }
            }
        })
    </script>

通过v-bind或v-model绑定的变量，需要在数据模型中声明

v-on

概述:为HTML绑定事件

<!--为按钮绑定单击事件，触发handle()函数-->
<input type="button" value="按钮" v-on:click="handle"></input>
<!--简写-->
<input type="button" value="按钮" @click="handle"></input>

    <script>
        new Vue({
            el: "#app",  //vue接管区域
            data: {
                //略
            },
            methods:{
                handle:function(){
                    alert("点击事件")
                }
            }
        })
    </script>

v-if

条件性的渲染某元素，判定为true时渲染,否则不渲染
通常与v-else-if,v-else使用

	<div id="app">
年龄<input type="text" v-model="age">判定为
    <span v-if="age>=18">成人</span>
    <span v-else>儿童</span>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:20
        },
        method:{}
    })

v-show

根据条件展示某元素，区别在于切换的是display属性值
与v-if不同的点:

v-show全部渲染，只是通过css样式中的display来选择是否展示
v-if是条件性的渲染，只渲染符合要求的条件

    <div id="app">
    年龄<input type="text" v-model="age">判定为
    <span v-show="age>=18">成人</span>
    <span v-show="age<18">儿童</span>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:11
        },
        method:{}
    })
</script>

v-for

列表渲染，遍历容器的元素或对象的属性
语法:v-for="(item,index) in items,其中item指的是元素，items指的是数组，index指的是索引
插值表达式
形式:{{表达式}}}
- 变量
- 三元运算符
- 函数调用
- 算术运算

<body>
    <div id="app">
    <div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            addrs:["北京","上海","深圳","杭州"]
        },
        methods:{
            }
    })
</script>

生命周期

概念:指一个对象从创建到销毁的整个过程
生命周期八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

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

使用方法，在Vue对象中，与methods平级

<script>
        new Vue({
            el: "#app",  //vue接管区域
            data: {              
            },
            methods:{
                },
            mounted(){
            alert("挂载完成")
	            }   
            }
        })
    </script>