Vue

最新推荐文章于 2023-01-18 21:14:20 发布

Echo-Raiser

最新推荐文章于 2023-01-18 21:14:20 发布

阅读量178

点赞数 1

本文链接：https://blog.csdn.net/m0_51756990/article/details/113407265

版权

Vue

Mustache语法

变量/表达式

显示数据列表v-for

<body>
    <div id="app">
        <p>{{message}}</p>
        <ul>
            <li v-for="item in details">{{item}}</li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                details:['royan','eddy','loudy']
            }
        })
    </script>
</body>

http://zh.wikipedia.org/wiki/MVVM

v-once只渲染一次，不改变

conputed属性

只执行一次，如果没有改变

set,get

一般不用set
简写方式

computed:{
                fullmessage:{
                get:function(){
                    return this.message1+' '+this.message2
                },
                // set一般不写，computed大多数时候是只读属性
                set:function(newvalue){
                    console.log("----"+newvalue);
                    const values=newvalue.split(' ')
                    this.message1=values[0];
                    this.message2=values[1];
                }
                } 
            } 
            //一般只写
            // fullmessage:function(){
            //         return this.message1+' '+this.message2
            //     }

V-on绑定事件

参数传递

<div id="app">
        <button @click="click1">btn1</button>
        <button @click="click2(123)">btn2.1</button>
        <button @click="click2()">btn2.2</button>
        <!-- 没有传参数时参数是undefined -->

        <button @click="click3">btn3</button>
        <!-- 传事件event -->

        <!-- 获取浏览器参数的event对象：$event ,否则event被当作变量-->
        <button @click="click4('abc',$event)">btn4</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            methods:{
                click1(){
                    console.log("click1");
                },
                click2(abc){
                    console.log(abc);
                },
                click3(event){
                    console.log(event);
                },
                click4(abc,event){
                    console.log(abc+'-----'+event);
                }
            }
        })
    </script>

修饰符

1、@click.stop阻止事件冒泡

2、 .prevent阻止表单地自动提交

3、键盘监听事件

.enter回车触发
.字符的ASCII码特定按键
.once只触发一次回调事件

 <div id="app">
        <!-- 1、@click.stop,,.stop阻止冒泡 -->
        <div @click="divclick">
            <p>hhhhhh</p>
            <button @click.stop="btnclick">btn1</button>
        </div>

        <!-- 2、阻止表单的提交 -->
        <form action="">
            <input type="submit" value="submit" @click.prevent='submitclick'>
        </form>
        <!-- 3、监听特定的keyup -->
        <!-- 键别名enter -->
        <input type="text" name="" id="text1" @keyup.enter="keyupclick">
        <!-- 键的码 -->
        <input type="text" name="" id="text2" @keyup.65="keyupclick">
        <!-- 4、只能触发一次 -->
        <button @click.once="btnclick">click only once</button>
    </div>

v-if-else

登录案例

虚拟dom改变时，会尽可能考虑复用之前的元素，检测不同的来修改，不修改用户输入
已经输入了一部分后，change后不会清除已经输入的内容
指定不同的key，则会清除已输入内容，不再复用
key相同时则会复用

 <!-- 虚拟dom改变时，会尽可能考虑复用之前的元素，检测不同的来修改，不修改用户输入的内容 -->

    <!-- 已经输入了一部分后，change后不会清除已经输入的内容 -->
    <!-- 指定不同的key，则会清除已输入内容，不再复用 -->
    <!-- key相同时则会复用 -->
    <div id="app">
        <span v-if="ischange">
            <label for="text_login">用户账号</label>
            <input type="text" name="" id="text_login" placeholder="账号登录" key="id_login">
        </span>
        <span v-else>
            <label for="mail_login">用户邮箱</label>
            <input type="text" name="" id="mail_login" placeholder="邮箱登录" key="mail_login">
        </span>
        <button @click="ischange=!ischange">click to change</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                ischange:true
            }
        })
    </script>

v-show

显示与隐藏切换频繁时用v-show,只有一次切换时用v-if,一般情况下都用v-if
v-if=false时，element不会在dom中存在
v-show=false时，只是element的样式变为了display:none

<div id="app">
        <button @click='showchange'>v-show</button>
        <h2 v-show='isShow'>v-show为false时只是把样式改为display：none</h2>
        <button @click='ifchange'>v-if</button>
        <h2 v-if='isIf'>v-if内容为false时不会在dom中存在</h2>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                isShow: true,
                isIf: true
            },
            methods:{
                showchange(){
                    this.isShow=!this.isShow
                },
                ifchange(){
                    this.isIf=!this.isIf
                }
            }
        })
    </script>

数组对象的遍历方法

in 取到的数组下标
of 取到的是数组对象

