标签：es6 console name 渲染 -- item var 写法 log

Ⅰ 轮换挑选图片

【一】方式一

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

    <h1>图片定时器</h1>
    <img :src="img" width="300px"  :height="height">
    <button @click="handleChange">{{ isRunning ? '停止' : '开启' }}</button>
<!--    <button @click="handleChange">开启/停止</button>-->


</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            height:'300px',
            img:'./img/1.jpg',
            intervalId: null,
            isRunning: false,
            currentIndex: 1,
            imageCount: 7 // 实际图片数量

        },
        methods:{
             handleChange: function () {
                if (this.isRunning) {
                    // 如果定时器正在运行，停止定时器
                    clearInterval(this.intervalId);
                    this.intervalId = null; // 清除定时器 ID
                    this.isRunning = false;

                } else {
                    // 如果定时器未运行，启动定时器
                    this.intervalId = setInterval(() => {
                        this.currentIndex = (this.currentIndex % this.imageCount) + 1;
                        this.img = `./img/${this.currentIndex}.jpg`;
                    }, 1000);
                     this.isRunning = true;
                }
            }
        }
    })


</script>
</body>
</html>

【二】方式二

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

    <img :src="img" alt="" height="400px" width="400px">
    <br>
    <button @click="handleClick">开始/停止</button>

</div>
</body>
<script>
    new Vue({
        el: '.app',
        data: {
            img: './img/1.jpg',
            img_urls: ['./img/1.jpg', './img/2.jpg', './img/3.jpg'],
            t: null
        },
        methods: {
            handleClick: function () {
                if (this.t) {
                    // 如果有值，说明定时器开启了  ,清空定时器
                    clearInterval(this.t)
                    this.t = null
                } else {
                    // 如果没有值，定时器没开启
                    // 定时器--每个1s干xx
                    var _this = this
                    this.t = setInterval(function () {
                        //修改img的值
                        // 根据索引取值_this.img_urls[数字]
                        //  Math.random() * arr.length     Math.random() 生成 0---1之间数字 *数组长度---》0--数组长度之间的数字---》Math.floor 向下取整
                        _this.img = _this.img_urls[Math.floor(Math.random() * _this.img_urls.length)]
                    }, 1000)
                }


            }
        }
    })

</script>
</html>

Ⅱ 补充 es6的对象写法

【一】修改变量，对象中得值，是否会发生变化-->取决于对象是什么类型：值类型引用类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>

    // //1 对象定义--最原始
    // var person = {
    //     'name': 'zyb',
    //     'age': 88
    // }
    // //2 对象定义--省略key的 ''
    // var person2 = {
    //     name: 'zyb',
    //     age: 88
    // }
    //3 对象定义--省略key的 '',定义一个变量叫name
    var name='zhangsan'
    var age =99
    var pet={name:"小花猫",hobby:'喵喵拳'}   // 引用类型
    var person3 = {
        name,
        age,
        pet
    }

    name='lisi'  // 值类型  所以不会修改 name='zhangsan'  的值
                // 可变和不可变--->值和引用
                // 可变是 值发生改变，内存地址不变--->列表，字典，集合
                // 不可变是 值发生变化，内存地址也变--->数字，字符串，布尔，元组

    pet.hobby='抽烟'
    console.log(person3)
    console.log(name)
    // // 修改变量，对象中得值，是否会发生变化-->取决于对象是什么类型：值类型   引用类型
</script>
</html>

前端控制台展示

