526互联

Vue_入门——？？？03_days

发布时间 2024-01-08 22:53:15作者: 拆尼斯、帕丁顿

上节回顾：

 前端发展
    -vue，react
    -uni-app---》多处编译
# 1 vue 介绍
    -读 view ，渐进式框架
    -版本：2.x  3.x   3完全兼容2的写法
        -组合式api
        -配置项api：目前学的 
        new Vue({
            el:'#app',
            data:{},
            methods:{}
        })
    -MVVM架构
        m：model，数据层，js变量
        v：view,视图层,html,css 用户看到的
        vm：vue提供的，链接m和v，处理v和m之间数据绑定
    -组件化开发，单页面应用spa
    -快速使用---》2.7--》下载到本地引入
        -js/vue.js
        -xx.html 中，引入
        -new Vue({el,data:{},methods:{}})
        -响应式：数据变化页面就会变
        
        
 # 2 插值  {{}}
    -变量  字符串，数字，数组，对象
    -三目运算  var a=条件?1:2
    - 不能渲染标签字符串  xss攻击
    
    
# 3 文本指令
    写在标签上 v-xx
    v-text='变量'
    v-html='变量'
    v-show='布尔'
    v-if='布尔'
    
# 2 事件指令
    v-on:事件名='方法'---》methods中配合
    点击事件：click
    简写：@事件名='方法'
    
# 3 点击切换图片小案例
    # Math.random()  ---》生成0--1 随机小数 
    #Math.random()* 数字  ---》生成0---数字之间的随机小数
    # Math.ceil（小数） ---》取天花板
    Math.floor(Math.random() * this.list1.length) 
    # 随机从数组中出值
    
# 4 属性指令
    v-bind:属性='值'
    简写  :属性名='值'
        
# 5 style和class
    都可以绑定三种变量类型
        字符串
        数组
        对象
# 6 条件指令
    v-if='条件'
    v-else-if='条件'
    v-else

补充-es6对象写法

