vue_day2

最新推荐文章于 2024-09-30 16:19:08 发布
最新推荐文章于 2024-09-30 16:19:08 发布
阅读量167 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72611192/article/details/127619881
版权

1 style和class

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


    </style>
</head>
<body>
<div id = "app">
<!--       <h1>class的使用</h1>-->
<!--       <div :class=" classObj">-->
<!--           我是class.的div-->
<!--       </div>-->
       <h1>style的使用</h1>
    <!--    <div style="background-color: aquamarine;font-size: 50px">-->
       <div :style="styleObj">
        我是style，的div
       </div>


</div>

</body>

<script>
    var vm =new Vue({
        el:'#app',
        // class的字符串用法
        // data:{
        //     classStr:'red'
        // },
        // class的数组用法
        //  data:{
        //     classList:['red']
        // },
        // class的对象用法
        //  data:{
        //     classObj:{red:true,size:false}
        // },
        // style 的字符串写法，以后改不好改
        // data:{
        //      styleStr:'background-color: aquamarine;font-size: 50px'
        // },
        // style的数组用法
        // data:{
        //      styleList: [{'background-color': 'green'}, {'font-size': '80px'}]
        // },
        // style的对象用法
         data:{
            styleObj:{backgroundColor:true,fontSize:false}
        },

    })




</script>
</html>

2 条件渲染

写在标签上，控制标签的显示与不显示

  • v-if=‘布尔值/运算完是布尔值’

  • v-else-if=‘布尔值/运算完是布尔值’

  • v-else

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



</head>
<body>
<div id = "app">
       <h1>条件渲染</h1>
       <div v-if="score>=90">优秀</div>
       <div v-else-if="score>=80 && score<90">良好</div>
       <div v-else-if="score>=60 && score<80">及格</div>
       <div v-else="score<60">优秀</div>





</div>

</body>

<script>
    var vm =new Vue({
        el:'#app',

        data:{
            score:88}


        })




</script>
</html>

在这里插入图片描述

3 列表渲染

v-for：放在标签上，可以循环显示多个此标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .top {
            margin-top: 50px;
        }
    </style>

</head>

<body>
<div id="app">
    <div class="container-fluid">
       <div class="row top">
           <div class="col-md-6 col-md-offset-3">
              <div class="text-center" style="margin-bottom: 30px">
                  <button  @click="handleClick" class="btn btn-danger">加载购物车</button>
              </div>
                 <div v-if="goodList.length>0">

                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>商品编号</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goodList">
                            <th>{{good.id}}</th>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                            <td>{{good.count}}</td>
                        </tr>
                        </tbody>
                    </table>
                 </div>
                <div v-else>
                    购物车空空如何
                </div>
              </div>
        </div>
    <div>


</div>

</body>

<script>
    var vm = new Vue({
        el: '#app',

        data: {
            goodList:
                [

        ]},
        methods:{
            handleClick(){
                this.goodList=[
                {id: 1, name: '小汽车', price: '300000元', count: 1},
                {id: 2, name: '钢笔', price: '1299元', count: 2},
                {id: 3, name: '铅笔', price: '9元', count: 10},
               {id: 4, name: '苹果', price: '2.9元', count: 3},]
            }
        }


    })


</script>
</html>

在这里插入图片描述

3.1 v-for 循环数组，循环字符串，数字，对象

v-for 可以循环数组，数字，字符串，对象
v-for=“key in obj”
-如果是数组：key就是数组的一个个元素
-如果是数字：key就是从1开始的一个个数字
-如果是字符串：key就是一个个字符
-如果是对象：key就是一个个value的值
v-for=“(key,value) in obj”
-如果是数组：key就是数组的一个个元素,value就是索引
-如果是数字：key就是从1开始的一个个数字,value就是索引
-如果是字符串：key就是一个个字符,value就是索引
-如果是对象：key就是一个个value的值，value就是一个个key

每次循环的标签上，一般都会带一个属性： :key=‘值必须唯一’
-key值得解释：为了加速虚拟dom的替换

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



</head>
<body>
<div id = "app">
       <h1>循环数字</h1>
       <ul>
           <li v-for="(i,a) in num">
               {{i}}-------索引值：{{a}}
           </li>
       </ul>
       <h1>循环字符串</h1>
       <ul>
           <li v-for="(i,a) in str">
               {{i}}-------索引值：{{a}}
           </li>
       </ul>
      <h1>循环对象</h1>
      <ul>
<!--           <div v-for="i in obj">-->
<!--               {{i}}-->
<!--           </div>-->
          <div v-for="(value,key) in obj">
              key值为：{{key}}，value值为：{{value}}
          </div>
       </ul>
       <h1>循环数组</h1>
       <ul>
           <li v-for="(name,i) in names">
               {{name}}
           </li>
       </ul>





