Vue.js 基本知识——基于script标签引入

最新推荐文章于 2025-06-20 17:59:58 发布

laoyaotask

最新推荐文章于 2025-06-20 17:59:58 发布

阅读量4.3w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Web前端 Vue

本文链接：https://blog.youkuaiyun.com/laoyaotask/article/details/94366082

Web前端同时被 2 个专栏收录

36 篇文章

订阅专栏

Vue

12 篇文章

订阅专栏

本文详细介绍Vue.js的基本使用方法，包括如何引入Vue.js，组件的创建与数据绑定，条件与循环的使用，以及如何通过Ajax技术从后端获取数据。适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用Script标签引入vue的方法

<script src="https://unpkg.com/vue/dist/vue.js"></script>

也可以将vue.js文件下载至项目目录。调试环境建议用vue.js，生产环境建议用vue.min.js
2、组件必须有一个顶级容器，Vue的功能必须要在这此容器内。

   <div id="myApp">
        ...
    </div>

3、vue组件的创建。vue组件代码可以在当前html中的script标签中，也可单独存放到一个.js文件中，在html中用script标签来引用。

    <script>
        var comName=new Vue({
            el:"#myApp,
            data:{
                json格式的数据，如
                msg:"abc"
            },
            其他操作……
            })
    </script>

4、容器标签内容数据的绑定（声明式渲染）

    <div id="myApp">
        <p>{{msg}}</p>
    </div>

5、容器标签属性数据的绑定（属性值渲染）

<div id="myApp">
        <p v-bind:title="msg"></p>
    </div>

其中，v-bind: 可简写为 :
6、表单标签值的双向绑定（双向数据绑定）

<div id="myApp">
        <input v-model="msg"></p> 
    </div>

7、条件，常用于不同视图之间的切换

<template>
        <div v-if="msg == 'abc'">
            A
        </div>
        <div v-else>
            B
        </div>
    </template>

其中，msg为组件定义代码中data里的变量
8、循环，用于动态生成一组数据。示例：

<div id="myapp">
        <h2 v-if="seen">2018年流行手游</h2>
        <ol>
            <li v-for="game in games">
                {{game.title}}/{{game.price}}
            </li>
        </ol>
    </div>
    <script>
        var my = new Vue({
            el: "#myapp",
            data: {
                seen: true,
                games: [
                    { title: "开心消消乐", price: 100.00 },
                    { title: "开心斗地主", price: 200.00 }
                ]
            }
        })
    </script>

9、使用ajax技术从后端获取数据。Vue本身不像jQuery那样自带ajax方法，所以需要借助其他ajax插件。官方推荐使用axios，需要用到将其引入到当面页面。示例：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="myApp">
        <ul class="list-group">
            <li v-for="item in receivedData" class="list-group-item">
                <a v-bind:href=genHref(item.id)>{{item.name}}</a>-{{item.age}}-{{item.birth}}
            </li>
        </ul>
    </div>

    <script>
        var myApp = new Vue({
            el: "#myApp",
            data:{
                receivedData:[] //定义一个用于接收后端传过来值的本地变量
            },
            methods:{
                //定义一个函数，用于通过ajax方法访问后端
                getInfo(){ 
                    axios.get('../data.json')
                    .then(res=>{
                        this.receivedData=res.data //将返回值赋给上述已定义的本地变量
                    })
                },
                //定义一个方法，用于动态绑定循环项中a标签的href属性值
                genHref(data)
                {
                    return("read.html?id="+data)
                }
            },
            mounted(){ //页面加载完成后执行访问后端的函数
                this.getInfo()
            }
        })
    </script>

未完待续，有时间再继续学习。