vue02

最新推荐文章于 2024-08-23 13:29:29 发布
最新推荐文章于 2024-08-23 13:29:29 发布
阅读量98 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyurainzi/article/details/111240751
版权

文章目录

昨日回顾

0 angular，react，vue（2014年）
1 vue,js框架，渐进式
2 m v vm架构  （mvc，mtv，mvp），数据双向绑定（有些小坑），组件化开发，单页面开发
3 使用：cdn引入，下载下来导入，工程化（vue-cli创建vue工程），脚手架
4 插值 {{ 变量，js语法，三目}}
5 指令  v-xx 指令 ，放在标签上的自定义属性
	v-html
    v-text
    v-on:@click 缩写  @click
    v-bind:属性名='属性值'  缩写 :属性名='属性值js变量'
    v-if：  dom的删除和插入
    v-show：样式的显示与不显示
    
6 样式控制
	-:class='js变量字符串'    'js变量数组'
    - :style='js变量对象'       'js变量数组'

style和class的控制

class 三种控制方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <title>Title</title>
    <style>
        .red {
            background: red;
        }

        .green {
            background: green;
        }
        .font {
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="box">
    <h1>class的三种写法</h1>
    <div :class="isActive?'red':'green'">class三目写法</div>
    <p :class="classObj">class对象写法 </p>
    <p :class="classarr">class数组写法 </p>
</div>
</body>
<script>
    var vm=new Vue(
        {
            el:'#box',
            data:{
                isActive: true,
                classObj: {red: true,green: false,font:true},
                classarr:['red','green']
            },
            methods:{
               }
        }
    )
</script>
</html>

style的三种控制方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <title>Title</title>
    <style>
        .red {
            background: red;
        }
        .green {
            background: green;
        }
        .font {
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="box">
    <h1>style的三种写法</h1>
    <div style="background-color:red">style三目写法</div>
    <div :style="'background-color:red'">style三目写法</div>
    <div :style="'background:'+'red'">style三目写法</div>
    <div :style="'background:'+(isActive?'red':'green')">style三目写法</div>
    <p :style="styleobj">style对象写法 </p>
    <p :style="styleattr">style数组写法 </p>
</div>
</body>
<script>
    var vm=new Vue(
        {
            el:'#box',
            data:{
                styleobj:{background:'yellow',fontSize:'60px'},
                styleattr:[{background:'red'},]
            },
        }
    )
</script>
</html>

今日内容

1 条件渲染

1.1 通过v-if和v-for实现购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <style>
        .red {
            background: red;
        }

        .green {
            background: green;
        }

        .font {
            font-size: 30px;
        }

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">

    <!--    土办法-->
    <!--    <ul>-->
    <!--        <li>{{shopping[0]}}</li>-->
    <!--        <li>{{shopping[1]}}</li>-->
    <!--        <li>{{shopping[2]}}</li>-->
    <!--    </ul>-->

    <!--v-for实现-->
    <ul v-if="shopping.length>0">
        <li v-for="data in shopping">{{data}}</li>
    </ul>
    <div v-else>购物车空空如也</div>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            shopping: ['苹果', '香蕉', '桃子'],
        },

    })
</script>
</html>

1.2 v-if/v-else-if/v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <style>

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">
    <div v-if="which==1">1111</div>
    <div v-else-if="which==2">2222</div>
    <div v-else>3333</div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            which:1
        },

    })
</script>
</html>

2 列表渲染

2.1 for循环数组，对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <style>

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">
    <h1>循环数组</h1>
    <div>
        <p v-for="data in arr">{{data}}</p>
    </div>
    <h1>循环对象</h1>
    <div>
        <p v-for="data in obj">{{data}}</p>
    </div>

    <h1>循环数组索引和value</h1>
    <div>
        <p v-for="(data,index) in arr">索引是：{{index}}，数据是{{data}}</p>
    </div>
    <h1>循环对象key和value</h1>
    <div>
        <p v-for="(value,key) in obj">key是：{{key}}，value是：{{value}}</p>
    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            arr: ['zs', 'ls', 'ww'],
            obj: {name: 'lqz', age: 18, sex: '男'},
        },

    })
</script>
</html>

2.2 key值的解释

1 v-for循环数组，对象时，建议在控件（组件，标签）写一个key属性，属性值唯一
2 页面更新以后，加速dom的替换（渲染）,虚拟dom的替换diff算法
3 :key="变量"

2.2 数组更新与检测

0 数据双向绑定，数据变化，页面变，页面变化数据变
1 使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse
2 不会检测变动filter(),concat(),slice(),map()，新数组替换旧数组
	-页面不会更改：vm.arr.concat(['44','55'])
	-解决vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改：通过索引值更新数组
	-解决方案一：
    vm.arr[0]
    "11"
    vm.arr[0]='99'
    "99"
    vm.arr.splice(0,1,'88')
    ["99"]
	-解决方案二
		Vue.set(vm.arr,0,'lqz')

