Vue 快速入门教程

最新推荐文章于 2024-07-24 12:54:56 发布

不想写代码的Rayoung

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量172

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_60467212/article/details/128502149

版权

Vue 快速入门教程

文章目录

Vue 快速入门教程

1. 概念

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
官网：https://cn.vuejs.org

2. 快速入门

新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>
在JS代码区域，创建Vue核心对象，进行数据绑定

 new Vue({
    el:"#app",
    data(){
        return{
            username:""
        }
     }

编写视图

<div id="app">
    <input name="username" v-model="username">
    {{username}}
</div>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<!--1. 新建HTML页面，引入Vue.js文件-->
<script src="js/vue.js"></script>

<!--3. 编写视图-->
<div id="app">
    <input name="username" v-model="username">
    {{username}}
</div>

<script>
    //2. 在JS代码区域，创建Vue核心对象，进行数据绑定
    new Vue({
        el:"#app",
        data(){
            return{
                username:""
            }
        }
        /*data: function () {
            return{
                username :""
            }
        }*/
    })
</script>
</body>
</html>

3. Vue 常用指令

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

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

示例代码：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>

<!--1. 新建HTML页面，引入Vue.js文件-->
<script src="js/vue.js"></script>

<!--3. 编写视图-->
<div id="app">
    <input name="username" v-model="username">
    {{username}}
    <br>

    <!--<a v-bind:href="src">百度一下</a>-->
    <a :href="src">百度一下</a>
    <input name="src" v-model="src">
    <br>

    <!--
        v-if和v-show的区别：
            v-if根据条件选择是否渲染，如果不满足条件则此段代码在页面中不存在
            v-show不满足条件时，改变的是display属性的值
    -->
    <div v-if="count==1">div1</div>
    <div v-else-if="count==2">div2</div>
    <div v-else>div3</div>
    <div v-show="count==4">v-show</div>
    <input name="count" v-model="count">
    <br>

    <!--
        v-on： 可以使用 @ 来替代
    -->
    <!--<input type="button" v-on:click="show()" value="show()">-->
    <input type="button" @click="show()" value="show()">
    <hr>

    <!--for列表展示-->
    <div v-for="addr in addrs">
        {{addr}}<br>
    </div>
    <br>
    <!--使用如下方式展示带有序号的列表-->
    <div v-for="(addr, i) in addrs">
        {{i+1}}. {{addr}}<br>
    </div>

</div>


<script>
    //2. 在JS代码区域，创建Vue核心对象，进行数据绑定
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",
                src: "https://www.baidu.com",
                count: 3,
                addrs:["北京","上海","天津"]
            }
        },
        /*data: function () {
            return{
                username :""
            }
        }*/
        methods:{
            show(){
                alert("show 方法执行了");
            }
        }
    })
</script>
</body>
</html>

4. Vue 的生命周期

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

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

vue生命周期

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

示例：

mounted(){
    alert("挂载完成")
},/*
mounted:function () {
    alert("挂载完成")
}*/

声明：本文内容整理自：黑马程序员新版JavaWeb基础教程，Java web从入门到企业实战完整版

不想写代码的Rayoung

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 快速入门教程

/2. 在JS代码区域，创建Vue核心对象，进行数据绑定。//2. 在JS代码区域，创建Vue核心对象，进行数据绑定。"show 方法执行了"
复制链接

扫一扫