【Vue】Vue快速入门、Vue常用指令、Vue的生命周期-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue】Vue快速入门、Vue常用指令、Vue的生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【Vue】Vue快速入门、Vue常用指令、Vue的生命周期,# Vue,vue.js,前端,javascript

🐌个人主页： 🐌 叶落闲庭
💨我的专栏：💨
c语言
数据结构
javaEE
操作系统
Redis

石可破也，而不可夺坚；丹可磨也，而不可夺赤。

一、 Vue快速入门

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

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

2.在JS代码区域，创建Vue核心对象，进行数据绑定

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data() {
            return {
                username:""
            }
        }
    });
</script>

3.编写视图

<div id="app">
    <input v-model="username">
    <!-- 插值表达式 -->
    {{username}}

</div>

二、Vue常用指令

指令：HTML标签上带有Vs前缀的特殊属性，不同指令具有不同含义。例如：V-if,V-for…
常用指令：

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

2.1 v-bind&v-model

<div id="app">
    <a v-bind:href="url">点击</a>
    <input v-model="url">

</div>

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data() {
            return {
                username:"",
                url:"http:www.baidu.com"
            }
        }
    });
</script>

2.2 v-on

<div id="app">
    <input type="button" value="按钮" v-on:click="show()"><br>
    <input type="button" value="按钮" @click="show()">

</div>

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        methods:{
            show() {
                alert("我被点了");
            }
        }
    });
</script>

2.3 v-if

<div id="app">
    <div v-if="count==1">div1</div>
    <div v-else-if="count==2">div2</div>
    <div v-else>div3</div>
    <input v-model="count">
</div>

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                count:3
            }
        }
    });
</script>

2.4 v-show

<div id="app">
    <input v-model="count">
    <div v-show="count==4">div4 v-show</div>
</div>

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                count:3
            }
        }
    });
</script>

2.5 v-for

v-for内addr是自定义参数，addrs表示Vue返回的数组addrs[“北京”,“上海”,“广州”]

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

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                count:3,
                addrs:["北京","上海","广州"]
            }
        }
    });
</script>

加索引：文章来源地址https://www.toymoban.com/news/detail-728695.html

<div id="app">
    <div v-for="(addr,i) in addrs">
        {{i + 1}} -- {{addr}}<br>
</div>

三、Vue的生命周期

Vue的生命周期分为八个阶段，每触发一个生命周期事件，会自动执行一个生命周期的方法

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

mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。
- 发送异步请求，加载数据

到了这里，关于【Vue】Vue快速入门、Vue常用指令、Vue的生命周期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！