昨日内容回顾

前端发展历史
- vue react
- 谷歌flutter， Dart语言
- uni-app:小公司
  - vue：3.x2.x
  - 3.x ====>ts
  - 2.x ====>js
vue
- 渐进式
- MVVM
  - M层：model，数据层，js
  - V层：view，视图层，html，css
  - VM层：viewModel层，负责M和V的交互
- 组件化开发，单页面应用
  - 组件有自己的html，css，js
  - 在index.html 中做组件的替换，实现单页面应用spa
- js框架，源代码下载引用，cdm引用
- new Vue({el:,data:,})
插值语法
- 字符串，数字，布尔，数组，对象，标签
- 三目运算符 条件?符合条件:不符合条件
指令系统
- 文本指令：v-text，v-html，v-show，v-if
- 事件指令：v-on:事件名='函数'
  - 简写：@click=’函数’
  - 函数传参
- 属性指令：v-bind:属性名='变量'
  - 简写：:属性名=’变量’

今日学习内容

一、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;
        }
        .yellow{background-color: yellow}
        .green{background-color: green}
        .size{
            font-size: 40px;
        }

    </style>
</head>
<body>
<div id="app">

          style和class
        <h1>class的使用</h1>
        <div :class="classStr">
            我是classObj的div
        </div>
         <div :class="classList">
            我是classList的div
        </div>
        <div :class="classObj">
            我是classObj的div
        </div>

        <h1>style的使用</h1>
        <div :style="styleStr">
            我是styleStr的div
        </div>
        <div :style="styleList">
            我是styleList的div
        </div>
        <div :style="styleObj">
            我是styleObj的div
        </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
          // class 的字符串用法
            classStr:'red',
            //class的数组写法，因为类本身可以放多个，用数组最合适
            classList:['red'],
            //class的对象
            classObj:{red:true, size:false},
            //style的字符串写法，以后不好改
            styleStr:'background-color: green; font-size:100px',
            //style的数组写法
            //styleList:[{'background-color': 'green'}, {'font-size': '80px'}]
            styleList:[{backgroundColor: 'green'}, {fontSize: '80px'}],
            //style的对象写法
            styleObj:{backgroundColor: 'blue', fontSize: '150px'},
        }
    })


</script>
</html>

注意

 	如果属性是有“-”则必须以字符串形式。如果属性是单个单词没有“-”，则可以不用字符串形式。针对有“-”我们可以采用驼峰命名的方式就不用以字符串形式了。

效果

二、条件渲染

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

v-if='布尔值/运算完是布尔值'
v-else-if='布尔值/运算完是布尔值'
v-else

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>不及格</div>

</div>

script代码

 var vm = new Vue({
        el: '#app',
        data: {
            score: 98
        }
    })

注意

python 中的and or 在这里是不适用的。
只能用 && 或者 || 表示 and

三、列表渲染

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
           <div class="container-fluid">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <button @click="handleClick" class="btn btn-info" style="margin-top: 20px">加载购物车</button>
                    <div v-if="goodList.length>0" style="margin-top: 20px">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>商品id</th>
                                <th>商品名</th>
                                <th>商品价格</th>
                                <th>商品数量</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="good in goodList" :key="good.id">
                                <td>{{good.id}}</td>
                                <td>{{good.name}}</td>
                                <td>{{good.price}}</td>
                                <td>{{good.count}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div v-else class="text-center" style="font-size: 20px; margin-top: 20px">购物车空空如也~~~</div>
                </div>
            </div>
        </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: []
        },
        methods: {
            handleClick(){
                // 假设去后端加载数据

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


</script>
</html>

1. v-for 循环（数组、字符串、数字、对象）

`v-for="a in obj"`

1.如果是数组：a就是数组的一个个元素
2.如果是数字：a就是从1开始的一个个数字
3.如果是字符串：a就是一个个字符
4.如果是对象：a就是一个个value值

`v-for="(a,b) in obj"`

1.如果是数组：a就是数组一个个元素，b就是索引
2.如果是数字：a就是从1开始的一个个数字，b就是索引
3.如果是字符串：a就是一个个字符，b就是索引
4.如果是对象：a就是一个个value值，b就是一个个key值

注意

每次循环的标签上，一般都会带一个属性	 :key='值必须唯一'
    eg: :key='循环的每个对象.id'
 作用：'为了加速虚拟dom的替换'

2.数组的检测与更新

body代码

<div id="app">

        <h1>数组的检测与更新</h1>
        <button @click="handleClick">点我追加惊喜</button>
        <hr>
        <button @click="handleClick1">点我追加一批惊喜</button>
        <hr>
        <button @click="handleClick4">点我修改数组页面变化</button>
        <hr>
        <p v-for="girl in girls">{{girl}}</p>

        <h1>对象的检测与更新</h1>
        <button @click="handleClick2">点我追加美食</button>
        <hr>
        <button @click="handleClick3">点我追加美食---解决方案</button>
        <hr>
        <p v-for="(value, key) in obj">Key:{{key}}------Value:{{value}}</p>


</div>

script代码

 var vm = new Vue({
        el: '#app',
        data: {
            girls:['刘亦菲', '刘诗诗', '肖战', '于文文', '王一博'],
            obj:{'name':'517花甲粉丝', 'num': 222},
        },
        methods: {
            handleClick() {
                this.girls.push('肖战')
            },
            handleClick1() {
                var a = this.girls.concat(['于文文', '薛凯琪', 'Ella'])
                console.log(a)
            },
            handleClick2() {
                this.obj.price = '180'  // 监控不到变化
                console.log(this.obj)
            },
            handleClick3() {
               Vue.set(this.obj,'price',18)  // 监控到变化了
            },
            handleClick4(){
                Vue.set(this.girls,0,'晨哥')
            }
        }
    })

四、双向数据绑定

input标签，v-model：数据双向绑定

使用 属性指令绑定 :value='变量' 是数据的单向绑定
使用 v-model="name" ：数据双向绑定

body代码

<div id="app">
    <h1>数据双向绑定</h1>
    <p>用户名: <input type="text" v-model="name"></p>
    <p>密码: <input type="password" v-model="password"></p>
    <button @click="handleSubmit">提交</button> <span v-if="" style="color: red">{{err}}</span>

</div>

script代码

 var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            err:''
        },
        methods: {
            handleSubmit() {
                console.log(this.name, this.password)
                this.err='用户名密码错误'
            }
        }

    })

