初步学习VUE

最新推荐文章于 2023-09-02 22:42:10 发布

佩奇小弟

最新推荐文章于 2023-09-02 22:42:10 发布

阅读量79

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45728545/article/details/112915769

版权

el挂载点
#app 选择id为app的标签
.app 选择class为app的标签
div 选择div标签

双标签都是支持选择器，单标签不支持
但是不要把id挂载到body html标签上
1、
VUE会管理el选项命中的元素及其内部的后代元素
2、
可以使用其他选择器，但是建议使用ID选择器
3、
可以使用其他的双标签，但是不要使用html和body

data数据类型

<body>
   
    <div id="app">
        {{message}}
        <h2>{{school.daxue}}{{school.gaozhong}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               message:"你好 小黑",
               school:{daxue:"唐山师范学院",
                       gaozhong:"冀州中学"

               },
               campus:["1","2"]
            }
        })
    </script>
   
</body>

自己测试一下就可以了解。

v-text标签
作用是设置标签内容

<h2 v-text="message"></h2>

v-html标签

<body>
   
    <div id="app">
        <h2 v-text="message"></h2>
        <h2 v-html="message"></h2>
        

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               message:"<a href='http://112.126.62.35'>茶茶</a>",
              
            }
        })
    </script>
   
</body>

自己试一下就明白

v-on指令
@后面的是指令的名字比如 click就是点击事件
click=“xx” xx是你要用的方法名字这个方法的名字自己定义和后面script标签里面的方法要一致

1、
v-on指令的作用，为元素绑定事件
2、
绑定的方法定义在methods属性中
3、
方法内部通过this关键字可以访问定义在data中数据

<body>
   
    <div id="app">
        <h2 v-text="message"></h2>
        <h2 v-html="message"></h2>
        <input type="button" value="v-on指令" v-on:click="doit">
        <input type="button" value="v-on简写" @click="doit">
        <h2 @click="jia">{{food}}</h2>
        

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               message:"<a href='http://112.126.62.35'>茶茶</a>",
               food:"柿子鸡蛋",
              
            },
            methods: {
                doit:function(){
                alert("vue")
                },
               jia:function(){
                   this.food+="再来一盘！"
               }
            }
        })
    </script>
   
</body>

v-show
v-shou标签中的布尔值来作用于显示或不显示此标签
v-if
v-if标签中的布尔值来作用于显示或不显示此标签

佩奇小弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初步学习VUE

el挂载点#app 选择id为app的标签.app 选择class为app的标签div 选择div标签双标签都是支持选择器，单标签不支持但是不要把id挂载到body html标签上1、VUE会管理el选项命中的元素及其内部的后代元素2、可以使用其他选择器，但是建议使用ID选择器3、可以使用其他的双标签，但是不要使用html和bodydata数据类型<body> <div id="app"> {{message}}
复制链接

扫一扫