【二】总览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>

    // //1 对象定义--最原始
    // var person = {
    //     'name': 'zyb',
    //     'age': 88
    // }
    // //2 对象定义--省略key的 ''
    // var person2 = {
    //     name: 'lqz',
    //     age: 19
    // }
    //3 对象定义--省略key的 '',定义一个变量叫name
    // var name='zhangsan'
    // var age =99
    // var pet={name:"小花猫",hobby:'喵喵拳'}   // 引用类型
    // var person3 = {
    //     name,
    //     age,
    //     pet
    // }
    //
    // name='lisi'  // 值类型  所以不会修改 name='zhangsan'  的值
    //             // 可变和不可变--->值和引用
    //             // 可变是 值发生改变，内存地址不变--->列表，字典，集合
    //             // 不可变是 值发生变化，内存地址也变--->数字，字符串，布尔，元组
    //
    // pet.hobby='抽烟'
    // console.log(person3)
    // console.log(name)
    // // 修改变量，对象中得值，是否会发生变化-->取决于对象是什么类型：值类型   引用类型


    // 4 对象中放函数
    // var name = 'zhangsan'
    // var age = 99
    //
    // var showName = function () {
    //     console.log(this.name)
    // }
    //
    //
    // var person4 = {
    //     name,
    //     age,
    //     showName
    // //     showName : function () {
    // //     console.log(this.name)
    // // }
    // }

    // person4.showName()

    // 4 最终写法
    var name = 'zhangsan'
    var age = 99


    var person4 = {
        name,
        age,
        showName() {
            console.log(this.name+'_NB')
        } // 还是跟key,value一样  只不过 key是showName() value是函数
    }

    person4.showName()  // zhangsanNB


</script>
</html>

Ⅲ uniapp使用

【一】介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

官网:https://uniapp.dcloud.net.cn/

【二】下载hbuilderx

地址:https://www.dcloud.io/hbuilderx.html

傻瓜式安装

【三】hbuilderx步骤

【1】HBuilderX创建:

1.打开HBuilderX，选择菜单栏的“文件”>“新建”>“项目”。
2.在新建项目对话框中，选择“uni-app”作为项目类型，点击“下一步”
3.填写项目名称、选择存储目录，确认项目模板(此处我们选择“默认模板”)，点击“创建”
通过 HbuilderX 创建 uni-app vue3 项目

【2】安装uni-app vue3编译器

【3】编译成微信小程序端代码

如果第一次使用就在链接下载

【4】项目结构

把转化好的vue代码放在index.vue中

记得放进去之后，左上角点击保存

【5】发行，进行云打包

【6】选择打包口，证书

【7】个人证书获取

网址:https://www.yunedit.com/

生成证书

【8】安装

然后打包完，下面会出现打包好的软件所在目录，打开发送到手机，即可安装

Ⅳ class和style

class 和style 都是属性--->使用属性指令：

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

        .green {
            background-color: green;
        }

        .font {
            font-size: 60px;
        }

        .height {
            height: 400px;
        }
    </style>
</head>
<body>
<div class="app">
    <h1>class的使用--字符串，数组，对象</h1>

<!--        <div :class="class_str">-->
<!--            // vm.class_str='green font' 可以再控制台 控制 展示的属性-->


<!--        <div :class="class_list">-->

<!--           vm.class_list   查看-->
<!--            ['red', 'height', __ob__: Observer]-->
<!--            vm.class_list.push('font')   增加一个font属性  -->
<!--            vm.class_list.pop()  pop一个属性   -->
<!--            'font'-->

    <div :class="class_obj">
<!--        vm.class_obj.red=false    修改属性-->
<!--        false-->

<!--        vm.class_obj.font=true  坑:再增加 不显示修改-->
<!--        使用： Vue.set(class_obj,'font',true) 才有响应式-->
<!--        Vue.set(vm.class_obj,'font',true)  若是没有var vm = 则不需要里面vm.-->

        我是个div--class
    </div>

    <h1>style的使用--字符串，数组，对象</h1>
<!--        <div :style="style_str">-->
<!--            vm.style_str='font-size: 70px;background-color: pink;height:400px'-->
<!--            'font-size: 70px;background-color: pink;height:400px'-->