es6对象写法
——基础写法 
var userinfo={‘name':'zzz','age':19}
console.log(userinfo)
——省略key的引号    key值不能出  -js变量名中 不能出现
var userinfo ={name：'zzz',age:19}
console.log(userinfo)
——对象中直接放变量
var name='zzz'
var age=19
var userinfo ={name,age}   ***{name:'zzz',age:19}
console.log(userinfo)

——对象中  方法
var name='lqz'
var age =19
var userinfo ={
      name,age,'showName':function() {
             console.log('名字是:'+name)
             console.log(this)   ---python对象中 有self，这个 this就是当前实例对象                         
             console.log('另一个取名字的方式:'+this.name)  ----python对象中有 self， this是当前实例对象
    
    }
}        

——方法简写
如果不在  实例对象内部  this代指 window 对象， 就是bom对象，this可以不写   ——但是后面会遇到  this 指向问题

    var  showName  =function(){
     // console.log(this.location)   //  代指当前window对象  ---浏览器，bom对象
  
      //console.log(location)     //代指当前  window对象  浏览器，bom对象，不写 this
      //console.log('另一个取名字的方式：'+this.name)

}
var name='zzz'
var  age =19
var   userinfo ={
        name,age,showName

}
userinfo.showName()

——最终
//var  name ='zzz'
var age =19
var userinfo ={
    name,age,showName(){
          console.log('另一个取名字的方式'+this  name)

    }
}
showName(){
    console.log('另一个取名字的方式:'+this.name)

    }

showName:function(){
     console.log('另一个取名字的方式:' +this.name)    
}

今日：

列表渲染 -v-for指令

1.1 v-for基本使用<!DOCTYPE html>

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

</head>
<body>
<div id ="app">
        <ul>
                <li v-for ="item in names">{{item}}</li>
        </ul>

        <hr>
        <p v-for ="item in names"> 名字：{{item}} </p>
        <hr>

       <div v-for="name in names">
            <a href="">{{name}} </a>
       </div>

</div>
</body>
<script>
          var vm =new Vue({
                el:'#app',
                data:{
　　　　　　　　　　　　names:['张三'，'彭于晏','迪丽热巴','zzz']     
   },  
})

 

显示购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"
            crossorigin="anonymous"></script>
</head>
<body>
<div id ="app">
    <div class ="container">
        <div class="row">
            <div class="col-md-6 offset-3">
                <h1 class="text-center">购物车</h1>
                <div v-if="goodsList.length==0"> 购物车空了</div>
                <table class="table" v-else>
                    <thead>
                    <tr>
                            <th scop"col">商品id</th>
                            <th scop"col">商品名字</th>
                            <th scop"col">商品数量</th>
                            <th scop"col">商品价格</th>
                            <th scop"col">商品图片</th>           
                    <tr>
                    </thead>
                    <tbody>
                   <tr class="table-danger" v-for="good in goodsList">
                            <th scope="row">{{good.id}}</th>
                            <th>{{good.name}}</td>
                            <th>{{good.count}}</td>
                            <th>{{good.price}}</td>
                            <td><img:src"good.img" alt="" width="50px" heigth="50px"></td>

                  </tr>
                  </tbody>
                </table>

                <button class ="btn btn-danger" @click="loadData">加载购物车</button>

          </div>
       </div>
    </div>

<div>
</body>

<script>
        var vm =neww Vue({
            el:"#app",
            data:{
},
methonds:{
        loadData() {
               this.goodsList=[
          {id:1,name:'xx',count:2,price:99, img:'./img/1.png'},
          {id:2,name:'yy',count:6,price:91, img:'./img/1.png'},
          {id:3,name:'zz',count:15,price:59, img:'./img/1.png'},
          {id:4,name:'qq',count:102,price:89, img:'./img/1.png'},
          {id:5,name:'dd',count:2,price:77, img:'./img:'./img/1.png'},
               ]               
          }
    }                    

})
<script>
</html>

v-for可以循环的类型   

　　　　　　　　　　　　　(与js的in是相反)

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

    <h1>循环数组</h1>
    <ul>
        <li v-for="(item,index) in names">{{item}}--->{{index}}</li>

    </ul>
    <hr>
    <h1>循环对象</h1>
    <ul>
        <li v-for="(value,key) in userinfo">key是:{{key}}----value是：{{value}}</li>

    </ul>
    <hr>

    <h1>循环字符串</h1>
    <ul>
        <li v-for="(value,index) in s">{{value}}---{{index}}</li>

    </ul>
    <hr>

    <h1>循环数字</h1>
    <ul>
        <li v-for="(item,index) in 10">{{item}}--->{{index}}</li>

    </ul>
    <hr>

</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            names: ['张三', '彭于晏', '迪丽热巴', 'lqz'],
            userinfo: {name: 'lqz', age: 19, hobby: '篮球'},
            s: 'lqz is handsome'
        },

    })


    // 补充：js的循环方式
    // 1 基于索引的循环---》最基本的
    // for (var i = 0; i < 10; i++) {
    //     console.log(i)
    // }

    // 2 in 循环
    // var names = ['lqz', '小红', '小吕'] // 数组
    // for (item in names) {  // 循环索引
    //     // console.log(item)
    //     console.log(names[item])
    // }
    // var userinfo = {'name': 'lqz', 'age': 19} // 对象
    // for (item in userinfo) {  // 循环的是key
    //     console.log(userinfo[item])
    // }

    // var s = 'lqz' // 字符串
    // for (item in s) {  //索引
    //     console.log(s[item])
    // }


    // 3 of 循环
    // var names = ['lqz', '小红', '小吕'] // 数组
    // for (item of names) {  // 循环 具体值
    //     console.log(item)
    // }

    // var userinfo = {'name': 'lqz', 'age': 19} // 对象 不能用of循环
    // for (item of userinfo) {  // 循环的是value
    //     console.log(item)
    // }

    // var s = 'lqz' // 字符串
    // for (item of s) {  // 循环 value
    //     console.log(item)
    // }

    // for (item of 10) {  //  不能循环数字
    //     console.log(item)
    // }


    // 4 数组的方法，实现循环
    // var names = ['lqz', '小红', '小吕']
    // names.forEach(function (value,index) {
    //     console.log(index)
    //     console.log(value)
    // })
    // var userinfo = {'name': 'lqz', 'age': 19}  // 没有循环方法


    // 5 jq 的each循环
    // var names = ['lqz', '小红', '小吕']
    // $.each(names, function (index, value) {
    //     console.log(index)
    //     console.log(value)
    // })

    var userinfo = {'name': 'lqz', 'age': 19}
    $.each(userinfo, function (key, value) {
        console.log(key)
        console.log(value)
    })
    

</script>
</html>

js中循环方式

