Vue笔记包含基础的指令计算属性指令数据双向绑定原理

最新推荐文章于 2024-03-08 15:26:58 发布

优价实习

最新推荐文章于 2024-03-08 15:26:58 发布

阅读量108

点赞数

分类专栏： VUE学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44828588/article/details/115219769

版权

VUE学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.v-once:html不会再因为插值的改变改变，也就是之渲染一次，不会随着数据的改变而改变
2. v-for='itme in Array'
3.v-html="":如果插值中还有html标签，要用v-html指令来解析
4.v-text="":数据显示在页面，接受string
5.v-pre:把{{}}不做解析
6.v-cloak：cloak斗篷，再view解析前，有，解析后没有，防止页面闪动
7.v-bind:用于绑定一个或者多个属性值，像另外一个组件传递props值，还需要src、href动态绑定样式类，简写[:src='url']
v-bind:class='{key:value}'value可以是布尔值
 *绑定class的方式有两种 对象和数组  数组语法：class=['active','line']
8.绑定样式： v-bind:style={属性名:‘属性值’/变量}/v-bind:style=[元素->在data中定义元素为对象key:value
------------------------------------------------------------------------------------------------------------------
计算属性
1.compute:{}  在某些请况下比较好用，get:function()set function
methons和computed对比特点与优点:1.计算属性在多此调用只需要调用一次，如果计算结果不变，会将计算结果内部缓存，然后呢监听如果结果不变则继续直接
返回结果，不需要计算结果; methods却只要调用对次，效率低。
------------------------------------------------------------------------------------------------------------------
事件监听
1.v-on:简写：@click=’方法‘
传参问题:  *事件调用没有参数
        *事件定义时候，函数没有括号，但方法本省需要一个参数，这个时候，Vue默认将event传入到浏览器生成的事件
        *除了参数还要有event参数，abc event参数时，如果不加括号，默认将第一个参数为event。但是用括号传参数时，要用$event
2.v-on修饰符:
         *@click.stop组织冒泡==event.stopPropagation()
         *@click.prevent()==event.preventDefault()
         *@keyup监听所有案件，keyup.enter监听回车。
         *@click.once:事件只能触发一次
------------------------------------------------------------------------------------------------------------------
条件判断:v-if:布尔：决定当前节点是否需要被渲染出来
v-if和v-else
问题描述:在切换输入类型时，原先的input内容依然存在？解释：vue在进行DOM渲染时，由于VUE从性能的角度考虑，会尽可能的复用已经存在元素，而不是重
新渲染  解决:如果不希望input出现重复的问题，可以给input加key，如果key不同，他就不会复用。
虚拟Dom:先将dom节点缓存，是真是dom的映射，然后再将虚拟的dom渲染到浏览器
-------------------------------------------------------------------------------------------------------------------
v-show=true显示，
对比v-if和v-show:v-if再false时，包含v-if的元素就不会包含在dom中,而v-show只是增加display=none,只是不可见。所以在开发时，切换频率高用：
v-show，切换频率少的话，就用v-if
------------------------------------------------------------------------------------------------------------------
v-for:{item in Array} 遍历数组和对象
在使用v-for的时候最好加个key，因为1.和dom的diff算法有关，再虚拟DOM和真实的浏览器的对比，找到不同的，替换。如果没有key，那么就会把对应元素加入
并且依次修改后边的元素，这样子操作的元素就很多，效率很差。如果有key，先会取对比key，会一一对比，那么diff算法就可以通过key来找到目标节点，在正确
的位置插入新节点。即:key可以更加高效的更新DOM节点。
------------------------------------------------------------------------------------------------------------------
v-model 表单数据的双向绑定
原理:1.将数据的值给input的value  2.给input的绑定input事件，监听输入的值，并将这个值再方法中传入参数来赋值给我们的变量。也可以用于texteara

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"> </script>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
<div id="app">
    <span v-html="url">计数器</span>
    <button @click="up">+</button>
    <button @click="down">-</button>
    <img  v-bind:src="uimaUrl" alt="">
    <img  :src="uimaUrl" alt="">
    <h2 v-bind:class="{active:isactive,line:isline}">ss</h2>
    <button @click="change()">切换</button>
    <h2 :style="{color:color }">111111111</h2>
<!--    计算属性-->

    <h2>{{ totole}}</h2>
    <h2>{{ totole}}</h2> <h2>{{ totole}}</h2>
    <p v-if="s>90">优秀</p>
    <p v-if="s<90">量</p>
    <p>--------------------------------------------------------------------------------------------</p>
    <p>用户输入案例</p>
    <span v-if="isUser"><label for="username">用户账号 </label>
    <input type="text" id="username" placeholder="用户账号"></span>
    <span v-else><label for="email">用户邮箱 </label>
        <input type="text" id="email" placeholder="用户邮箱"></span>

    <button @click="change11($event)">切换</button>
    <input type="text" v-model="number">{{number}}

</div>
</body>

<script>
    // 1.v-once:html不会再因为插值的改变改变，也就是之渲染一次，不会随着数据的改变而改变
    // 2. v-for='itme in Array'
    // 3.v-html="":如果插值中还有html标签，要用v-html指令来解析
    // 4.v-text="":数据显示在页面，接受string
    // 5.v-pre:把{{}}不做解析
    // 6.v-cloak：cloak斗篷，再view解析前，有，解析后没有，防止页面闪动
    // 7.v-bind:用于绑定一个或者多个属性值，像另外一个组件传递props值，还需要src、href动态绑定样式类，简写[:src='url']
    // v-bind:class='{key:value}'value可以是布尔值
    //  *绑定class的方式有两种 对象和数组  数组语法：class=['active','line']
    // 8.绑定样式： v-bind:style={属性名:‘属性值’/变量}/v-bind:style=[元素->在data中定义元素为对象key:value
    // ------------------------------------------------------------------------------------------------------------------
    // 计算属性
    // 1.compute:{}  在某些请况下比较好用，get:function()set function
    // methons和computed对比特点与优点:1.计算属性在多此调用只需要调用一次，如果计算结果不变，会将计算结果内部缓存，然后呢监听如果结果不变则继续直接
    // 返回结果，不需要计算结果; methods却只要调用对次，效率低。
    // ------------------------------------------------------------------------------------------------------------------
    // 事件监听
    // 1.v-on:简写：@click=’方法‘
    // 传参问题:  *事件调用没有参数
    //         *事件定义时候，函数没有括号，但方法本省需要一个参数，这个时候，Vue默认将event传入到浏览器生成的事件
    //         *除了参数还要有event参数，abc event参数时，如果不加括号，默认将第一个参数为event。但是用括号传参数时，要用$event
    // 2.v-on修饰符:
    //          *@click.stop组织冒泡==event.stopPropagation()
    //          *@click.prevent()==event.preventDefault()
    //          *@keyup监听所有案件，keyup.enter监听回车。
    //          *@click.once:事件只能触发一次
    // ------------------------------------------------------------------------------------------------------------------
    // 条件判断:v-if:布尔：决定当前节点是否需要被渲染出来
    // v-if和v-else
    // 问题描述:在切换输入类型时，原先的input内容依然存在？解释：vue在进行DOM渲染时，由于VUE从性能的角度考虑，会尽可能的复用已经存在元素，而不是重
    // 新渲染  解决:如果不希望input出现重复的问题，可以给input加key，如果key不同，他就不会复用。
    // 虚拟Dom:先将dom节点缓存，是真是dom的映射，然后再将虚拟的dom渲染到浏览器
    // -------------------------------------------------------------------------------------------------------------------
    // v-show=true显示，
    // 对比v-if和v-show:v-if再false时，包含v-if的元素就不会包含在dom中,而v-show只是增加display=none,只是不可见。所以在开发时，切换频率高用：
    // v-show，切换频率少的话，就用v-if
    // ------------------------------------------------------------------------------------------------------------------
    // v-for:{item in Array} 遍历数组和对象
    // 在使用v-for的时候最好加个key，因为1.和dom的diff算法有关，再虚拟DOM和真实的浏览器的对比，找到不同的，替换。如果没有key，那么就会把对应元素加入
    // 并且依次修改后边的元素，这样子操作的元素就很多，效率很差。如果有key，先会取对比key，会一一对比，那么diff算法就可以通过key来找到目标节点，在正确
    // 的位置插入新节点。即:key可以更加高效的更新DOM节点。
    // ------------------------------------------------------------------------------------------------------------------
    // v-model 表单数据的双向绑定
    // 原理:1.将数据的值给input的value  2.给input的绑定input事件，监听输入的值，并将这个值再方法中传入参数来赋值给我们的变量。也可以用于texteara

    const app=new Vue({
        el:'#app',
        data:{
            isUser:true,
            s:70,
            res:'',
            message:'heelo',
            name:'maxuemimg',
            url:'<a href="#">dd</a>',
            isactive:true,
            isline:true,
            color:'red',
            uimaUrl:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1956622302,1895131241&fm=26&gp=0.jpg',
            list:[{
                id:'1',
                name:'we'

            },{
                id:'1',
                name:'we'

            },{
                id:'1',
                name:'we'

            },{
                id:'1',
                name:'we'

            }],
            number:0,

        },
        methods:{
            up:function(){
                this.number++
            },
            down:function(){
               this.number--
            },
            change:function(){
                this.isactive=!this.isactive
                this.color='green'
            },
            change11(){
                this.isUser=!this.isUser
            }

        },
        computed: {
            funllName: {
               set:function(){


               },get:function(){

                }
            },
            totole: function () {
                for (let i of this.list) {
                    this.res += i.id

                }
                console.log(111)
                return this.res
            },
        }
    })
</script>
</html>

优价实习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue笔记包含基础的指令计算属性指令数据双向绑定原理

1.v-once:html不会再因为插值的改变改变，也就是之渲染一次，不会随着数据的改变而改变2. v-for='itme in Array'3.v-html="":如果插值中还有html标签，要用v-html指令来解析4.v-text="":数据显示在页面，接受string5.v-pre:把{{}}不做解析6.v-cloak：cloak斗篷，再view解析前，有，解析后没有，防止页面闪动7.v-bind:用于绑定一个或者多个属性值，像另外一个组件传递props值，还需要src、href动态绑.
复制链接

扫一扫