<!--        <div :style="style_list">-->

        <div :style="style_obj">
        我是个div---style
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            class_str: 'red height',
            class_list: ['red', 'height'],  // 数组 最合适
            class_obj: {red: true, height: true} , // 坑 ，修改的属性，必须在一开始就要放进去，
            // 后期再放的 就是失去响应式了  使用： Vue.set(class_obj,'font',true) 才有响应式
            //  Vue.set(vm.class_obj,'font',true)  若是没有var vm = 则不需要里面vm.

            style_str:'font-size: 70px;background-color: pink',
            style_list:[{'font-size':'70px'},{'background-color':'pink'}],
            // style_obj:{'font-size':'70px','background-color':'pink'}, // 因为在前端控制台输入时不能直接输入-

            // vm.style_obj.font-size='30px'
            // 报错  VM446:1 Uncaught SyntaxError: Invalid left-hand side in assignment
            // vm.style_obj['font-size']='30px'   .不出来带-的，但是可以[]
            //     '30px'

            style_obj:{fontSize:'70px',backgroundColor:'pink'},  // 可以写成驼峰-->建议这种
        },
    })

</script>
</html>

Ⅴ 条件渲染

# 1 if  else if   else 逻辑
# 2 指令v-if   v-else  v-else-if

# 3 小案例：输入用户成绩，显示：优秀，良好，及格，不及格

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

</head>
<body>
<div class="app">
    <h2>您的成绩是：{{score}}</h2>
    <h3 v-if="score>=90&&score<=100">优秀</h3>
    <h3 v-else-if="score>=80&&score<90">良好</h3>
    <h3 v-else-if="score>=60&&score<80">及格</h3>
    <h3 v-else>不及格</h3>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            score: 88
        },
    })

</script>
</html>

Ⅵ 列表渲染

# 1 循环
# 2 v-for 指令
# 3 购物车小案例+bootstrap样式：
	goods_list:[{},{},{}]

【一】购物车小案例+bootstrap样式： v-for 指令循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="./js2/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="app">

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <h1 class="text-center">购物车</h1>
                <hr>
                <div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">商品id</th>
                            <th scope="col">商品名</th>
                            <th scope="col">商品价格</th>
                            <th scope="col">商品数量</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr v-for="item in shopping_car" :class="item.id%2>0?'table-danger':'table-success'">
                            <th scope="row">{{item.id}}</th>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td>{{item.count}}</td>
                        </tr>
                        </tbody>
                    </table>

                </div>

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


</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            shopping_car: [
                {id: 1001, name: '极光', price: '1024元', count: 1},
                    {id: 1002, name: '火麒麟', price: '1688元', count: 3},
                    {id: 1003, name: '雷神', price: '324元', count: 8},
                    {id: 1004, name: '盘龙', price: '648元', count: 10},
            ]
        },
    })

</script>
</html>

再加上条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="./js2/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="app">

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <h1 class="text-center">购物车</h1>
                <div class="d-flex justify-content-center">
                    <button class="btn btn-danger" @click="handleLoad">加载购物车</button>
                    <button class="btn btn-success" @click="handleClear" style="margin-left: 20px">清空购物车</button>
                </div>

                <hr>
                <div v-if="shopping_car.length>0">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">商品id</th>
                            <th scope="col">商品名</th>
                            <th scope="col">商品价格</th>
                            <th scope="col">商品数量</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr v-for="item in shopping_car" :class="item.id%2>0?'table-success':'table-info'"  :key="item">
                            <th scope="row">{{item.id}}</th>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td>{{item.count}}</td>
                        </tr>
                        </tbody>
                    </table>

                </div>
                <div v-else>
                    <h3>购物车空空如也</h3>
                </div>

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


</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            shopping_car: []

        },
        methods: {
            handleLoad() {
                this.shopping_car = [
                    {id: 1001, name: '极光', price: '1024元', count: 1},
                    {id: 1002, name: '火麒麟', price: '1688元', count: 3},
                    {id: 1003, name: '雷神', price: '324元', count: 8},
                    {id: 1004, name: '盘龙', price: '648元', count: 10},]
            },
            handleClear(){
                this.shopping_car= []
            }
        }
    })

