VUE基础用法和vue指令

鲨特阿噗

已于 2022-07-15 23:46:51 修改

阅读量242

点赞数

文章标签： vue.js javascript 前端

于 2022-07-15 23:44:58 首次发布

本文链接：https://blog.csdn.net/m0_71734168/article/details/125813615

版权

本文介绍了Vue.js的基础用法，包括如何引入、创建Vue容器、定义数据和方法。重点讲解了Vue的常用指令，如v-text、v-html、v-model、v-on、v-bind、v-if、v-show、v-for和v-once，并通过实例展示了它们的使用。了解这些指令对于掌握Vue.js开发至关重要。

摘要由CSDN通过智能技术生成

第八个v-for指令在页面中会这样显示

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

一、先说说它的基础用法吧

第一步首先要引入vue的在线地址

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

第二步创建一个vue容器标签(vue的根标签) 只有在容器内部才能使用vue语法

<!--    -->
<div id="myApp">
     <!-- 根标签内部是vue模板 语法类似后端的art模板
    {{}}双大括号中间可以写我们data中的数据变量名 可以识别变量 -->
    <h1>{{name}}</h1>
    <!--  此时h1内部显示的就是我们data中name变量的内容 张三 -->
    <div>
        <!--  该div内部显示的是data中对象obj的age值 20  -->
        {{obj.age}}
        <!-- 此处给button按钮绑定一个点击事件,@代表v-on指令,类似我们js中onclick事件 
                后边的add事件加不加()都可 我们点击按钮该obj.age值会每次加1-->
        <button @click="add">+</button>
    </div>
</div>

第三步创建vue对象

new Vue({
        el: "#myApp",//绑定vue语法渲染的跟标签,值是样式选择器
        data: {
        //data是vue模板中渲染的动态数据,动态数据都可以写在data中,实例如下
        age:1,
        name:"张三",
        obj:{age:20}
     },
        methods: {
        //methods中定义vue中的函数，需要写在methods中
        //以下三种写法都可
            //add: function () { },
            //add: () => { },
            add() {
                //函数中的this默认指向当前创建的vue对象
                //通过this.$data 获取的是vue对象中的data字段
                //调用data中的数据的时候可以省略$data 直接用this调用
                //我们可以设置一个button点击事件来触发
                this.obj.age++
            }
        },
    }),
        computed:{ 
        //computed是vue的计算属性 后边会说到
    }

以上就是vue的基础用法

二、接下来说说它的一些常用指令一定要记牢会经常用到

vue指令: 指在中定义的标签属性一般以v-开头,用来实现特定功能

<!-- 1.v-text 基本数据绑定指令,类似{{}}渲染,但优先级更高,如果变量
内部是字符串标签,则不能识别,此处name会被渲染到div中-->
<div v-text="name">{{age}}</div> <!--此处在html中显示张三-->
<!-- 2.v-html 标签字符串渲染指令 可以识别变量中的字符串标签 -->
<div v-html=""></div> -->
<!-- 3.v-model 双向数据绑定,可以显示也可以修改 多用于表单数据-->
<input type="text" v-model="">
<!-- 4.v-on 事件绑定 给标签绑定事件 函数名后面的()加不加都行 
 如果不加()默认传递的参数event 加()参数默认是undefined-->
 <p onmouseenter="changeColor()" v-on:mouseleave="backColor">悬停变色</p>
<!-- v-on 指令可以简化为@  如: v-on:click ==== @click -->
<!-- 5.v-bind 属性绑定 给标签绑定动态的属性 -->
<img v-bind:src="url" alt="">
<!-- v-bind指令可以简化为:  如  v-bind:src  === :src -->
<img :src="url" alt="">
<!-- 注意:如果src不加v-bind或者: 这个属性就是固定的值 不能解析变量 
如果加了v-bind 或者: 就可以解析变量  会去data里面找对应的值  -->
<!-- 6.v-if 指令  通过条件判断创建或者销毁标签 条件成立就会创建两个span标签-->
<span v-if="age>=18">已经成年</span>
<span v-else="age<18">未成年</span>
<!-- 7.v-show 指令: 通过条件判断显示或隐藏标签 通过设置 display: none; 
隐藏标签 -->
<span v-show="age>=18">已经成年</span>
<span v-show="age<18">未成年</span>
<!-- 8.v-for指令 循环渲染数据 -->
<ul>
    <!-- item 就是循环的数据中的每一项 -->
    <li v-for="item in arr1">{{item}}</li>
    <!-- 如果需要索引 在item后面用,拼接索引变量i   item 和i都是自定义的-->
    <li v-for="item,i in arr1">{{i}}------{{item}}</li>
    <!-- 如果数组中是对象 渲染的时候用对象调用内部的数据即可 -->
    <li v-for="item in arr2">{{item.name}}</li>
    <!-- 简单的循环数字 -->
    <li v-for="item in 8">{{item}}</li>
</ul>
<!-- 9. v-once 控制动态数据只初始化渲染一次 后期data中的数据变化的时候 
不再更新渲染-->
<h1 v-once>{{age}}</h1>

第八个v-for指令在页面中会这样显示

    <script>
        new Vue({
            el: '#myApp',
            data: {
                name: "张三",
                age: 30,
                url:"https://img0.baidu.com/it/u=165495575,3097619774&fm=253&
    fmt=auto&app=120&f=JPEG?w=500&h=625",
                arr1:["张三","李四","王五","赵六"],
                arr2:[{name:"张三"},{name:"李四"},{name:"王五"}]
            },
            methods: {
                backColor(event){
                    event.target.style.color = "black"
                },
            },
        })
    </script>

基础先说到这里有空再更！！！