Vue.js初探

Vue.js快速入门

最新推荐文章于 2024-12-10 05:00:00 发布

原创最新推荐文章于 2024-12-10 05:00:00 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

21 篇文章

订阅专栏

1.创建我的第一个vue.js网页
（1）引入vue.js文件
下载开发者地址

 <script src="../lib/vue.js"></script>

输出Hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Helloworld</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
            <p>{{message}}</p>
    </div>
  
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                message:'Hello world'
            }
        })
    </script>
</body>
</html>

(2)使用CDN方式加速：CDN基本思路尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，内容传输速度更快更稳定在开源的CDN主页搜索Vue 可以复制链接地址也可以复制标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Helloworld</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="app">
            <p>{{message}}</p>
    </div>
  
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                message:'Hello world'
            }
        })
    </script>
</body>
</html>

对比：浏览器中显示的效果相同，当动态更新message中的值时，并不需要刷新网页或更新节点，此时节点的值会随着Javascript中的代码值的变动而改变