Vue 基本属性 之远离傻逼

Vue基本属性

1.class 与 style 的使用

<style>
    .box_red{
        background: red;
        height: 100px;
    }
    .box_blue{
        background: blue;
        height: 100px;
    }
    .font_size{
        font-size: 40px;
    }
</style>
​
<body>
<div id="app">
    <div :class="cls">看看效果</div>
    <div :style="sty_obj">瞅一瞅style效果</div>
</div>
</body>
​
​
<script>
    let vu = new Vue({
        el:'#app',
        data:{
        // :class 的使用
            
        // cls: 'box_red'
        // cls:['box_red',]
        // cls:{'box_red':false, 'font1':true},  // vu.cls.box_red=true
​
        // style的使用
​
            // sty_obj:'font-size: 50px'
            // sty_obj:''                 // 字符串  vu.sty_obj = 'background: red'
            // sty_obj:[{background:'red'},]   // 数组 vu.sty_obj.push({'font-size':'50px'})
            sty_obj: {'background': 'green'}   //对象 Vue.set(vu.sty_obj, 'fontSize', '50px')
        }
    })
</script>
​
# 注意  关于style 的对象添加值，属性需要写成驼峰体

2.条件渲染

  • v-if

  • v-else-if

  • v-else

<body>
<div id="app">
    <div>
        <h1>条件渲染</h1>
        <p v-if=" show ==1 ">满足条件1</p>
        <p v-else-if="show ==2 ">满足条件2</p>
        <p v-else-if=" show ==3 ">满足条件3</p>
        <p v-else>其他</p>
        
        <h1>length的使用</h1>
        <div v-if="l.length>0">length</div>
    </div>
</div>
</body>
​
<script>
    let vu = new Vue({
        el:'#app',
        data:{
            show:1,
            l:[],  
        }
    })
</script>

image-20210713160144116

3.v-if+v-for控制购物车显示

<div id="app">
<div>
<table class="table">
    <h1>购物车</h1>
    <button class="btn btn-info " @click="handlerClick">展示购物车信息</button>
    <tr>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
    </tr>
    <br>
​
    <tr v-if="shopping.length == 0">
        <td>信息暂无</td>
        <td>信息暂无</td>
        <td>信息暂无</td>
    </tr>
​
    <tr v-if="shopping.length !=0" v-for="good,index in shopping">
        <td>{{index}}</td>
        <td>{{good.name}}</td>
        <td>{{good.price}}</td>
    </tr>
​
</table>
</div>
​
</div>
let vu = new Vue({
        el:'#app',
        data:{
            shopping:[],
        },
        methods:{
            handlerClick(){
                this.shopping = [{'name': '飞机', price: 100000},
                {'name': '坦克', price: 80000},
                {'name': 'python入门', price: 100},
                ]
                // alert(123)
            },
        },
    })

4 v-for遍历

遍历字典

<div>
    <div v-for="values,key in dic" :index="index"><h1>{{key}}:{{values}}</h1></div>
</div>
​
​
​
data:{
            dic:{4:'a', 5:'b', 6:'c'},
        },
        
# 结果
4:a
5:b
6:c
        

另一种写法

#给标签加一个标识:index="key"，是因为vue的diff算法，便于更新
<div v-for="values,key in dic" :index="key"><h1>{{key}}:{{values}}</h1></div>
​
1 vue中涉及到循环，通常能看到，:key="item"
    <p v-for="item in 4" :key="item">
          <h3>{{ item }}</h3>
    </p>
    
2 vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度
​
​

5 数组更新与检测

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
​
# 有时候修改了页面的某一数据，但是页面没有变化，使用以下方式，重新修改值。
# 一定会触发dom的比较，如果有数据变了。页面没变，使用该方式赋值
Vue.set(vm.class_obj,'font20',true)

6 过滤案例

#这里还介绍了一个箭头函数，使书写较为简便

# 箭头函数
    //数组过滤的使用(1)
    var ages = [32, 33, 16, 40,8,9,17,18];
    var ages_new=ages.filter(function (item) {
        // console.log(item)
        return item >= 18
​
    })
    console.log(ages_new)
    
    
    // 使用箭头函数(es6的语法，箭头函数)
    var ages = [32, 33, 16, 40, 8, 9, 17, 18];
    var ages_new = ages.filter(item => {
        return item >= 18
    })
    console.log(ages_new)
    
一般格式
  function f(a,b) {
    
     }
     相当于
     (a,b)=>{    
     }
<div id='app'>
    <input type="text" @input="changeData" v-model="search">
    <hr>
    <p v-for="value in new_data_list">{{value}}</p>
</div>   
   
   
    var vm = new Vue({
    el: '#app',
    data: {
​
            search: '',
            data_list: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            new_data_list: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
​
        },
        methods: {
            changeData() {
                console.log(this.search)
                this.new_data_list = this.data_list.filter(item => {
                    return item.indexOf(this.search) >= 0
                })
            },
        }
​
    })

事件修饰符

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
# 拓展
.passive 告诉浏览器你不想阻止事件的默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

  • 小练习

 input，输入一条，点击增加按钮，下方实时显示
 
 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
​
<label for="">练习打字: <input type="text" v-model="word_input"></label>
<button class="btn btn-info" @click="handlerClick">打印</button>
​
    <br>
<div v-for="word in word_show">{{word}}</div>
</div>
</body>
​
<script>
    var vu = new Vue({
        el: '#app',
        data: {
            word_input:'',
            word_show:[]
​
        },
        methods:{
           handlerClick(){
               // console.log(this.word_show[0], typeof this.word_input)
               this.word_show.push(this.word_input)
                this.word_input = ''
            }
        }
​
    })
</script>
</html>



posted @ 2021-07-13 20:23  代码歌  阅读(250)  评论(0)    收藏  举报