</div>

</body>

<script>
    var vm =new Vue({
        el:'#app',

        data:{
            num:5,
            str:'hello  word',
            obj:{name:'xmm',age:18,hobby:['篮球','足球','排球']},
            names:['xmm','xss','xyy']
           }


        })




</script>
</html>

在这里插入图片描述

3.2 数组的检测与更新

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



</head>
<body>
<div id = "app">
       <h1>数组检测和更新</h1>
       <button @click="handleClick"> 点击追加姓名</button>
       <button @click="handleClick1">点我追加一批姓名</button>|
       <button @click="handleClick4">点我修改数组页面变化</button>|
        <p v-for="name in names" >
            {{name}}
        </p>
        <h1>对象的检测与更新</h1>
        <button @click="handleClick2">点我追加身高</button>
        <button @click="handleClick3">点我追加身高-可以看到</button>
        <p v-for="(value,key) in obj">{{key}}---{{value}}</p>



</div>

</body>

<script>
    var vm =new Vue({
        el:'#app',

        data:{
            names:['xmm','xss','xyy'],
            obj:{name:'xmm',age:18}
           },
        methods:{
            handleClick(){
                this.names.push('xzz')
            },
            handleClick1(){
                var a = this.names.concat(['azz','szz'])//在返回的值中有，页面不改变
            },
            handleClick2(){
                this.obj.height='180' //在返回的值中有，页面不改变
            },
             handleClick3(){
                 Vue.set(this.obj,'height',180)  // 监控到变化了
            },
             handleClick4(){
                Vue.set(this.names,0,'sdasdfas')
            }

        },



        })




</script>
</html>

在这里插入图片描述

4 双向数据绑定

input标签，v-model：数据双向绑定
-使用 属性指令绑定 :value=‘变量’ 是数据的单向绑定
- v-model=“name” ：数据双向绑定

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



</head>
<body>
<div id = "app">
       <h1>数据双向绑定</h1>
       <p>用户名：<input type="text"  v-model="name"></p>
       <p>密码：<input type="password"  v-model="password"></p>
       <button @click="handleClick">提交</button>{{err}}



</div>

</body>

<script>
    var vm =new Vue({
        el:'#app',

        data:{
            name: '',
            password: '',
            err:''

           },
        methods:{
            handleClick() {
                console.log(this.name,this.password)
                this.err='用户名或者密码错误'
            }
        }




        })




</script>
</html>

在这里插入图片描述

5 事件处理

事件绑定 v-on:事件名=‘函数’—》@事件名=‘函数’
input 也有很多事件

  • blur：失去焦点触发
  • change：发生变化触发
  • input：输入触发
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>input的事件处理</h1>
    <h2>blur</h2>
    <p><input type="text" v-model="name1" @blur="handleBlur"> ---->{{name1}}</p>
    <h2>change</h2>
    <p><input type="text" v-model="name2" @change="handleChange"> ---->{{name2}}</p>
    <h2>input</h2>
    <p><input type="text" v-model="name3" @input="handleInput"> ---->{{name3}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: ''
        },
        methods: {
            handleBlur() {
                console.log('失去焦点了，触发了', this.name1)
            },
            handleChange() {
                console.log('发生变化，触发了', this.name2)
            },
            handleInput() {
                console.log('输入了内容，触发了', this.name3)
            }
        }

    })


</script>
</html>

在这里插入图片描述

5.1 过滤案例

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