</script>
</html>

【二】v-for 可以循环的变量类型

# 1 可以循环 ：数字，字符串，数组，对象
# 2 循环时，拿到索引值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for循环</title>
    <script src="./js2/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
<div class="app">

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <h1 class="text-center">v-for循环数字</h1>
                <div class="d-flex justify-content-center">

                    <ul>
                        <li v-for="(item,index) in count">循环到得位置是：{{item}}，索引是：{{index}}</li>
                    </ul>
                </div>


                <hr>
                <h1 class="text-center">v-for循环字符串</h1>
                <div class="d-flex justify-content-center">

                    <ul>
                        <li v-for="(item,index) in str">循环到得位置是：{{item}}，索引是：{{index}}</li>
                    </ul>
                </div>

                <hr>
                <h1 class="text-center">v-for循环列表</h1>
                <div class="d-flex justify-content-center">
                    <div>
                        <p v-for="(item,index) in girls">第{{index}}号女孩，名是：{{item}}</p>
                    </div>


                </div>

                <hr>
                <h1 class="text-center">v-for循环对象</h1>
                <div class="d-flex justify-content-center">
                    <div>
                        <!--                        <p v-for="(value,key) in obj">key值为：{{key}},value值为：{{value}}</p>-->
                        <p v-for="value in obj">value值为：{{value}}</p>
                    </div>


                </div>

                <hr>

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


</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            count: 10,
            str: 'Hello world!',
            girls: ['凯特琳', '棉麻', '米娜'],
            obj: {name: '凯瑟琳', age: 25, height: 157, weight: 90, hobby: '抽烟,喝酒,烫头'}
        },
    })

</script>
</html>

【三】key值的解释

# vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）

# 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
页面更新之后，会加速DOM的替换（渲染）  增加了替换的效率
:key="变量"
    
如  <tr v-for="item in shopping_car" :class="item.id%2>0?'table-success':'table-info'"  :key="item">
        <th scope="row">{{item.id}}</th>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.count}}</td>
        </tr>

【四】数组,对象的检测与更新

# 1 数组或对象的值改了，但是页面没有变化 就需要如下操作
	-使用Vue.set(对象，对象key，对象value)
    -使用Vue.set(数组，数组的下标，数组value)
    
# 2 对数组来讲：
    # 可以检测到变动的数组操作：
        push：最后位置添加
        pop：最后位置删除
        shift：第一个位置删除
        unshift：第一个位置添加
        splice：切片
        sort：排序
        reverse：反转
    # 检测不到变动的数组操作：
        filter()：过滤
        concat()：追加另一个数组
        slice()：
        map()：
        
        
# 3 对于对象
	对象.属性=值  #如果属性之前不存在，也不会有响应式

Ⅶ 事件处理

【一】input 标签的事件

#  input 标签的事件
事件	         释义    
input	当输入框进行输入的时候 触发的事件
change	当元素的值发生改变时 触发的事件
blur	当输入框失去焦点的时候 触发的事件
focus   获得焦点，触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input 标签事件</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <h1>input标签事件-input</h1>
<!--     input 当输入框进行输入的时候 触发的事件  在控制台可以看见输入一个 控制台就输出一个-->
    <input type="text" v-model="input01" @input="handleInput">--->{{input01}}

    <h1>change标签事件-change</h1>
<!--    change	当元素的值发生改变时 触发的事件 变化后会在控制台输出提示  若是删除再输入相同内容 则不会提示-->
    <input type="text" v-model="change01" @change="handleChange">--->{{change01}}

    <h1>blur标签事件-blur</h1>
<!--    blur	当输入框失去焦点的时候 触发的事件  当输入框失去焦点的时候会在控制台输出提示-->
    <input type="text" v-model="blur01" @blur="handleBlur">--->{{blur01}}

    <h1>focus标签事件-focus</h1>
