vue基础

本文详细介绍了Vue.js的基础指令,包括数据渲染的插值表达式、v-text和v-html,条件渲染的v-if和v-show,列表渲染的v-for,属性渲染的v-bind,以及数据双向绑定的v-model。还提到了v-if与v-show的选择原则,以及避免v-if与v-for同时使用的情况。此外,简述了计算属性和过滤器的用途。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue基础

一、vue基础指令

1、数据渲染

1:插值表达式

​ 插值表达式:数据绑定【插值表达式中一般指定变量,也可以指定表达式……】

示例代码如下:

<span>Message: {{ msg }}</span>
<span>Message: {{ 1+1 }}</span>

注意一:

插值闪烁:当数据不是预定义的时候,而是通过网络进行获取,那么当网络延迟加载的时候,页面中会显示插值表达式的语法,等网络加载完毕后,数据进行渲染,这种现象称之为——插值闪烁

测试代码如下:

<div id="app">
    {{username}}
</div>
<script>
   /* 利用定时器模拟一些网络延迟加载导致的插值闪烁现 */
    setInterval(()=>{
        new Vue({
            el:"#app",
            data:{
                username:"橙子的代码世界"
            }
        });
    },5000);
</script>

注意二:

插值表达式不能作用在HTML的attribute(属性)上,应该使用v-bind指令

2:v-text和v-html
2.1、v-text

v-text : 更新元素的文本内容 ,解决插值闪烁的问题

示例代码如下:

<span v-text='msg'></span>
<span>{{msg}}</span>
2.2、v-html

v-html:可以解析渲染标签,解决插值闪烁的问题

示例代码如下:

<div v-html='html'></div>
<script>
new Vue({
    el:'#app',
    data:{
        html:'<h1>v-html指令</h1>'
    }
})
</script>

2、条件渲染

1:v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 在切换时元素及它的数据绑定 / 组件被销毁并重建。 (DOM元素的删除和添加)

v-if相当于JavaScript中的if(){}语句;
v-else-if 相当于JavaScript中的 else if(){}语句; 前一兄弟元素必须有 v-ifv-else-if
v-else 相当于JavaScript中的 else{}语句 ;不需要表达式, 前一兄弟元素必须有 v-ifv-else-if

示例代码如下:

<div id='app'>
    <div v-if="type === 'A'"> A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        type:'A'
    }
})
</script>
2:v-show

v-show 指令用于根据条件展示元素,与v-if不同的是,带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show只是根据表达式之真假值,简单地切换元素的 CSS 的display 属性。

示例代码【简单导航切换】如下:

 <div id='app'>
     <ul>
         <li v-for='(item,index) in navs' @mouseenter='isActive=index' @mouseleave="isActive=-1"><span v-text='item.name'></span>
             <ol>
                 <li v-show='isActive==index' v-text='j_navs'></li>  
             </ol>
         </li>
     </ul>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        isActive:-1,
        navs:[{id:1,name:'美妆',j_navs:['口红','面膜']},{id:2,name:'衣服',j_navs:['男装','女装']},{id:3,name:'家电',j_navs:['电视','电饭煲']}]
    }
})
</script>
3:v-if 和v-show的区别(面试要点)

1、v-if

  • 如果条件成立,那么创建该标签,如果条件不成立,那么销毁该标签【创建销毁】
  • 创建和销毁,是直接操作DOM进行的
  • 运行时,不经常切换或者条件不经常更改,则使用v-if

2、v-show

  • 如果条件成立,那么显示该标签,如果条件不成立,那么隐藏该标签【显示隐藏】
  • 显示和隐藏,是通过css属性设置
  • 运行时,频繁切换,则使用v-show

3、注意:

  • v-if只有当条件成立,才会创建标签,v-show不管条件成立不成立,第一次都会创建该标签

3、列表渲染

1:v-for

v-for 指令基于源数据多次渲染元素或模板块 。v-for 指令的值需要使用 alias in expression 形式的特殊语法,为当前遍历元素提供别名

