Vue教学

原创已于 2024-03-05 13:48:17 修改 · 880 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #前端框架

于 2024-02-19 12:28:12 首次发布

Vue 专栏收录该内容

7 篇文章

订阅专栏

该博客介绍了Vue.js项目搭建步骤，包括新建项目、创建HTML文件、导入vue.js文件（cdn或本地安装）、创建Vue实例。强调Vue实例与容器是一对一关系，还指出容器{{xxx}}中xxx要写js表达式，可自动读取Vue实例data属性，并区分了js表达式和js代码。

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

一、首先新建项目，创建一个html文件

二、导入vue.js文件

第一种用的cdn方式导入的vue.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>

</body>
</html>

第二种用的是安装之后放在项目里面再导入vue.js文件

两种都可以，想用哪种就用哪种

三、创建Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="blugins/vue/vue.js"></script>
</head>
<body> 
<!--首先创建一个容器-->
<div id="root">
    {{name}}，我今年{{age}}岁了
</div>

<script type="text/javascript">
// 其次就可以创建Vue实例了，（想要Vue工作，就必须要先创建Vue实例）
    // new Vue({}) 该语法为创建Vue实例，{}里面要传入配置对象
    new Vue({
        // el:""    该配置对象用于指定Vue实例为哪个容器服务,且该配置对象的值通常为css选择器字符串              
        el:"#root",                        
        // data:{}  该配置对象用于存储数据，{}里面的对象key值对应的为容器里{{}}包含的值，例：name对应容器里的{{name}}                                   
        data:{                          
            name:"hello world",            
            age:19
        }
    })
</script>

</body>
</html>

根据此实例用浏览器打开展示数据：

四、Vue实例与容器之间只能一对一，不能一对多或者多对一

一对多：一个Vue实例对上两个容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="blugins/vue/vue.js"></script>
</head>
<body>
<div class="first">
    {{name}}，我今年{{age}}岁了
</div>
<div class="first">
    {{name}}，我今年{{age}}岁了
</div>

<script type="text/javascript">
    new Vue({
        el:".first",
        data:{
            name:"hello world",
            age:19
        }
    })
</script>
</body>
</html>

展示数据后会看到只有一个数据展示出来，另一个还是原样子

多对一：两个Vue实例分别对一个容器存储数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="blugins/vue/vue.js"></script>
</head>
<body>
<div class="first">
    {{name}}，我今年{{age}}岁了
</div>

<script type="text/javascript">
    new Vue({
        el:".first",
        data:{
            name:"hello world", 
        }
    })
    new Vue({
        el:".first",
        data:{
            age:19
        }
    })
</script>
</body>
</html>

展示数据后看到数据展示的也并不全面

所以一个Vue实例只能对应一个容器，一个容器也只能对应一个Vue实例！！！

五、容器{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到Vue实例中data中的所有属性

注意区分：js表达式和 js代码(js语句)

1.表达式：一个表达式会产生一个值，可以放在任何需要这个值的地方：

（1）a

（2）a+b

（3）dem(1)

2.js代码(js语句)：

（1）if(){}

（2）for(){}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="first">
<!--    name.toUpperCase()  读取了data数据中name对应的值的字符串的属性-->
<!--    age+1               读取了data数据中age对应的值的整数的属性-->
    {{name.toUpperCase()}}，我今年{{age+1}}岁了
</div>

<script type="text/javascript">
    new Vue({
        el: "#first",
        data: {
            name: "hello world",
            age: 19
        }
    })
</script>
</body>
</html>

所以{{}}里面一定要写js表达式