<!--    focus   获得焦点，触发事件  获得焦点的时候会在控制台输出提示-->
    <input type="text" v-model="focus01" @focus="handleFocus">--->{{focus01}}

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            input01: '',
            change01: '',
            blur01: '',
            focus01: ''
        },
        methods: {
            handleInput(event) {
                console.log(event.data)
            },
            handleChange() {
                console.log('变化了')
            },
            handleBlur() {
                console.log('失去焦点了')
            },
            handleFocus() {
                console.log('获得焦点')
            }
        }
    })

</script>
</html>

【二】过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤案例</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <input type="text" v-model="myText" @focus="handleFocus" @input="handleInput">
    <ul>
        <li v-for="item in newDataList">{{item}}</li>
    </ul>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf'],
            newDataList:[]

        },
        methods: {
            handleFocus() {
                if(this.newDataList.length==0){
                    this.newDataList = ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf']
                }

            },
            handleInput() {
                // 根据输入的值：myText，一个个的去dataList 中过滤，只剩下 字符串包含的 值
                var _this = this
                this.newDataList = this.dataList.filter(function (item) {
                    //坑：this指向问题   handleInput()方法里面写function方法  function里面的this就不是当前对象了
                    if (item.indexOf(_this.myText) >= 0) {
                        return true
                    } else {
                        return false
                    }

                })
            }
        }
    })


    // 1 数组过滤方法 filter: 匿名函数返回true，就保留，返回false就不保留
    // var l = ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf']
    // var new_l = l.filter(function (item) {
    //     return true
    // })
    // console.log(new_l)


    // 2 字符串的包含
    // var a = 'zhl1'
    // var b = 'zhl is handsome'
    // if (b.indexOf(a) >= 0) {
    //     console.log('在')
    // } else {
    //     console.log('不在')
    // }


</script>
</html>

相当于每更新一次输入框，就去datalist中过滤一次，然后把剩下的赋值给newdatalist

【三】es6的箭头函数写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数</title>

</head>
<body>

</body>
<script>
    // 1 正常函数
    // function demo01(){
    //     console.log('demo01')
    // }
    // demo01()  // 调用函数

    // 2 匿名函数
    // var f=function (){
    //     console.log('我是匿名函数')
    // }  //  匿名函数不赋值 相当于在代码一段中突然出现一个字母  会报错
    // f()

    //3 由于在函数内部，使用this,会有指向问题-->暂时先不研究-->箭头函数没有自己的this-->在箭头函数中使用this 指的是上一层的this
    // 无参数无返回值   function 去掉，() 和 函数体之间加个 =>
    // var f = () => {
    //     console.log('我是匿名函数')
    // }
    // f()

    // 4 有一个参数无返回值
    // var f = (a) => {
    //     console.log('我是匿名函数'+ a)
    // }
    // f('hjj')

    // 4.1 有一个参数  简写成
    // var f = a => {
    //     console.log('我是匿名函数' + a)
    // }
    // f('hjj')

    // 5 多个个参数无返回值,不能简写
    // var f = (a, b) => {
    //     console.log(b + a)
    // }
    // f(10, 11)

    // 6  多个参数，有返回值
    // var f = (a, b) => {
    //     return a + b
    // }

    // 需要用变量接受返回值 var res=f(10, 11)
    // 再打印出来console.log(res)

    // 可以简写成 console.log(f(10, 11))

    // 6.1  多个参数，有返回值,可以简写，   前提是：函数体内容很简单
    // var f = (a, b) => a + b
    // console.log(f(10, 11))

    // 7  一个参数，有返回值
    //  var f = a => a + 10
     var f = (a) => {
         return a + 10
     }
     console.log(f(10))


</script>
</html>