1、v-for遍历数组

1:v-for=‘item in array’ item 保存的是数组中的数据,array是数据的名称

2:v-for=‘(item,index) in array’ item 保存的是数组中的数据,index是数组的索引,array是数据的名称

示例代码如下:

<div id='app'>
  <ul>
        <li v-for="(item,index) in array">数据:{{item.name}}>>>下标:{{index}}</li>
  </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            array:[{id:1001,name:'衣服',price:'1200'},{id:1002,name:'鞋子',price:'1100'},{id:1003,name:'美妆',price:'800'}]
        }
    });
</script>

2、v-for遍历对象

1:v-for=‘o1 in obj’ o1保存的是对象的属性值,obj是对象的名字

2:v-for=‘(o1,o2) in obj’ o1保存的是对象的属性值,o2保存的是属性名,obj是对象的名字

3:v-for=‘(o1,o2,o3) in obj’ o1保存的是对象的属性值,o2保存的是属性名,o3保存的是下标,obj是对象的名字

示例代码如下:

<div id="app">
    <ul>
        <li v-for="(o1,o2,o3) in obj">o1++++o2+++o3</li>
    </ul>
</div>
   <script>

    new Vue({
        el:"#app",
        data:{
            obj:{
               code:200,
               msg:'查询成功',
               data:[{id:1001,name:'张三',password:'c12345'}]
              }
        }
    });
</script>
2:v-for要点:避免v-if和v-for一起使用(面试会出)

注意:

永远不要把 v-if 和 v-for 同时用在同一个元素上。因为当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,哪怕我们只渲染出一小部分的元素,也得在每次重渲染的时候遍历整个列表,效率低

解决方法一:

为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下,请将 列表的 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。

解决方法二: 为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users”

v-if=“shouldShowUsers”)。这种情形下,请将 v-if 移动至容器元素上 (比如 ul、ol)。

4、属性渲染

1:v-bind

v-bind指令负责渲染数据到属性中【更改属性值】

示例代码如下:

    <input type="text" v-bind:value="message">
    <!--    简写方式-->
    <input type="text" :value="message">

通过v-bind更改属性值为对象

示例代码如下:

<div id="app">

    <h1 :class="{red:className,green:!className}">解封了</h1>

    <button @click="className = false">更改为绿色</button>
    <button @click="className = true">更改为红色</button>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            className:true
        }
    });

</script>

5、数据双向绑定

1:v-modal

​ v-modal指令在表单控件或者组件上创建双向绑定【 指的是:数据渲染到页面【单向】 + 页面更改数据更新【单向】】 : data中的属性和页面中能输入和修改的标签进行绑定 , 通过v-model,这样输入框中的数据【页面发生改变】发生变化,data属性值发生改变

​ v-model可以绑定的页面标签:input、textarea、select和自定义组件【components】(后期会讲)

示例代码如下:

1、文本输入框

<!--单行文本-->
<input v-model="message" placeholder="输入内容">
<p>Message is: {{ message }}</p>
<br>
<!--文本域-->
<span>描述说明:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="简单描述……"></textarea>

2、单选按钮【可以绑定布尔值】

  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>

3、选择框【可以绑定布尔值或者绑定数组】

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>

4、复选框 【可以绑定布尔值或者绑定数组】

<!--绑定布尔值-->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<br>
<!--绑定数组-->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

5、小练习【记事本案例】:

HTML代码:

<div id="app">
    <div class="input">
        <input type="text" v-model="message" @focus="empty">
        <button type="button" class="add" @click="addData">添加</button>
    </div>
    <ul class="show">
        <li v-for="(item,index) in msg">
            <span class="serial_num" v-text="index+1"></span>
            <p class="content" v-text="item.content"></p>
            <div class="operation">
                <button class="remove" v-bind:data-id="item.id" @click="remove(index)">删除</button>
            </div>
        </li>
    </ul>