data:{
						books:[
                    {
                        id:1,
                        name:'《数据库原理》',
                        date:'2001-2',
                        price:59.00,
                        count:10
}                    }]
}
computed:{
                totalPrice(){
                    let totalPrice=0
                    // for(let i=0;i<this.books.length;i++){
                    //     totalPrice+=this.books[i].count * this.books[i].price
                    // }
                    // return totalPrice

                    //此处i是索引值
											 let totalPrice=0		
                     	 for(let i in this.books){
                       totalPrice+=books[i].price*books[i].count
                       }
                       return totalPrice

                    //item取到的是数组内的对象
                    let totalPrice=0
                    for(let item of this.books){
                       //console.log(item);
                        totalPrice+=item.price*item.count
                    }
                    return totalPrice
                }
            }

filter

filter的回调函数必须返回一个Boolean值
当返回为false时会被过滤

const lists=[100,199,88,101,100,180,187];
        let newarr=lists.filter(function(n){
            return n>100
        })
        console.log(newarr);

map

对数组进行统一的操作

//map函数
        //对数组进行统一操作
        let newarr2 = newarr1.map(function(n){
            return n*2
        })
        console.log(newarr2);

reduce

汇总数组内容

 //reduce函数
        // 对数组中的所有内容进行汇总
        const list2=[1,2,3,4,5]
        let total = list2.reduce(function(preValue,n){
            return preValue+n
            // return 10
        },0)
        console.log(total);
        // preValue 0 n 1
        // preValue 1 n 2
        // preValue 3 n 3
        // preValue 6 n 4
        // preValue 10 n 5
        // preValue 15

v-model

表单内容
v-model与data里的message是双向绑定，都会更改

text

 <!-- v-model与data里的message是双向绑定，都会更改 -->
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:"hello"
            }
        })
    </script>

radio

 <div id="app">
        <!-- 此时可以省略name属性，v-model可以保证二者选一 -->
        <label for="male">
            <input type="radio" name="sex" id="male" value="男" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio" name="sex" id="female" value="女" v-model="sex">女
        </label>
        <h2>您选择的是{{sex}}</h2>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                sex:"女"
            }
        })
    </script>

checkbox

boolean值接收单选的内容，数组接收多选的内容

<!-- checkbox单选 -->
        <!-- boolean值 -->
        <label for="agreement">
            <input type="checkbox" name="" id="agreement" v-model="isAgree">同意
        </label>
        <h2>您选择是否同意协议{{isAgree}}</h2>
        <button :disabled='!isAgree'>下一步</button>

        <!-- checkbox多选 -->
        <!-- 数组 -->
        <br>
        社交软件
        <input type="checkbox" name="" id="" value="QQ" v-model="applictions">QQ
        <input type="checkbox" name="" id="" value="微信" v-model="applictions">微信
        <input type="checkbox" name="" id="" value="微博" v-model="applictions">微博
        <input type="checkbox" name="" id="" value="抖音" v-model="applictions">抖音
        <h2>applications:{{applictions}}</h2>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                isAgree:false,
                applictions:[]
            }
        })
    </script>

select下拉表单

<div id="app">
        <!-- 单选 -->
        <select name="" id="sel1"  v-model="fruit1">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="橙子">橙子</option>
            <option value="橘子">橘子</option>
        </select>
        <h2>您选择的水果是：{{fruit1}}</h2>

        <!-- 多选，ctrl多选，multiple设置 -->
        <select name="" id="sel2"  v-model="fruit2" multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="橙子">橙子</option>
            <option value="橘子">橘子</option>
        </select>
        <h2>您选择的水果是：{{fruit2}}</h2>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                fruit1:"苹果",
                fruit2:[]
            }
        })
    </script>

v-model修饰符

.lazy

默认情况下 input中输入的内容一旦改变data中就会改变
.lazy让数据在回车或失去焦点时才会更新

<!-- .lazy在失去焦点或回车时才会更新 -->
        <input type="text" v-model.lazy="message">
        {{message}}

.number

输入的内容默认当作字符串，.number在输入数字时当作数字

<!-- .number -->
        <input type="text" name="" id="" v-model.number="age">
        <h2>{{age}}----{{typeof(age)}}</h2>
        <!-- 不加.number输入数字是String类型 -->

.trim去掉内容首尾多余的空格

<!-- .trim去空格，只是去除了内容首尾的多余空格，即内容左右两边的空格 -->
        <input type="text" v-model.trim="name">
        <h2>{{name}}</h2>

Echo-Raiser

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue

VueMustache语法变量/表达式显示数据列表v-for<body> <div id="app"> <p>{{message}}</p> <ul> <li v-for="item in details">{{item}}</li> </ul> </div> <script src="./j
复制链接

扫一扫