vue入门以及常见指令

落霞的思绪

已于 2024-08-31 17:25:23 修改

阅读量267

点赞数 2

文章标签： vue.js javascript 前端

于 2024-08-27 18:08:22 首次发布

本文链接：https://blog.csdn.net/2301_80412275/article/details/141559554

版权

一、CDN引入vue

<body>
    <div id="app">
        {{msg}}
    </div>
    <!-- 引入开发版本的包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const x = new Vue({
            el: '#app',
            data: {
                msg: 'hello vue'
            }
        })
    </script>
</body>

二、插值表达式

三、响应式介绍

响应式：数据改变，视图自动更新；

使用Vue开发→专注于业务核心逻辑即可。

访问或修改数据：（在控制台里也可以）

①访问数据："实例.属性名"
②修改数据：

"实例.属性名"="值”

四、Vue指令

v-html：更新元素的 `innerHTML`

示例：

<div v-html="html"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const x = new Vue({
        el: '#app',
        data: {
            msg: `<h1>this is vue</h1>`,
        }
    })
</script>

v-if和v-show

v-if

1.作用：控制元素显示隐藏

2.语法：V-show="表达式

表达式值true显示，false隐藏

v-if

1.作用：控制元素显示隐藏（条件渣染）

2.语法：v-if="表达式"

表达式值true显示，false隐藏v

两者区别：

v-show底层原理：切换css的display：none来控制显示隐藏

v-if底层原理：根据判断条件控制元素的创建和移除(条件渣染）,直接移除

v-else和v-else-if

        <div class="ifelse">
            <div v-if="score>=80">优秀</div>
            <div v-else-if="score>=60">良</div>
            <div v-else>不及格</div>
        </div>

v-on：注册事件

        <button @click="score--">-</button>
        {{score}}
        <button @click="score++">+</button>

v-bind：动态绑定一个或多个属性或事件

动态属性绑定：
使用 v-bind 可以将 Vue 实例中的数据绑定到 HTML 属性上，这样当数据改变时，属性的值也会自动更新。
```
<img v-bind:src="imageUrl[index]"> 
```
这里 imageUrl 是 Vue 实例中的一个数据属性，当它的值变化时，src 属性会自动更新。
简写形式：
v-bind 可以用冒号 : 进行简写，效果是一样的。
```
<img :src="imageUrl[index]">
```

v-for循环

<div v-for="(item, index) in list">{{item}}->{{index}}</div>

 data: {
          list:['香蕉', '苹果', '菠萝', '梨']
            }

v-model:双向绑定

v-model适用于任何表单元素

   <div><input v-model="gender" type="radio" name="gender" value="1">男</div>
   <div><input v-model="gender" type="radio" name="gender" value="2">女</div>


     <div>
            <div id="app">
                <select v-model="selectedOption">
                    <option v-for="option in options" :key="option.id" :value="option.value">
                        {{ option.text }}
                    </option>
                </select>
                <p>你选择了: {{ selectedOption }}</p>
            </div>
        </div>
    </div>

data: {
       gender: '2',
       selectedOption: '', // 设置默认状态就在value里面选
       options: [
              { id: 1, value: 'option1', text: '选项 1' },
              { id: 2, value: 'option2', text: '选项 2' },
              { id: 3, value: 'option3', text: '选项 3' }
                ] // 对照前面的，只能在value里面选
            }

指令修饰符

 <div class="Table" style="background-color: darkkhaki;">
        <div><input @keyup.enter="add()" v-model="gethings" type="text"> <button @click="add()">添加</button></div>
        <div v-for="(item, index) in plans">{{index + 1}} {{item.thing}} <button @click="delthing(index)">删除</button> <br> <br></div>
    </div>

计算属性computed

computed和methods

计算属性完整写法

计算属性基于已有的数据计算出新的值，由于是属性，所有使用{{fullname}}调用；

计算属性里面有get和set方法。

get方法：

定义：get方法 是计算属性的默认行为，用于返回计算后的值。
用法: 当你访问计算属性时，get会被调用。它可以依赖于 Vue 实例中的其他数据属性，并在这些数据属性变化时自动更新。

set方法：

定义: set允许你在计算属性被赋值时执行一些操作。它通常用于更新其他数据属性。
用法: 当你给计算属性赋值时，值value会传到set里调用。你可以在 set中定义如何处理这个新值。

watch监视

<div id="text">
        <textarea v-model="obj.rata" name="scaner" id="tell"></textarea>
    </div>

       watch:{ 
                'obj.rata' (newvalue, oldvalue){ // 方法名不能出现. 所以用引号
                    console.log("变化了",newvalue);
                   }
            }

五、案例

全选按钮

 <div v-for="(item, index) in plans">
            <input type="checkbox" v-model="item.ischecked">
            {{index + 1}} {{item.thing}} 
            <button @click="plus(item)">+</button>
            {{ item.number }}
            <button :disabled="item.number <= 1" @click="reduce(item)">-</button>
            <button @click="delthing(index)">删除
            </button>
            <br> <br>
        </div>
 <p><input type="checkbox" v-model="isallcheck">全选</p>
        <p>总共为{{ totalcount }}</p>

const y = new Vue({
            el: '.Table',
            data: {
                plans: [ // // 要加上ischecked属性
                    { id: 1, thing: '玩手机', number: 3 ,ischecked:false}, 
                    { id: 2, thing: "扫地", number: 5 ,ischecked:false},
                    { id: 3, thing: "洗碗", number: 6 ,ischecked:false}
                ]            
            },
            methods: {
                plus(item){
                    item.number++
                },
                reduce(item){
                    item.number--
                },
                delthing(index) {
                    this.plans.splice(index, 1)
                },
                add() {
                    if (this.gethings.trim() === '') {
                        alert('请输入')
                        return
                    } else {
                        this.plans.push({ id: +new Date(), thing: this.gethings, number:1 })
                        this.gethings = ''
                    }
                }
            },

            computed: {
                totalcount() {
                    let total = this.plans.reduce((sum = 0, item) => sum + item.number, 0)
                    return total
                },
                isallcheck:{
                    get(){
                        return this.plans.every(item => item.ischecked)
                    },
                    set(value){
                        this.plans.forEach(element => {
                            element.ischecked = value
                        });
                        
                    }
                }
            }
        })