es6的箭头函数案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤案例</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">
    <input type="text" v-model="myText" @focus="handleFocus" @input="handleInput">
    <ul>
        <li v-for="item in newDataList">{{item}}</li>
    </ul>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf'],
            newDataList: []

        },
        methods: {
            handleFocus() {
                if (this.newDataList.length == 0) {
                    this.newDataList = ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf']
                }

            },
            handleInput() {
                // 根据输入的值：myText，一个个的去dataList 中过滤，只剩下 字符串包含的 值
                this.newDataList = this.dataList.filter(item => item.indexOf(this.myText) >= 0)
            }
        }
    })
</script>
</html>

Ⅷ 数据双向绑定

input标签的数据双向绑定

# 1 v-model 只针对于 input标签
	-双向数据绑定：变量变，页面变;页面变，变量变  
    # 在控制台修改后输出，就是修改后的   在页面修改输出后也是修改的
    
    -如果使用属性指令绑定 value，只有单向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for循环</title>
    <script src="./js2/vue.js"></script>

</head>
<body>
<div class="app">

    <p>用户名: <input type="text" v-model="username"></p>
    <p>密码: <input type="password" v-model="password"></p>
    <p><input type="submit" value="登录" @click="handleSubmit"></p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            username: '',
            password: ''
        },
        methods: {
            handleSubmit() {
                console.log(this.username)
                console.log(this.password)
            }
        }
    })

</script>
</html>

标签：es6,console,name,渲染,--,item,var,写法,log
From： https://www.cnblogs.com/zyb123/p/18349771

轮换挑选图片,补充 es6的对象写法,uniapp使用,class和style,条件渲染,列表渲染,input 标签的事件,过滤案例,es6的箭头函数写法,数据双向绑定

Ⅰ 轮换挑选图片

【一】方式一

【二】方式二

Ⅱ 补充 es6的对象写法

【一】修改变量，对象中得值，是否会发生变化-->取决于对象是什么类型：值类型引用类型

【二】总览

Ⅲ uniapp使用

【一】介绍

【二】下载hbuilderx

【三】hbuilderx步骤

【1】HBuilderX创建:

【2】安装uni-app vue3编译器

【3】编译成微信小程序端代码

【4】项目结构

【5】发行，进行云打包

【6】选择打包口，证书

【7】个人证书获取

【8】安装

Ⅳ class和style

Ⅴ 条件渲染

Ⅵ 列表渲染

【一】购物车小案例+bootstrap样式： v-for 指令循环

【二】v-for 可以循环的变量类型

【三】key值的解释

【四】数组,对象的检测与更新

Ⅶ 事件处理

【一】input 标签的事件

【二】过滤案例

【三】es6的箭头函数写法

Ⅷ 数据双向绑定

相关文章

赞助商

阅读排行

轮换挑选图片,补充 es6的对象写法,uniapp使用,class和style,条件渲染,列表渲染,input 标签的事件,过滤案例,es6的箭头函数写法,数据双向绑定

Ⅰ 轮换挑选图片

【一】方式一

【二】方式二

Ⅱ 补充 es6的对象写法

【一】修改变量，对象中得值，是否会发生变化-->取决于对象是什么类型：值类型 引用类型

【二】总览

Ⅲ uniapp使用

【一】介绍

【二】下载hbuilderx

【三】hbuilderx步骤

【1】HBuilderX创建:

【2】安装uni-app vue3编译器

【3】编译成微信小程序端代码

【4】项目结构

【5】发行，进行云打包

【6】选择打包口，证书

【7】个人证书获取

【8】安装

Ⅳ class和style

Ⅴ 条件渲染

Ⅵ 列表渲染

【一】 购物车小案例+bootstrap样式： v-for 指令循环

【二】v-for 可以循环的变量类型

【三】key值的解释

【四】数组,对象的检测与更新

Ⅶ 事件处理

【一】input 标签的事件

【二】 过滤案例

【三】es6的箭头函数写法

Ⅷ 数据双向绑定

相关文章

赞助商

阅读排行

【一】修改变量，对象中得值，是否会发生变化-->取决于对象是什么类型：值类型引用类型

【一】购物车小案例+bootstrap样式： v-for 指令循环

【二】过滤案例