欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue的使用

程序员文章站 2022-06-07 14:34:11
08.27自我总结 Vue的使用 一.挂载点 这样设置好了后这个vue中的内容会与对应的css选择器进行关联 注意点: 挂载点只遍历第一个匹配的结果 html与body标签不可以作为挂载点 挂载点的只一般就采用id选择器(唯一性) 二.插值表达式 :Vue中的msg变量发生变化的再没其他约数条件下m ......

vue的使用

一.挂载点

<!--导入vue-->
<script src="js/vue.js"></script>

<script>
    new vue({
        el:'ccs选择器'
    })
</script>

这样设置好了后这个vue中的内容会与对应的css选择器进行关联

注意点:

  • 挂载点只遍历第一个匹配的结果
  • html与body标签不可以作为挂载点
  • 挂载点的只一般就采用id选择器(唯一性)

二.插值表达式

html差值部分页面

<h1>{{msg}}</h1>

vue部分代码

<script>
    new vue({
        el:'h1'
        data:{
        msg:'插入的信息'
    }
    })
</script>

注意点:vue中的msg变量发生变化的再没其他约数条件下msg也会发送变化

里面值进行函数过滤

<h2>{{msg|函数名}}</h2> h2标签内值为msg进过函数处理后的返回值

三.约束变量渲染一次渲染

还是基于上述的html页面

<!--原html页面-->
<h1>{{msg}}</h1>

<!--进行约束设置,设置后一次性渲染,后面msg发送变化后里面内容不会发送改变-->
<h1 v-once="msg">{{msg}}</h1>

<h1 v-once="msg">{{msg+msg2}}</h1>
<!--一次性渲染,插值表达式中的任何一个变量被限制,整个结果就不可变-->

四.文本指令

1.v-text

<h2 v-text="msg"></h2>

h2内的标签中test就是由vue中传的msg变量的值,但是其中html标签不会被解析

里面传的值还能进行四则运算字符串等等的相关操作

2.v-html

<h2 v-html="html"></h2>
<--假设html变量为<a>ss<a>-->

h2标签会显示ss

html标签可被解析

五.属性指令

重点

属性指令:v-bind:属性名="属性值" => v-bind: 可以简写为 :

关于style的不同写法

写法一:

<!--1)变量:变量的值为字典-->
<div :style="my_style" class='test'></div>
<script>
    new vue({
        el:'.test'
        data:{
        my_style: {
                width: '100px',
                height: '100px',
                'background-color': 'cyan',
                borderradius: '50%'
            },
    }
    })
</script>

写法二:

<!--2)字典中的多个变量-->
<div :style="{width: w, height: h, background: b}"></div>
<script>
    new vue({
        el:'.test'
        data:{
            w: '50px',
            h: '50px',
            b: 'red',
    }
    })
</script>

关于class的写法

<!--class属性-->
<!--<div class="box blue"></div>-->
<div :class="c"></div>
<div :class="[c1, c2]"></div>
<div :class="[c1, 'blue']"></div>
<!--x为类名,是否生效有变量y(true|false)值决定-->
<div :class="{x: y}"></div>
<div :class="[{'box': true}, c2]"></div>


<script>
    new vue({
        el: '#app',
        data: {
            c: 'box blue',
            c1: 'box',
            c2: 'green',
            y: true,
        }
    })
</script>

六.事件指令

事件指令 v-on:事件名="函数" => v-on: 可以简写为 @

七.函数的创建

方法一

<script>
    new vue({
        el:'h1'
        data:{
        msg:'插入的信息'
    }
       methods: {
            函数名 () {
                函数体
            },
    })
</script>

方法二

<script>
    new vue({
        el:'h1'
        data:{
        msg:'插入的信息'
    }
       methods: {
            函数名:function () {
                函数体
            },
    })
</script>

方法三

<script>
    new vue({
        el:'h1'
        data:{
        msg:'插入的信息'
    }
       methods: {
            函数名:() => {
                函数体
            },
    })
</script>

注意点:这种写法,内部拿不到this(这里的this是指window)

八.事件指令传参和不传参的区别

<!--没有传值默认传 函数会接收到事件对象 -->
<div @click="btnclick1">{{ msg }}</div>

<!--方法()不会直接调用方法,而是在点击触发后进行传参,接收到的参数就是传入的参数-->
<div @click="btnclick2(1, msg)">{{ msg }}</div>

<!--一旦书写 方法() 就不再传入事件对象,通过 $event 手动传入事件对象-->
<div @click="btnclick3(msg, $event, $event)">{{ msg }}</div>

九.表单指令

<form action="">
    <!--表单指令:v-model="变量"-->

    <!--双向绑定:一个地方修改值,所有地方的数据都会被更新-->
    <div>
        <input type="text" v-model="info" name="usr">
        <input type="password" v-model="info" name="pwd">
        <p>{{ info | infofilter }}</p>
    </div>

    <div>
        <!--单选框:v-model="变量存放的是某个单选框的value值,代表该选框选中"-->
        男<input type="radio" name="sex" value="male" v-model="sex_val">
        女<input type="radio" name="sex" value="female" v-model="sex_val">
    </div>


    <div>
        <!--单独的复选框:v-model="true|false代表该选框是否选中"-->
        是否同意<input v-model="cb_val" value="yes" type="checkbox" name="agree">
    </div>

    <div>
        <!--群复选框:v-model="存放选中选框value的数组"-->
        <!--cbs_valrug如果传空数组会一个都不选,如果数组对应里面的value会勾选-->
        <!--cbs_valrug如果传true|false,里面的能容就表示要么全选要么都不选->
        男<input v-model="cbs_val"  value="male" type="checkbox" name="hobby">
        女<input v-model="cbs_val"  value="female" type="checkbox" name="hobby">
        不能说<input v-model="cbs_val"  value="others" type="checkbox" name="hobby">
        <p>{{ cbs_val }}</p>
    </div>

    <div>
        <input type="submit">
    </div>
</form>


<script>
    new vue({
        el: '#app',
        data: {
            info: '',
            sex_val: 'female',
            cb_val: 0,
            cbs_val: ["others"]  
        }
    })
</script>

十.条件指令

  • v-if:隐藏时不渲染,隐藏时在内存中建立缓存,可以通过key属性设置缓存的键
  • v-show:隐藏时用display:none渲染

使用:

<div class="box red" v-if="ture|flase" key="box_red"></div>  
<div class="box blue" v-show="ture|flase"></div>

接收的值只能是ture|flase,如果是0则是flase,如果是1则是ture
key属性可以对于在内存中名字进行设置,且f12你看不到key这个属性

关于内存的存储

  • localstorage.key名称:key值:永久缓存但是可以手动删除
  • sessionstorage.key名称:key值:临时缓存关闭页面或者关闭浏览器重新打开就会消失

关于内存中的调用

  • localstorage.key名称
  • sessionstorage.key名称