五、事件处理

事件绑定 v-on:事件名=’函数’—》@事件名=’函数’

input 标签也有很多事件

1.blur:失去焦点
2.change：发生变化触发
3.input：输入触发

body代码

<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>

script代码

var vm = new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: ''
        },
        methods: {
            handleBlur() {
                console.log('失去焦点了，触发了blur事件', this.name1)
            },
            handleChange() {
                console.log('前后发生变化，触发了change事件', this.name2)
            },
            handleInput() {
                console.log('输入了内容，触发了input事件', this.name3)
            }
        }

    })

1.过滤案列

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>

script代码

var vm = new Vue({
        el: '#app',
        data: {
            search:'',
            dataList:['肖战','肖战和王一博', '王一博', '王一博喜欢肖战吗？', '博君一肖是真的', '肖战玉骨遥', '王一博风起洛阳'],
            newdataList:['肖战','肖战和王一博', '王一博', '王一博喜欢肖战吗？', '博君一肖是真的', '肖战玉骨遥', '王一博风起洛阳'],
        },
        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)
            }
        }


    })

补充知识:内置的数组过滤方法

var l = ['肖战','肖战和王一博', '王一博', '王一博喜欢肖战吗？', '博君一肖是真的', '肖战玉骨遥', '王一博风起洛阳']

// filter数组内置的，需要传一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行
// 匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃
l = l.filter(function (item){
    console.log('进来一个值：', item)
    return false
})
console.log(l)

2.判断子字符串是否在字符串中

var s = 'xxaxxx'
var a = 'a'
console.log(s.indexOf(a)>=0)

3.es6模板字符串 “ 对象写法箭头函数

1.匿名函数
var f = function(){
    console.log('打印了')
}
2.不带参数的箭头函数
var f = () =>{
    console.log('打印了')
}
3.带一个参数，没有返回值的箭头函数
var f = name =>{
    console.log('打印了', name)
}
4.多个参数，没有返回值
var f = (name, age) =>{
    console.log('打印了', name, age)
}
5.带一个参数，有返回值，函数体代码只有一行的话就可简写，多行就不要简写了。
var f = name =>{
    return name + 'nb'
}
var f = name => name + 'nb'

有什么用?1.简洁  2.箭头函数没有自己的this，会用上一层的this

箭头函数和匿名函数this区别

 无外部Vue类实例化对象:
    
    var f = function () {
        console.log('匿名函数的this', this)
    }
    var f1 = () => {
        console.log('箭头函数的this', this)
    }
    
f()
f1()

'结果都是windows对象，因为他们上一层对象是windows'

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

 obj.f()
 obj.f1()
'结果一个匿名函数是当前对象的this，二箭头函数没有自己的this，只能往外层找，外层没有，就找windows对象的this'

2.事件修饰符

1.	.stop	只处理自己的事件，不向父控件冒泡，在子控件上处理。
2.	.self	只处理自己的事件，子控件冒泡的事件不处理，在父控件上处理。
4.  .prevent 阻止a链接的跳转
5.  .once 	事件只会触发异常（使用于抽奖页面）

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>

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('恭喜你，秒到了')
            }
        }

    })

3.按键修饰符

body代码

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


</div>

script代码

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

    })

注意

如果在:keyup后面不加enter的话就要从浏览器页面中code中判断用户是否按了回车键。加了，就不用再做判断。

原文地址：http://www.cnblogs.com/bjyxxc/p/16826506.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性

学习python-Day79

昨日内容回顾

今日学习内容

一、style和class

注意

效果

二、条件渲染

body代码

script代码

注意

三、列表渲染

1. v-for 循环（数组、字符串、数字、对象）

v-for="a in obj"

v-for="(a,b) in obj"

注意

2.数组的检测与更新

body代码

script代码

四、双向数据绑定

body代码

script代码

五、事件处理

body代码

script代码

1.过滤案列

body代码

script代码

补充知识:内置的数组过滤方法

2.事件修饰符

body代码

script代码

3.按键修饰符

body代码

script代码

注意

排行榜展示

标签

模型

`v-for="a in obj"`

`v-for="(a,b) in obj"`