Vue05 初识

2022/6/18 23:20:31

编程Tag： js vue 实例容器 false 初识 Vue05

本文主要是介绍Vue05 初识，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1 下载vue.js

　　进入官网　　

下载两个版本的vue.js

开发版本和生成版本的区别

　　开发版本体量更大，包含完整的警告和调试模式

　　生成版本体量更小，删除了警告

2 打开VSCode

　　新建一个空文件夹vuebase，用vscode打开

　　在下面新建两个文件夹，一个用来放代码文件，一个放vue.js文件，如下图

3 新建一个html文件

　　文件名：初识vue.html

3.1 引入vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>

    <!-- 引入开发板vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>


<body>

    <script type="text/javascript" >
         Vue.config.productiontip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    </script>

</script>

</body>
</html>

两个script标签

1）引入vue.js

<script type="text/javascript" src="../js/vue.js"></script>

2) 阻止 vue 在启动时生成生产提示(不重要)

<script type="text/javascript" >
         Vue.config.productiontip = false //设置为 false 以阻止 vue 在启动时生成生产提示
</script>

如果我们把这个去掉，右键open with live sever从浏览器打开文件

f12进入控制台，发现它有个提示，如下图

意思是说，你用的是开发版本的vue.js，在生产环境中最好要用生产版本的vue.min.js

其实这个提示无所谓，不影响什么，如果看着不爽，那么设置Vue.config.productiontip = false就可去掉这个提示

加上这个设置后，再看控制台，发现这个提示没有了

3.2 写一个容器和一个实例

<body>

    <script type="text/javascript" >
         Vue.config.productiontip = false //设置为 false 以阻止 vue 在启动时生成生产提示
    </script>


<div id="root">
    <h1>hello {{name}}</h1>
</div>


<script type="text/javascript" >

    //创建vue实例
    new Vue({
        el:'#root',  //用于指定当前vue实例为那个容器服务，值通常为css选择器字符串
        data:{
            name:"china"
        }
    })


</script>

</body>

上面代码中<div id="root"></div>就是一个容器，new Vue({})就是创建了一个vue实例，容器和实例一一对应

看效果

3.2.1 容器

1）id

　　id唯一

<div id="root">
    <h1>hello {{name}}</h1>
</div>

2){{}}数据绑定

　　和vue实例中的data属性对应

3.2.2 实例

　1）el属性，用来对应容器，'#xxx'，表示通过id值来对应,'.xx表示'通过class值来对应

　　通过id

　　通过class

　　2）data属性，用来绑定容器中的{{}}

3.3 关于{{}}说明

　　里面能填入js表达式
　　如果这里填的是变量，那么vue实例data属性中必须有对应的属性填充

　　示例

效果

4 小结

这篇关于Vue05 初识的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！