02-第一个vue应用

注意一：不要将vue的挂载点放在html或者body标签上

可以在最外层，写一个div标签，就跟挂载在body上一个样

注意二：将script标签放在代码最后，保证可以加载到挂载点


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <h1>{{msg}}</h1>
        <h5>{{count}}</h5>
        <h5>{{count+1}}</h5>
        <h5>{{count++}}</h5>  <!--不起作用-->
        <h5>{{content}}</h5>
        <h5>{{content.toUpperCase()}}</h5>
        <h5>{{content == "hello vue"}}</h5>
        <h5>{{content.length}}</h5>
    </div>

</body>
</html>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--书写vue代码-->
<script>
    new Vue({
        el: "#app", //el:element  元素  代表vue实例的作用范围
        data: {
            msg: "小戴",
            count: 0,
            content: "hello vue"
        }
    });
</script>

总结：
1、一个页面只能存在一个vue实例，不能创建多个vue实例
2、vue实例中的el属性代表vue实例的作用范围，日后在vue作用范围内可以使用{{data属性中的变量名}}直接获取数据
3、vue实例中data属性用来给当前vue实例绑定自定义数据，日后绑定数据可以在vue实例作用范围内直接使用{{变量名}}获取
4、使用{{}}进行data中数据获取时，可以在{{}}取值语法中进行算术运算、逻辑运算以及调用相关类型的相关方法
5、el中可以使用css的任何一种选择器，但是推荐使用id选择器

posted @ 2021-09-21 14:42  不是孩子了  阅读(39)  评论(0)    收藏  举报