补充：js的循环方式
    // 1 基于索引的循环---》最基本的
    // for (var i = 0; i < 10; i++) {
    //     console.log(i)
    // }

    // 2 in 循环
    // var names = ['lqz', '小红', '小吕'] // 数组
    // for (item in names) {  // 循环索引
    //     // console.log(item)
    //     console.log(names[item])
    // }
    // var userinfo = {'name': 'lqz', 'age': 19} // 对象
    // for (item in userinfo) {  // 循环的是key
    //     console.log(userinfo[item])
    // }

    // var s = 'lqz' // 字符串
    // for (item in s) {  //索引
    //     console.log(s[item])
    // }


    // 3 of 循环
    // var names = ['lqz', '小红', '小吕'] // 数组
    // for (item of names) {  // 循环 具体值
    //     console.log(item)
    // }

    // var userinfo = {'name': 'lqz', 'age': 19} // 对象 不能用of循环
    // for (item of userinfo) {  // 循环的是value
    //     console.log(item)
    // }

    // var s = 'lqz' // 字符串
    // for (item of s) {  // 循环 value
    //     console.log(item)
    // }

    // for (item of 10) {  //  不能循环数字
    //     console.log(item)
    // }


    // 4 数组的方法，实现循环
    // var names = ['lqz', '小红', '小吕']
    // names.forEach(function (value,index) {
    //     console.log(index)
    //     console.log(value)
    // })
    // var userinfo = {'name': 'lqz', 'age': 19}  // 没有循环方法


    // 5 jq 的each循环
    // var names = ['lqz', '小红', '小吕']
    // $.each(names, function (index, value) {
    //     console.log(index)
    //     console.log(value)
    // })

    var userinfo = {'name': 'lqz', 'age': 19}
    $.each(userinfo, function (key, value) {
        console.log(key)
        console.log(value)
    })

其他

1  key 值的解释
-后期使用 v-for循环，在标签上，大家通常写 key属性
-key对应的value值必须 唯一  ##### 唯一####
-作用是：加速dom的替换，提高v-for循环的速度

# 2 数组，对象的更新
    有些方法---》没有监控
    如果数组，对象，修改了，页面没变量
    Vue.set(对象, key, value值)
    Vue.set(数组, 索引, value值)

事件处理

input 表示的事件
    -blur ：失去焦点
    -focus：得到焦点
    -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>v-mode指令</h1>
    用户名：<input type="text" v-model="name">--》{{name}}

    <h2>blur</h2>
    <input type="text" v-model="data01" @blur="haneldBlur">--》{{data01}}
    <h2>focus</h2>
    <input type="text" v-model="data02" @focus="haneldFocus">--》{{data02}}
    <h2>change</h2>
    <input type="text" v-model="data03" @change="haneldChange">--》{{data03}}
        <h2>input</h2>
    <input type="text" v-model="data04" @input="haneldInput">--》{{data04}}
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            data01: '',
            data02: '',
            data03: '',
            data04: '',
        },
        methods: {
            haneldBlur() {
                alert(this.data01)
            },
            haneldFocus() {
                console.log('来了老弟')
            },

            haneldChange() {
                console.log(this.data03)
            },
            haneldInput(){
                console.log(this.data04)
            }
        }


    })


</script>
</html>

过滤案例

<!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>
    <input type="text" v-model="search" @input="handleSearch">
    <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', 'bee', 'c', 'cs', 'csrf'],
            newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
        },
        methods: {
            //1 笨办法实现过滤
            // handleSearch() {
            //     console.log(this)  // this  是vue实例
            //     var _this = this
            //     // 过滤dataList 中每一个是否包含用户输入的 this.search
            //     this.newDataList = this.dataList.filter(function (item) {
            //         console.log(_this) // this 是window对象
            //         if (item.indexOf(_this.search) >= 0) {
            //             return true
            //         } else {
            //             return false
            //         }
            //     })
            //     // 存在俩问题
            //     // 1 this指向问题  在外部，定义一个_this，内部用_this
            //     // 2 改数据是在dataList上改的
            // }


            // 2 使用箭头函数
            // handleSearch() {
            //     this.newDataList = this.dataList.filter(item => {
            //         if (item.indexOf(this.search) >= 0) {
            //             return true
            //         } else {
            //             return false
            //         }
            //     })
            // },

            // 3 终极方案
            handleSearch() {
                this.newDataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }
        }


    })


    // 11111 补充1：数组的过滤
    var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf']
    //1 过滤掉所有
    // var newDataList = dataList.filter(function (item) {
    //     // return false
    //     return true
    // })
    // 2 只保留长度大于2的
    // var newDataList = dataList.filter(function (item) {
    //     if (item.length > 2) {
    //         return true
    //     } else {
    //         return false
    //     }
    // })


    //3 只保留包含at的
    // var search = 'at'
    // var newDataList = dataList.filter(function (item) {
    //     if (item.indexOf(search) >= 0) {
    //         return true
    //     } else {
    //         return false
    //     }
    //
    // })
    // console.log(newDataList)

    // 222222补充2， 判断子字符串是否在字符串中
    // var search = 'at'
    // var s = 'lqzattr'
    // var res = s.indexOf(search)  // 子字符串在字符串的哪个位置
    // console.log(res)

    // 3333 箭头函数
    // 3.1 正常匿名函数写法---我们都会了
    // var f =function (){
    //     console.log('ffff')
    // }
    // f()
    // 3.2 箭头函数写法   把function去掉，在形参括号和函数体大括号之间加个 =>
    // var f = () => {
    //     console.log('ffff')
    // }
    // f()

    // 3.3 箭头函数有参数
    // var f = (name) =>{
    //     console.log(name)
    // }
    // f('lqz')
    // 3.4 如果只有一个参数，可以简写成  有多个参数必须加在括号中
    // var f = name => {
    //     console.log(name)
    // }
    // f('lqz')

    // 3.5 箭头函数有返回值
    // var f = name => {
    //     return name + 'nb'
    // }
    // var res=f('lqz')
    // console.log(res)

    // 3.6 箭头函数有返回值,没有其他代码，可以简写
    // var f = name => name + 'nnb'
    //
    // var res = f('lqz')
    // console.log(res)

    // 3.7 其他案例 add
    // var f1 = function (a, b) {
    //     return a + b
    // }
    // var f1 = (a, b) => a + b
    // var f1 = a => a + 100

    // 3.8 箭头函数没有自己的this，箭头函数中使用的this，是它上一层的this