</head>
<body>
<div id="app">
    <h1>过滤案例</h1>
    <p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handleSearch"></p>
    <ul>
        <li v-for="item in newdataList">{{item}}</li>
    </ul>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: [
                'a',
                'at',
                'atom',
                'be',
                'beyond',
                'cs',
                'csrf',
                'd',
                'dddd',
            ],
            newdataList:[
                'a',
                'at',
                'atom',
                'be',
                'beyond',
                'cs',
                'csrf',
                'd',
                'dddd',
            ],
        },
        methods: {
            handleSearch() {
                console.log('搜索的内容是：', this.search)
                // var _this=this
                // 复杂写法
                // this.dataList=this.dataList.filter(item=>{
                //     console.log(this)
                //     // 判断this.search是否在item中，如果在保留，return true，如果不在返回false
                //     if (item.indexOf(this.search)>=0){
                //         return true
                //     }else {
                //         return  false
                //     }
                // })

                // 简单写法
                this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }
        }


    })


    // 1 补充：数组过滤方法，内置的
    // var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs',
    //     'csrf',
    //     'd',
    //     'dddd',
    // ]
    // // filter数组内置的，需要传一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行
    // // 匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃
    // l = l.filter(function (item) {
    //     console.log('进来一个值：',item)
    //     return false
    // })
    // console.log(l)


    //2 判断子字符串是否在字符串中
    // var s='tttatom'
    // var a ='a'
    // console.log(s.indexOf(a)>=0)


    // 3  es6 模板字符串  ``   对象写法    箭头函数
    // var f=function (){
    //     console.log('打印了')
    // }
    //3.1 不带参数的箭头函数
    // var f = () => {
    //     console.log('打印了')
    // }

    // 3.2 带一个参数，没有返回值得箭头函数
    // var f = name=>{
    //     console.log('打印了', name)
    // }
    // 3.3 多个参数，没有返回值
    // var f = (name,age) => {
    //     console.log('打印了', name,age)
    // }
    // 3.4 带一个参数，有返回值，函数体只有一行

    // var f = function (name) {
    //     return name+'nb'
    // }
    //  var f = name=> name+'nb'

    // 有什么用？ 1 简洁  2 箭头函数没有自己的this,会用上一层的this


    // var f = function () {
    //     console.log('匿名函数的this', this)
    // }
    // var f1 = () => {
    //     console.log('箭头函数的this', this)
    // }

    // var obj = {
    //     f: function () {
    //         console.log('匿名函数的this', this)
    //     },
    //     f1: () => {
    //         console.log('箭头函数的this', this)
    //     }
    // }
    //
    // obj.f()
    // obj.f1()


</script>
</html>

在这里插入图片描述

5.2 事件修饰符

.stop 只处理自己的事件，不向父控件冒泡.self 只处理自己的事件，子控件冒泡的事件不处理.prevent 阻止a链接的跳转.once 事件只会触发一次（适用于抽奖页面）

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

</head>
<body>
<div id="app">
    <h1>事件修饰符</h1>
    <h2>事件冒泡--通过 事件修饰符 stop ，加在子控件上，阻止事件冒泡</h2>
    <ul @click="handleUl">
        <li @click.stop="handleMn">美女</li>
        <li @click="handleSg">帅哥</li>
    </ul>


    <h2>事件冒泡--通过 事件修饰符 self加在父控件上，只处理自己的事件</h2>
    <ul @click.self="handleUl">
        <li @click="handleMn">美女</li>
        <li @click="handleSg">帅哥</li>
    </ul>

    <h3>阻止a标签跳转</h3>
    <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

    <h4>once只执行一次</h4>
    <button @click.once="handleOnce">点我秒杀</button>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleUl() {
                console.log('ul被点了')
            },
            handleMn() {
                console.log('美女被点了')
            },
            handleSg() {
                console.log('帅哥被点了')
            },
            handleA() {
                console.log('a被点了')
            },
            handleOnce() {
                console.log('恭喜你，秒到了')
            }
        }

    })


</script>
</html>

在这里插入图片描述

5.3 按键修饰符

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

</head>
<body>
<div id="app">
    <input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: ''
        },
        methods: {
            handleUp(event) {
                console.log('火车被按了')
                // if (event.code == 'Enter') {
                //     console.log('回车键被案例', event)
                // }
            }
        }

    })