</div>

JS文件:

    new Vue({
        el:'#app',
        data:{
            msg:[],

            message:''
        },
        methods:{
            //添加
            addData(){
                let id=this.msg.length
                let sentence=this.message
                let data1={
                    id:id,
                    content:sentence
                }
                this.msg.push(data1)
            },
            // 清空
            empty(){
                this.message=''
            },
            //删除
            remove(id){
                this.msg.splice(id,1)
            }

        }
    })

图片:
小案例

二、数据和资源

7、计算属性 computed

​ 插值表达式中可以调用有返回值的函数,但是当你的函数中的内容比较复杂时,我们会进行封装函数,函数种类【业务逻辑、运算、事件绑定】

注意:

​ 1、计算属性本质是一个函数,只是用法和使用属性一样

​ 2、 computed计算属性中的函数一般都是运算,较简单的函数 ,而 methods中的函数一般都是:业务逻辑、事件绑定…

代码示例如下:【计算商品总价】

HTML代码:

<div id="app">
    <div class="input">
        <input type="text" placeholder="商品名称" v-model="prodcutName" @focus="empty">
        <input type="number" placeholder="价格" v-model="productPrice">
        <input type="number" placeholder="数量" v-model="productNum">
        <button type="button" class="add" @click="addData">添加</button>
    </div>
    <div class="show">
        <table border="1">
            <thead>
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>总价</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in products">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td><span>{{item.price}}</span></td>
                <td><span>{{item.num}}</span></td>
                <td><span>{{item.num*item.price}}</span></td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td>总价</td>
                <!--computed简写-->
                <td colspan="4"><span>{{this.products.reduce((s, o) =>s + o.price * o.num, 0)}}</span></td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

reduce()函数 接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值

this.products.reduce((s, o) =>s + o.price * o.num, 0)复杂写法:

computed:{
   handleAllCount(){
       /* reduce 接收一个函数作为参数,其中函数中的参数:s,必需。初始值, 或者计算结束后的返回值;参数:c,必需。当前元素。在本函数中保存的是数组products中的对象数据;并且reduce的第二个参数是传递给函数的初始值,相当于s的初始值。*/
       return this.products.reduce((s,o)=>{
           return s + o.price * o.num, 0
       }0)
   }
}

js代码

  new Vue({
        el: '#app',
        data: {
            prodcutName: '',
            productPrice: 1,
            productNum: 1,
            products: [],
        },
        methods: {
            addData() {
                let pro = {
                    id: this.products.length,
                    name: this.prodcutName,
                    price: this.productPrice,
                    num: this.productNum,
                }
                this.products.push(pro)
            },
            empty() {
                this.prodcutName = ''
            },
        }
    })

图片:
无

8、过滤器 filters

过滤器和计算属性类似,计算属性用于运算,过滤器用于转换

示例代码如下:

<div id="app">

    <h1>{{message | handleToLowerCase('数据') | handleOther}}</h1>

</div>
<script>

    new Vue({
        el:"#app",
        data:{
            message:"HELLO"
        },
        filters:{
            handleToLowerCase(value,data){
               <!--value值是要转换的数据;data是传的参数值-->
                console.log(value,data)
                return value.toLowerCase();
            },
            handleOther(value){
                 <!--value值是前面handleToLowerCase()函数转换过的值-->
                return value.replace(value[0], value[0].toUpperCase())
            }
        }
    });

</script>

1:toLowerCase()字母转换成小写

2:toUpperCase()字母转换成大写

3:value.replace(value[0], value[0].toUpperCase()) 首字母大写(value是要转换的字符串)

4:value. replace(str[0],str[0].toLowerCase()); 首字母小写

图片:
无


总结

本文篇幅过长,主要总结了vue的基础指令和vue实例中的计算属性,过滤器等的知识点。重要点还是在于理解,并且灵活运用。下期会总结vue基础进阶版本。本文如果有不足的地方,请多多指教

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值