首页 > 其他分享> 文章详细

Vue05 初识

2022-06-18 22:03:05 阅读：107 来源： 互联网

标签：Vue05 容器 vue false Vue 初识 js 实例

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,容器,vue,false,Vue,初识,js,实例
来源： https://www.cnblogs.com/jthr/p/16389336.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9