初识 VUE

最新推荐文章于 2024-10-09 10:13:02 发布

mis4taa

最新推荐文章于 2024-10-09 10:13:02 发布

阅读量136

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_71459231/article/details/126305371

版权

这是Vue的cdn

开发环境和生产环境的区别:

开发版 : 包含了完整的警告和调试模式

生产版: 删除了警告体积很小

创建vue和dom的实例

<body>
    <div id="app">
        {{msg}}
        <h2>今年已经{{n1+n2}}岁了</h2>
        <p>
            我是{{mista.name}},今年{{mista.age}}
        </p>
        <hr>
        
    </div>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                msg:"eva",
                n1 : 111,
                n2: 222,
                mista: {
                name:"cxk",
                age:20,
                gender:1,
                hobbies : "打篮球"
            }
            },
            methods:{

            }
        })
    </script>
</body>

el类似选择器的作用, 来定位dom元素, data:字面意思就是数据,然后以键值对的形式添加到data之中

差值:

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

{{ }}中的内容是以变量的形式存在的 , 如上图msg的数值发生了改变,差值处的值也会发生改变

v-if v-else v-else-if

v-if 控制标签是否显示 ,如果表达式为真,就显示,反之不显示

v-show

v-show 控制标签是否显示

两个都是控制标签是否显示

v-if 是控制元素在页面上是否渲染 ( 是否存在)

v-show 是控制元素是否隐藏 (display:none)

v-on:

为html绑定事件监听缩写为@

 <div id="app">
        <img v-show="show" src="./images/下载.png" alt="">
    <button v-on:click="showImg">显示\隐藏</button>
    <button v-on:click="show = !show">显示\隐藏</button>
    <button v-on:click ='resAdd'>求和</button>
    <button v-on:click ='res=num-num1'>求差</button>
    <button v-on:click='res=num*num1'>求积</button>
    <button v-on:click ='res=num/num1'>求商</button>

   
    {{res}}
    </div>
   
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                show:true,
                num1:123,
                num:233,
                res:0
            },
            // 定义当前的vue方法
            methods:{
                // 定义方法时不要使用箭头函数
                showImg(){
                    this.show = !this.show
                },
                resAdd(){
                    this.res = this.num+this.num1
                }
            }
        })

v-bind

用于处理html标签的动态属性，即动态赋值。