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属性中必须有对应的属性，不然会报错

　　示例

效果

巴特西

Vue05 初识

1 下载vue.js

2 打开VSCode

3 新建一个html文件

3.1 引入vue.js

3.2 写一个容器和一个实例

3.3 关于{{}}说明

4 小结

最新文章

热门文章