</script>
</html>

回顾：

　　数组的过滤   filter

事件修饰符

　　修饰点击事件的 修饰符

　　　　once   prevent   self   stop

<!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>once 只点击一次</h2>
    <button @click.once="haneldClick">点我弹窗</button>

    <h2>阻止a的跳转</h2>
    <a href="http://www.baidu.com" @click.prevent="haneldA">点我看美女</a>

    <h3>stop，子标签上用只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）</h3>

    <ul @click="handlelul">
        <li @click.stop="handleli">li001--不让事件往上冒泡了</li>
        <li>li002</li>
    </ul>

    <h3>self，父签上用 ，只处理自己的事件，子控件冒泡的事件不处理</h3>

    <ul @click.self="handlelul">
        <li @click="handleli">li001</li>
        <li>li002</li>
    </ul>
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            haneldClick() {
                alert('贪了')
            },
            haneldA() {
                console.log('点了')
                // if(条件){
                //     location.href='http://www.baidu.com'
                // }
                // location.href = 'http://www.cnblogs.com'
            },
            handleli() {
                console.log('li被点击了')
            },
            handlelul() {
                console.log('ul被点击了')
            }
        }


    })


</script>
</html>

按键修饰符

　　　　按键是个事件 ——keyup  keydown

<!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>
    <input type="text" @keyup="handleUp">

    <h2>按键修饰符</h2>
    <!--    <input type="text" @keyup.enter="handleUp02">-->
    <input type="text" @keyup.13="handleUp03">

</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleUp(event) {
                console.log(event.key)
            },
            handleUp02() {//只有按了回车，再触发函数执行
                console.log('回车被敲了')
            },
            handleUp03() {
                console.log('13对应的按键被按下了')
            }
        }


    })


</script>
</html>

数据双向绑定　　　

v-model 指令，只针对于input标签

# 使用v-model绑定后，只要变量发生变化，页面就变化，只要页面变化，变量就变化

表单控制

　　checkbox选中，单选，多选，radio

input 标签，使用 v-model 双向绑定
　　text
　　password
　　checkbox
　　file
　　radio

<!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>checkbox</h1>
    <h2>用户登录示例</h2>
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="pwd"></p>
    <p>记住密码：<input type="checkbox" v-model="rem"></p>
    <p>爱好：<br>
        <input type="checkbox" v-model="hobbys" value="篮球">篮球</p>
    <input type="checkbox" v-model="hobbys" value="足球">足球</p>
    <input type="checkbox" v-model="hobbys" value="乒乓球">乒乓球</p>
    <br>
    <input type="radio" v-model="radio" value="男">男
    <input type="radio" v-model="radio" value="女">女
    <input type="radio" v-model="radio" value="保密">保密
    <button @click="handleSubmit">登录</button>

</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            pwd: '',
            rem: '', // 只做选中不选中判断  使用布尔
            hobbys: [], // 放多个元素用数组
            radio: ''

        },
        methods: {
            handleSubmit() {
                console.log(this.username, this.pwd, this.rem, this.hobbys,this.radio)
            }
        }


    })


</script>
</html>