Vue--HelloVue

最新推荐文章于 2023-09-26 20:18:02 发布

苞谷猪不吃苞谷

最新推荐文章于 2023-09-26 20:18:02 发布

阅读量354

点赞数

分类专栏： Vue 文章标签： Vue HelloVue

本文链接：https://blog.youkuaiyun.com/baoguzhu_lyj/article/details/89631959

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

Vue ,是连接View 和 Model层的 ViewModel层实现者,MVVM实现者

创建第一个Vue页面

WebStore(IDEA) 可使用 "html:5" + Tab键快速生成HTML框架

<!-- html:5-->

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

引入Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

创建div( 可用 div#app+Tab快速创建 id为 app的div)

<!--div#app-->
<div id="app"></div>

创建Vue对象,将其el与#app绑定,包含属性 message,将message初始化为"Hello Vue",

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message:"Hello World"
        }
    });
</script>

在#app中通过 {{}} 获取message值(这里的值是双向绑定,其中一个改变,另一个也会变化)

<div id="app">
{{message}}
</div>

完整页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
{{message}}
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message:"Hello World"
        }
    });
</script>
</body>
</html>

效果截图

参考:第一个Vue应用程序

<!--ul+  加Tab键-->
    <ul>
        <li></li>
    </ul>