Vue基础（三）：跟着官方文档学Vue之起步

最新推荐文章于 2025-05-08 09:00:00 发布

wanik666

最新推荐文章于 2025-05-08 09:00:00 发布

阅读量325

点赞数

分类专栏： Vue 文章标签： vue html vue.js node.js

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/qq_33418407/article/details/105869607

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

1. Hello Vue!

创建一个普通html文件，使用CND方式引入vue.js，接下来就开始第一个Vue应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    
    <!-- 1. 引入vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
	<!-- 2. 创建一个div标签并设置id属性值为app-->
    <div id="app">
    	<!-- 7. 使用双花括号包裹Vue对象中定义的message变量 -->
        {{message}}
    </div>
    
    <!--3. 编写javascript脚本 -->
    <script>
    	//4. 使用new Vue()创建vue实例
        var app =new Vue({
            el:"#app",	//5. 设置要使用vue渲染的Dom节点
            data:{		//6. 使用data属性定义数据，如下面的message变量值为Hello Vue!
                message:"Hello Vue!",
            }
        })
    </script>
</body>
</html>

在浏览器中打开运行结果显示如下：

Hello Vue!

2. Vue属性动态绑定v-bind

使用Vue提供的v-bind指令可以将HTML中attribute属性进行数值动态绑定，如css、id、name、src、href等属性
举个例子：
编写两个css样式如下：

.fontRed{
    color:red;
}
.fontBlue{
    color: blue;
}

使用v-bind:class="fontColor"对div的class属性进行绑定

<div id="app" v-bind:class="fontColor">
    {{message}}
</div>

在vue实例中添加fontColor变量默认值为"fontRed"

<script>
    var app =new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!",
            fontColor:"fontRed"
        }
    })
</script>

在浏览器中打开运行结果显示如下：
v-bind
我们可以使用开发者工具查看源代码，此时使用v-bind:class的div已绑定class=“fontRed”

借助开发者工具的控制台，我们可以动态改变v-bind绑定的值，通过修改app.fontColor="fontBlue"如下：
修改fontColor变量
注意: 这里的app为vue实例，如var app = new Vue()，通过app.fontColor可以直接调用修改data中的变量

简便写法：v-bind的简单写法，可以使用：（冒号）来代替v-bind（推荐），如下代码运行结果最终一致：

<div id="app" :class="fontColor">
    {{message}}
</div>

3. Vue条件判断v-if

v-if指令主要用来做条件判断，我们对上面示例做如下修改：

<div id="app" :class="fontColor" >
    {{message}}
    <p v-if="isShow">你现在可以看见这段话了！</p>
</div>

<script>
    var app =new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!",
            fontColor:"fontRed",
            isShow:true
        }
    })
</script>

在Vue实例中定义变量isShow为true，同时在p标签中使用v-if=“isShow”，运行结果显示如下：
v-if
我们通过开发者工具修改isShow的值为false再来看看结果：
isShow=false
我们查看html源代码发现，p标签变成了一段注释：
变为注释
疑问： 这里Vue是如何处理的？

4. Vue中循环遍历指令v-for

在vue实例中定义一个数组，如下：

var app =new Vue({
    el:"#app",
    data:{
        options:[
            "床前明月光,",
            "疑是地上霜,",
            "举头望明月,",
            "低头思故乡。"
        ]
    }
})

html页面如下：

<div id="app" :class="fontColor" >
    <p v-for="item in options">{{item}}</p>
</div>

运行结果如下：
v-for运行结果

5. Vue中事件绑定指令v-on

在v-if的基础上做如下修改，添加一个button按钮，该按钮使用v-on:click="hiddenMsg"绑定了一个隐藏消息事件，如下：

<div id="app" >
    <p v-if="isShow">你现在可以看见这段话了！</p>
    <button v-on:click="hiddenMsg">隐藏</button>
</div>
<script>
    var app =new Vue({
        el:"#app",
        data:{
            isShow:true,
        },
        methods:{
            hiddenMsg:function () {
                    this.isShow = false;
            }
        }
    })
</script>

未触发按钮事件时运行结果如下：

我们点击隐藏按钮触发hiddenMsg事件，运行结果如下：

此时已通过事件将p标签隐藏
简便写法： v-on指令同样支持简便写法，可使用@代替，如@click="hiddenMsg"效果是一样的

6. Vue表单双向绑定v-model

在input标签上使用v-model可以将变量进行双向绑定，如下：

<div id="app" >
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
    var app =new Vue({
        el:"#app",
        data:{
            message:""
        }
    })
</script>

运行结果如下：
v-model
此时我们通过input输入框可以动态修改message值，即input输入框值改变，message值也发生改变

7. Vue自定义组件

<div id="app" >
	<!-- 使用自定义组件custom -->
    <custom></custom>
</div>
<script>
	//自定义组件名为custom的组件
    Vue.component("custom",{
        template:"<div>这是自定义component</div>"
    })
</script>

这是最简单的组件定义，如果我们希望可以通过父组件传值到子组件，那么该如何做?

在定义组件时，设置一个props，props中的值类似于html中的attribute属性，在父组件向子组件传值时，需要通过v-bind来绑定props中设置的属性，从而实现父组件向子组件传递值，如下：

<div id="app" >
	<!--使用v-for进行遍历，将遍历后的结果通过v-bind:item进行绑定，这个item为子组件的属性  -->
    <custom v-for="fruit in fruits" :item="fruit" :key="fruit"></custom>
</div>
<script>
    Vue.component("custom",{
        props:["item"],	//设置一个fruit属性
        template:"<div>{{item}}</div>"
    })
    var app =new Vue({
        el:"#app",
        data:{
            fruits:["apple","banana","orange"]
        }
    })
</script>