3 上面能更新是因为作者重写了那些方法

3 事件处理

3.1 input过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <!--
    blur:失去焦点触发
    change：失去焦点触发，跟blur一样
    input:数据发生变化，就会触发
    -->

<!--    <input type="text" v-model="myinput" @blur="handleChange">   {{myinput}}-->
<!--    <input type="text" v-model="myinput" @change="handleChange">   {{myinput}}-->
    <input type="text" v-model="myinput" @input="handleChange">   {{myinput}}
    <br>
    <div>
        <p v-for="data in new_arr">{{data}}</p>
    </div>




</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput:'',
            arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
            new_arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
        },
        methods:{
            handleChange(){
                console.log(this.myinput)
                //控制arr的变化，数据又双向绑定了，页面就会变化
                this.new_arr=this.arr.filter(item=>{
                    return item.indexOf(this.myinput) >-1
                })

            }
        }

    })
    //
    // var a=['aabbc', 'abc', 'aabcd','ccdd','bbcc']
    // var res=a.filter(function (itme) {
    //     // if (itme.length >4){
    //     //     return true
    //     // }else {
    //     //     return false
    //     // }
    //     // if (itme.indexOf('aa')>-1){
    //     //     return true
    //     // }else {
    //     //     return false
    //     // }
    //     return itme.indexOf('a')>-1
    //
    // })
    //
    //
    // var res=a.filter(item=>{
    //     return itme.indexOf('a')>-1
    // })
    // console.log(res)
    //
    //
    // var a=function (a) {
    // }
    //
    // var a=a=>{}



</script>
</html>

3.2 简单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <button @click="isShow=!isShow">点我折叠，展开</button>
    <button @click="handleClick">点我折叠，展开2</button>
<!--    <button @click="handleClick($event)">点我折叠，展开2,传递event事件</button>-->
    <button @click="handleClick">点我折叠，展开2,传递event事件</button>
    <div v-show="isShow">
        我很好看
        <br>
        你也很好看呢
        <br>
        大家都好看

    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            isShow:true

        },
        methods:{
            handleClick(ev){
                console.log(ev)
                this.isShow=!this.isShow
            }
        }



    })
    //
    // var a=['aabbc', 'abc', 'aabcd','ccdd','bbcc']
    // var res=a.filter(function (itme) {
    //     // if (itme.length >4){
    //     //     return true
    //     // }else {
    //     //     return false
    //     // }
    //     // if (itme.indexOf('aa')>-1){
    //     //     return true
    //     // }else {
    //     //     return false
    //     // }
    //     return itme.indexOf('a')>-1
    //
    // })
    //
    //
    // var res=a.filter(item=>{
    //     return itme.indexOf('a')>-1
    // })
    // console.log(res)
    //
    //
    // var a=function (a) {
    // }
    //
    // var a=a=>{}



</script>
</html>

3.3 事件修饰符

.stop 阻止事件冒泡
.self 只处理自己的事件，子控件冒泡的事件不处理

.prevent 阻止a链接跳转
.once 只处理一次就解绑(抽奖页面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <ul @click.self="handleUl">
        <!--        <li v-for="data in datalist" @click="handleLi($event)">{{data}}</li>-->
        <!--        <li v-for="data in datalist" @click.stop="handleLi">{{data}}</li>-->
<!--        <li v-for="data in datalist" @click="handleLi">{{data}}</li>-->
        <li v-for="data in datalist" @click.once="handleLi">{{data}}</li>
    </ul>

    <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: ['111', '222', '333']

        },
        methods: {
            // handleLi(ev) {
            //     console.log('li被点击了')
            //     ev.stopPropagation()  //点击事件停止向父组件传递
            // },
            handleLi() {
                console.log('li被点击了')
            },
            handleUl() {
                console.log('Ul被点击了')
            },
            // handleA(ev){
            //     console.log('a被点击了')
            //     ev.preventDefault() //阻止a标签的跳转
            // }
            handleA() {
                console.log('a被点击了')
            }
        }
    })
</script>
</html>

3.4 按键修饰符

1 敲击回车键干一个事

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">

<!--    <input type="text" v-model="myinput" @keyup.enter="handleKey">-->
    <input type="text" v-model="myinput" @keyup.13="handleKey">
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput: ''

        },
        methods: {
            // handleKey(ev){
            //     console.log('xxx')
            //     console.log(ev)
            //     if(ev.keyCode==13){
            //         console.log('回车被按下了')
            //     }
            //
            // }
            handleKey() {
                console.log('回车被敲二零')

            }
        }


    })


</script>
</html>

4 数据双向绑定