</script>
</html>
怼怼哎
关注
Day32_Vue
小辉的博客
03-10 264
Day32_Vue 1. Vue 的概念 Vue全称叫Vue.js是一个javaScript框架（它和JQuery一样是一个操作标签元素的js框架罢了 ） Vue的特色是对数据的双向绑定（视图与数据模型双向绑定同步） MVVM模式：即Model-View-View-Model，视图模型双向绑定 2. Idea中Vue的使用 创建maven的web工程 在webapp目录下，创建js文件夹 将vue.js放入到js文件夹中 创建html页面 在页面的<head>标签中使用&
前端学习笔记____Vue2+Vue3全家桶
weixin_55181759的博客
08-09 7249
前端学习笔记____Vue2+Vue3全家桶前言第一部分 VUE基础一、Vue简介1. Vue是什么?2. Vue发展历史3. Vue的特点二、初识Vue1. Vue模板语法2. 数据绑定▲单向数据绑定v-bind▲ 双向数据绑定v-model3. el与data的两种写法▲ el的两种写法▲ data的两种写法4. MVVM模型5.数据代理6. 事件处理▲ 事件处理v-on▲ 事件修饰符▲ 键盘事件key7. 计算属性computed与监视(侦听)属性watch▲ 计算属性－computed▲ 监视(侦听
自学Vue3 Day2
G24gg的博客
04-27 1126
Vue 3在组件通信方面带来了一些新特性和改进，特别是Composition API的引入，为开发者提供了更灵活的组件逻辑编写方式。同时，Vue 3的响应式系统的改进也会影响到组件间通信的实现。虽然Vue 2和Vue 3在很多基本概念上保持一致，但Vue 3提供了更多的工具和优化来帮助开发者构建更高效、更可维护的应用程序。子组件可以直接修改父组件的值了。
Vue2 day-04
BXY369的博客
09-09 1855
单双标签都可以或者小写加-形式, 运行后, 会把这个自定义标签当做组件解析, 使用组件里封装的标签替换到这个位置。要想修改props的值，可以把 props 的值转存到data中，因为data中的数据都是可读可写的!提供事件中心(事件总线)(EventBus) var hub = new Vue()1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)1.new Vue() – Vue实例化(组件也是一个小的Vue实例)传递数据方，通过hub.$emit(方法名，传递的数据)触发事件。
day05_vue2基础教程
与海
06-15 936
简写并渲染app组件 效果 显示隐藏的配置信息 ref属性 Vue 中的 ref 属性详解vue中组件的props属性（详）
python前端框架vue_VUE前端框架
weixin_39567046的博客
12-08 993
Vue项目环境搭建1) 安装node官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/2) 换源安装cnpm>: npm install -g cnpm --registry=https://registry.npm.taobao.org3) 安装vue项目脚手架>: cnpm install -g @vue/cli注：2或3终端安装失败时，可以清空 npm...
Day2_vue集成elementUI完善布局
Siobhan_Mxin的博客
04-26 1683
上一节，实现了从0到vue页面主体框架的搭建，这一节补充完善搜索框；新增、删除、导入、导出等按钮；表格设置；分页；面包屑的实现！
VUE2 Day01指令
weixin_52284271的博客
12-07 395
VUE2
vue day01 error
qq_50527371的博客
04-11 3033
C:\Users\little_shark\Desktop\project-SPH\app>npm run serve > app@0.1.0 serve > vue-cli-service serve INFO Starting development server... ERROR Failed to compile with 1 error .
vue笔记day1
m0_61246613的博客
03-18 844
什么是vue 1.构建用户界面 用vue往html页面中填充数据，非常的方便。 2.框架 (1).框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能! (2).要学习vue，就是在学习vue框架中规定的用法! (3).vue 的指令、组件(是对UI结构的复用)、路由、Vuex、vue 组件库。 (4).只有把上面的内容掌握以后，才有开发vue项目的能力! vue的两个特性 1.数据驱动视图: (1)数据的变化会驱动视图自动更新 (2)好处:程序员只管把数据维护好，那么页面结构会被v
vue-component_day04_03.zip
07-02
本教程将深入探讨在“vue-component_day04_03”项目中，如何拆分静态组件并实现它们在页面加载时的正确初始化显示。 首先，让我们了解组件的基本概念。在Vue中，组件可以看作是自包含的独立单元，具有自己的视图和...
vue-component_day04_04_交互添加.zip
03-13
在"vue-component_day04_04_交互添加.zip"这个资源中，我们可以推测这是关于Vue组件交互性增强的一个教程，特别是针对第四天课程的第四个主题。在这个阶段，你可能将学习如何在Vue应用中添加用户交互功能，如事件...
vue-component_day04_02_静态页面拆分.zip
03-12
"vue-component_day04_02_静态页面拆分.zip"这个压缩包文件显然与Vue组件的拆分有关，特别是针对静态页面的拆分。在这个教程或者项目中，我们将探讨如何将一个大的静态HTML页面拆分为多个独立的Vue组件，以提高代码...
day6.rar_breakfast2t4_vue
09-24
在"day6.rar_breakfast2t4_vue"这个压缩包中，我们聚焦于Vue的基本使用、组件配置、路由设置以及子路由配置，这些都是开发Vue应用时不可或缺的知识点。 首先，让我们深入了解Vue的基本使用。Vue的核心特性包括数据...
Vue基础day2学习资料.zip
03-31
在"Vue基础day2学习资料.zip"这个压缩包中，包含了一系列的学习资源，帮助你深入理解Vue的基础语法和全家桶组件。下面，我们将详细探讨这些知识点。 首先，"day02_Vue01-基础语法3.ppt"可能是一个关于Vue基础语法的...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 786
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1158
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
最新发布
2301_77358195的博客
09-30 852
自定义指令
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 519
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Vue Day02：表单元素与绑定详解
在Day02 VUE资料整理中，主要讲解了Vue.js中的核心组件和特性，特别是与前端开发中常用的表单元素交互的部分。以下是详细的知识点总结： 1. **表单元素** - Vue提供了直观易用的数据绑定功能，使得在HTML模板中操作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值