4.1 v-model使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <input type="text" v-model="myinput">
    <br>
    {{myinput}}
    <br>
    <textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>
    <br>
    {{text}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput: '',
            text: '',
        },


    })


</script>
</html>

5 表单控制

5.1 checkbox选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">

    <h1>表单相关之checkbox</h1>
    <input type="checkbox" v-model="check">记住密码
    <br>
    {{check}}



</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            check: true,
 

        },


    })


</script>
</html>

5.2 多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">


    <h1>表单相关之checkbox多选</h1>
    <h3>你喜欢的女明星</h3>
    <input type="checkbox" v-model="checkgroup" value="lyf">刘亦菲
    <input type="checkbox" v-model="checkgroup" value="baby">baby
    <input type="checkbox" v-model="checkgroup" value="egon">egon
    <br>
    {{checkgroup}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
    
            checkgroup:[],

        },


    })


</script>
</html>

5.3 单选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
  
    <h1>表单相关之radio</h1>
    <input type="radio" v-model="ra" value="男">男
    <input type="radio" v-model="ra" value="女">女
    <input type="radio" v-model="ra" value="未知">未知
    <br>
    {{ra}}

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            ra:'',

        },


    })


</script>
</html>

5.4 购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">


    <ul>
        <!--<li v-for="item in datalist">商品名字：{{item.name}},商品数量：{{item.number}}</li>-->
        <li v-for="item in datalist">
            <input type="checkbox" :value="item" v-model="checkgroup">
            {{item}}
        </li>
    </ul>
    <br>
    当前价格是：{{getPrice()}}
    <br>
    {{checkgroup}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [
                {name: '特斯拉', price: 10, number: 1, id: '1'},
                {name: '苹果', price: 3, number: 4, id: '2'},
                {name: '香蕉', price: 80, number: 6, id: '3'}
            ],
            checkgroup: [],

        },
        methods:{
            getPrice(){
                var sum_price=0
                for(i in this.checkgroup){
                    sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
                }
                return sum_price

            }
        }

    })


</script>
</html>

5.5 购物车之全选，全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">

    <input type="checkbox" v-model="isAll" @change="handleCheck"> 全选/全不选
    <ul>
        <!--<li v-for="item in datalist">商品名字：{{item.name}},商品数量：{{item.number}}</li>-->
        <li v-for="item in datalist">
            <input type="checkbox" :value="item" v-model="checkgroup" @change="handleOne">
            {{item}}
        </li>
    </ul>
    <br>
    当前价格是：{{getPrice()}}
    <br>
    {{checkgroup}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [
                {name: '特斯拉', price: 10, number: 1, id: '1'},
                {name: '苹果', price: 3, number: 4, id: '2'},
                {name: '香蕉', price: 80, number: 6, id: '3'}
            ],
            checkgroup: [],
            isAll:false,

        },
        methods:{
            getPrice(){
                var sum_price=0
                for(i in this.checkgroup){
                    sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
                }
                return sum_price

            },
            handleCheck(){
                // console.log('xxx')
                if(this.checkgroup.length>0){
                    this.checkgroup=[]
                }else {
                    this.checkgroup=this.datalist
                }

            },
            handleOne(){
                console.log('选中',this.checkgroup.length)
                console.log('总数据',this.datalist.length)

                if(this.checkgroup.length==this.datalist.length){
                    this.isAll=true
                }else {
                    this.isAll=false
                }
            }
        }

    })


</script>
</html>
xiaoyurainzi
关注
专栏目录
Vue入门及简单使用_样式控制-style_class_条件渲染_列表渲染_事件处理_数据双向绑定_表单控制
qq_31455841的博客
12-15 433
Vue 入门 1. 样式控制 1. style和class的控制 1. class的三种控制方式 # 样式 <body> <div id="box"> <h1>class的三种写法</h1> <div :class="isActive?'red':'green'">class三目写法</div> <p :class="classObj">class对象写法</p> <p :class="class
Vue02的源码学习资料
05-22
Vue02指的是Vue的第二版本，这个版本在社区中广泛使用，并且有大量的学习资源。在这个"Vue02的源码学习资料"压缩包中，我们可以期待找到一些关于深入理解Vue.js 2.x核心原理和源码解析的相关材料。下面我们将详细...
vue样式控制的方式
weixin_30679823的博客
12-05 1215
创建vue对象： 1、样式控制第一种方式： 　 直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定。 2、样式控制第二种方式： 在数组中使用三元表达式 3、样式控制第三种方式： 在数组中使用 对象来代替三元表达式，提高代码的可读性 4、样式控制的第四种方式： 在为 class 使用 v-bind...
vue 动态控制class
青春不打烊的博客
04-10 2208
<el-input :class="{'myClassbHouseNameA':cellNameList.houseState=='01','myClassbHouseNameC':cellNameList.houseState=='02','myClassbHouseNameR':cellNameList.houseState=='03','myClassbHouseNameT':c...
vue中v-bind控制class和style
m0_72168336的博客
06-13 1064
当使用v-bind指令控制class和style时，可以通过动态绑定的方式根据不同的条件来添加或移除class，以及改变元素的样式。通过可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。：使用对象语法，可以根据条件来动态添加或移除class。在上面的例子中，如果isActive为true，则会给该元素添加一个名为"active"的class。：使用数组语法，可以根据条件来添加或移除多个class。
vue中动态控制class
qq_41445106的博客
05-12 1976
1.直接绑定对象（一） <div id="app"> <p class="static" :class="{red: isRed, blue:isBlue}">昨天再好也回不去，明天再难也要抬脚继续～</p> </div> <script> var watchExampleVM = new Vue({ el: '#app', data: { isRed: true,
vue02：vue02
02-14
vue02 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
Vue02.pdf
09-06
Vue.js 是一个由尤雨溪创建的前端JavaScript框架，它以其自动化思想和简化DOM操作而闻名。Vue.js 的目标是让开发者无需过多关注底层DOM操作，从而更专注于业务逻辑。目前，Vue.js有三个主要版本：Vue1（已淘汰）、...
vue 02 表单
01-12
### Vue.js 中表单元素的使用详解 在前端开发中，表单是非常重要的组成部分之一，它主要用于收集用户输入的信息。Vue.js 提供了一系列强大的工具来处理表单元素，特别是通过 `v-model` 指令实现的数据双向绑定，极...
Vue02. Vue.js 组件开发.pdf_前端学习资料
09-01
Vue.js 是一款流行的前端JavaScript框架，以其轻量级、高效和易上手的特性受到开发者喜爱。在Vue中，组件是核心概念，它们允许开发者将UI分解为可重用的模块，极大地提高了代码的可维护性和复用性。下面将详细介绍...
vue实现条件判断动态绑定样式的方法
10-17
今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue中怎么动态控制样式
大左的博客
09-21 416
三元判断法 通过isGZ变量控制动态样式
Vue3的三种样式控制及实现原理
最新发布
沐爸的博客
08-23 1142
Vue3中一共有三种样式控制，分别是全局样式控制、局部作用域样式控制和深度样式控制，今天我们一起看下这三种样式控制的使用，以及实现的原理是什么。
09、用数据变量等控制 vue 项目标签中 CSS 样式的五种方法
狮子座的男孩
03-15 2493
通过 Vue3 的数据变量来控制 h1 标签样式; 通过 vue3 的 computed 来控制 h1 标签样式; 通过 vue3 的 computed 传值来控制 h1 标签样式; 通过 vue3 的 computed 及数据变量来控制 h1 标签样式; 通过 item 是否存在某个值来确定标签的类名;
动态控制class(样式)
hbvh1的博客
11-05 218
<div class="progress assigntasks" :class="[ this.percentage > 50 ? 'isActive' : '' ]"> </div> .isActive{ box-shadow: 1px 2px 3px #000000; }
Vue v-for 时，单个元素class的控制
liuhongyi0104的博客
08-22 6154
Vue v-for 时，单个元素class的控制只要一句表达式，加一个控制控制变量<template> <ul> <li v-for="(item,index) in arr" :class="{red:index==indexPrev}" v-on:click="changeColor(index)">{{item}}</li></ul> </template> <sc
Vuejs005---使用 class 样式
rngigskt的博客
08-24 414
使用 class 样式 使用 vuejs 控制样式，会使样式变化的操作更加的灵活 （1）class 样式的使用 案例 1：传递一个 class 样式的数组，通过 v-bind 做样式的绑定 该形式与之前的形式没有太大的区别 :class="[样式 1,样式 2]" 案例 2：通过三目（元）运算符操作以上数组 boolean?true 执行 :false 执行 案例 3：使用对象（json） 来表达以上三目（元）运算符的操作 {样式:flag} 案例 4：
十五. Vue通过:class动态控制样式:class用法
HSH541的博客
03-23 1160
https://blog.csdn.net/u012345683/article/details/105146767
Vue class和style学习
黄彪博客
07-15 213
文章目录文章参考绑定 HTML Class对象语法案例一案例二数组语法案例三案例四案例五组件上使用案例六案例七绑定内联样式案例一案例二案例三 文章参考 Class 与 Style 绑定 绑定 HTML Class 对象语法 案例一 &amp;lt;div class=&quot;static&quot; v-bind:class=&quot;{ active: isActive, 'text-danger': hasEr...
深度解析Vue02源码与学习要点
资源摘要信息: "Vue02的源码学习资料" 1. Vue.js框架介绍： Vue.js是一个轻量级的前端框架，专为构建用户界面而设计。它由尤雨溪（Evan You）创建，特点是简单易用、灵活、组件化。Vue的核心库只关注视图层，易于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值