vue2 学习笔记

最新推荐文章于 2024-08-12 20:41:59 发布
最新推荐文章于 2024-08-12 20:41:59 发布
阅读量443 收藏 2
点赞数
分类专栏： web前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaobafacai/article/details/77952285
版权
本文详细探讨了Vue2的关键特性，包括实例方法、生命周期属性、计算属性、事件绑定、样式绑定以及组件系统。讲解了如何解决闪烁问题，使用v-model实现双向数据绑定，并介绍了组件间的通信方法，如父组件向子组件传递数据和子组件向父组件发送信息。此外，还涉及到了自定义指令、过滤器和watcher的使用，以及前端包管理器Bower在Vue项目中的应用。
摘要由CSDN通过智能技术生成
> 慢慢增加，慢慢从有道迁过来 #### 绑定和渲染 1. 数据绑定 > {{message}}

只绑定一次 {{*message}} 2. 双向绑定 > {{message}} 3. 绑定表达式 > {{message?message:”init data”}} 4. 绑定HTML标签 >
5. v-show(操作的是样式，不支持template) >
hello
6. v-if(操作的是DOM) >
world
7. v-else(跟在v-if或v-else后面) 8. v-for >
  • {{item}}
  • {{index}}{{item}}
  • {{ index }}. {{ key }} : {{ value }}
    1. v-bind
      link
    实例方法
    1. 在实例创建后，挂载以前不存在的属性，是不会刷新视图的
    2. vm.$el–>是一个HTML元素节点，即vm的el属性
    3. vm.$data–>可以直接更改对象数据
    4. vm.$watch()–>监听数据变化
    生命周期属性
    1. created -> 先实例化，在实例化后(检测el)
    2. vm.$mount('#app') -> 手动挂载实例
    3. beforeCompile -> 开始编译之前
    4. compiled -> 编译完成之后
    5. ready -> 插入文档后
    6. vm.$destroy() -> 手动销毁实例
    7. beforeDestroy -> 将要销毁
    8. destroyed -> 销毁实例
    计算属性
    computed:{
    sum:function(){
        return this.price*this.count
    }
}

    双向绑定，在一个input里面写count，最终价格实时更新在视图

    computed:{
    sum:{
        get(){
            return this.price*this.count
        },
        set(val){
            this.price = val
        }
    }
}
    解决闪烁
    1. <div v-text="message"></div>
    2. 推荐用 ↓
    [v-cloak]{
    display:none;
}

<div v-cloak>
    {{message}}
</div>
    事件绑定
    1. <div v-on:click="add"></div> <div @click="add"></div>
    2. 需要传参的时候 add后面要跟()，即add(1,$event,2)
    methods:{
    add:function(e){
        console.log(e)
    }
}
    1. 删除数组元素
    remove:function(book){
    this.books.$remove(book)
}
    1. 阻止冒泡
      <div @click.stop="child">child</div>
    2. 阻止默认动作
      <div @click.prevent="child">child</div>
    3. 事件只绑定在自己身上
      <div @click.self="child">child</div>
    4. 键盘事件
      @keyup.enter="method"
    5. 延迟事件
      @keyup="make | debounce 1000" 单位是毫秒
    6. 限制条数和从第几条开始显示
      v-for="arr in arr1 | limitBy 3 2"
    7. 过滤数据
        v-for="arr in arr1 | filterBy 'zfpx1'" //默认是从所有属性中筛选
    v-for="arr in arr1 | filterBy 'zfpx1' in 'name' " //指定从哪个属性中进行筛选
    1. 排序
    v-for="arr in arr1 | orderBy 'name' -1" -> 倒序
    样式绑定
    1. 优雅绑定 :class->动态绑定
      • 普通,样式名 <div :class="class1">123</div>
      • 对象语法 <div :class="{class1:true,class2:false}">123</div>或者直接放个对象进去:class="classObject"(classObject:{‘bg-danger’:true,’text-primary’:true})
      • 数组绑定 <div :class="[class1,class2]">123</div> 数组里面的元素渲染到页页上去的字符串

        • -

    watch

    用于监测数据变化 

     watch:{
    'name':function(val,oldVal){
        alert('新值是：'+val+' 旧值是：'+oldVal)
    }
}

    V-model

    1. v-model.trim -> 清除前后空格
    2. v-model.number -> 把输入内容转成数字
    3. v-model.lazy -> 把同步输入框的值与数据转变为在change事件中同步
    4. 复选框 -> model里面是一个数组

      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      <br>
      <span>checked names: {{ checkedNames }}</span>
    5. 单选框 -> model里面是一个字符串

      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
      <span>Picked:{{ picked }}</span>
    6. 单选列表 -> model里面是一个字符串
        <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected:{{ selected }}</span>
    1. 多选列表 -> 绑定在一个数组
        <select v-model="multiselected" multiple style="width: 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>选中的{{multiselected}}</span>

    组件

    1. 注册全局组件

      Vue.component('my-component', {
  // 选项
})

//-------------------------------------
<div id="example">
  <my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})
//---------------------------------------
    2. 局部组件

      var Child = {
      template:'<div>A custom component!</div>'
      };
      new Vue({
      el:'#app',
      components:{
      'my-component':Child
      }
      })

    computed 计算属性

    1. 有一个get()和set()方法，默认是get

    vm.$el -> 指一个原生的DOM元素
    vm.$data -> 就是实例的data属性
    vm.$mount('#box') -> 手动挂载实例
    vm.$options -> 自定义的属性
    vm.$destroy -> 销毁对象
    vm.$log() -> 查看现在数据的状态

    过滤器

    1. debounce -> 延迟执行（自带）
    @click="show | debounce 2000" //延迟2秒执行
    1. limitBy（数组里面用）
    v-for="val in arr | limitBy 2 3"  //取2个从3开始
    1. filterBy -> 过滤
    v-for="val in arr | filterBy 'o' " // 过滤，只取包含'o'的项
// 可以和v-model结合起来用，比如简单的数据搜索
    1. orderBy -> 排序
    v-for="val in arr | orderBy [按什么排] 1" //正序
v-for="val in arr | orderBy [按什么排] -1"  //倒序
    1. json -> 相当于JSON.stringify()
    2. 自定义过滤器
    Vue.filter(name,function(){

});

// 自定义一个个位数转两位数的过滤器
Vue.filter('toDouble',function(input){
    return input<10?'0'+input:''+input;
})

// 接收参数的过滤器
Vue.filter('toDouble',function(input,a,b){
    alert(1)
    alert(2)
    return input<10?'0'+input:''+input;
})

// timestamp转具体时间的过滤器
Vue.filter('date',function(input){
    var oDate = new Date(input)
    return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()
})

    自定义指令

    Vue.direction()

// 只是 v-red
Vue.direction('red',function(el){
    // el指原生DOM元素
    el.style.background = 'red'
})   //v-red

// v-red='msg'
Vue.direction('red',function(el,msg){
    // el是原生DOM元素，msg是传进来的参数,是一个Ojbect 
    el.style.background = 'red'
    console.log(msg.value)  //指参数的值
})

    监听数据变化

    vm.$watch('a',function(){  //浅度监视
    alert('变化了')
})

vm.$watch('a',function(){  //深度监视
    alert('变化了')
},{deep:true})

    bower(前端包管理器)

    • npm install bower -g
    • bower --version
    • bower install 包名 bower install vue#1.0.28
    • bower uninstall 包名
    • bower info 包名 ->该包的信息

    vue组件

    • 定义组件
    1. 全局组件
    var A = Vue.extend({  
            template:`hello world`
        })
        Vue.components('aaa',A)
        <aaa><aaa>   ->>>>>>> <hello world>
    // 组件里面要放数据
    var A = Vue.extend({
        template:`<h1>{{msg}}</h1>`,
        data:function(){
            return {
                msg:'hello world'
            }
        }
    })
    // 方法同Vue实例

2. 局部组件
    var A = Vue.extend({  
            template:`hello world`
        })
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello'
        },
        components:{
            aaa:A
        }
    })
3. 另一种方式 
    // 全局
    Vue.component('aaa',{
        template:`<strong>hello world</strong>`
    });

    var vm = new Vue({
        el:'#app'
    })
    // 局部
    var vm = new Vue({
        el:'#app',
        components:{
            'aaa':{
                template:`<h2>hello world</h2>`
            }
        }
    })

    模板

    1. script方式
    <script type="v-template或者其他什么" id="aaa">
// 这是模板内容
</script>

template:'#app' //在Vue实例里面这样应用
    1. template标签方式
    <template id="aaa">
// 这里是模板内容
</template>

template:'#aaa'  //在Vue实例里面这样应用

    Vue动态组件

    <div id="app">
    <input type="button" @click="template_name='aaa'" value="aaa组件">
    <input type="button" @click="template_name='bbb'" value="bbb组件">
    <component :is="template_name"></component>
</div>


//js
var vm = new Vue({
        el:'#app',
        data:{
            template_name:'aaa'
        },
        components:{
            'aaa':{
                template:`<h2>hello world!aaa</h2>`
            },
            'bbb':{
                template:`<h2>hello world!bbb</h2>`
            }
        }
    })
    父子组件
    <div id="app">
    <aaa></aaa>
</div>
// js
var vm = new Vue({
        el:'#app',
        data:{
            template_name:'aaa'
        },
        components:{
            'aaa':{
                template:`<h2>hello world!aaa<bbb></bbb></h2>`,  // 所有的元素都必须放在一个根元素里面
                components:{
                    'bbb':{
                        template:`<h3>bbb组件</h3>`
                    }
                }
            }
        }
    })
// 默认情况下，父子组件里面的数据不共享
// 下面是组件间数据传递
    组件间数据传递 - 子组件获取父组件的数据
    <div id="app">
        <aaa></aaa>
    </div>
    <template id="aaa">
        <h1>11111<bbb :m="msg"></bbb></h1>  //这里可以访问到组件属性，把它传给子组件，如果这里传的属性是带 - 的，那在子组件里面接收的时候要换成驼峰法才能被识别出来
    </template>
    //js代码
    var vm = new Vue({
        el:'#app',
        data:{
            template_name:'aaa'
        },
        components:{
            'aaa':{
                data:function(){
                    return {
                        msg:'我是父组件的数据'
                    }
                },
                template:'#aaa',
                components:{
                    'bbb':{
                        props:['m'], // 用这个字段来接收父组件传过来的数据
                        props:{
                            'm':String  //这是第二种接收方法，value是key的数据类型
                            }
                        template:`<h3>我是bbb组件->{{m}}</h3>`
                    }
                }
            }
        }
    })
    组件间数据传递 - 父组件获取子组件的数据
    <div id="app">
    <aaa></aaa>
</div>
<template id="aaa">
    <div>
        <span>我是父级数据</span><button>按钮</button>
        <br>
        <bbb @child_msg="get"></bbb>
    </div>
</template>
<template id="bbb">
    <div>
        <span>子组件</span>
        <button type="button" @click="send">发送</button>
    </div>
</template>
// js代码
var vm = new Vue({
        el:'#app',
        data:{
            template_name:'aaa'
        },
        components:{
            'aaa':{
                data:function(){
                    return {
                        msg:'我是父组件的数据'
                    }
                },
                template:'#aaa',
                methods:{
                  get:function(msg){
                      alert(msg)
                  }
                },
                components:{
                    'bbb':{
                        data:function () {
                          return{
                              a:'我是子组件的数据'
                          }
                        },
                        template:'#bbb',
                        methods:{
                            send:function(){
                                this.$emit('child_msg',this.a)
                            }
                        }
                    }
                }
            }
        }
    })

    slot

    <div id="app">
    <aaa>
        <h1>这是里面原有的内容</h1>
    </aaa>
</div>
<template id="aaa">
    <div>
        <h1>xxxx</h1>
        <slot>这是默认的内容</slot> //组件内以前原有的内容，如果里面有东西，这句话就不会显示出来 ，如果没有东西，则显示这句默认的话
        <p>welcome vue</p>
    </div>
</template>
//js代码
var vm = new Vue({
        el: '#app',
        components: {
            'aaa': {
                template: '#aaa'
            }
        }
    })
秋草正离离
关注
专栏目录
Vue2学习笔记
weixin_43885418的博客
12-06 761
推荐大家安装的 VScode 中的 Vue 插件 Vue 3 Snippets Vue 3 Snippets - Visual Studio Marketplace Vetur Vetur - Visual Studio Marketplace 什么是 vue 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就
Vue2学习笔记(尚硅谷天禹老师)
weixin_44992737的博客
04-24 1578
Vue可以看作是一个数据管理大师，其目的通常是将其管理的数据展示到HTML页面上，或者收集HTML页面上的数据进行储存在自身或者传递给服务器。
Vue2笔记（全）
Jadon_z的个人博客
09-03 2762
Vue2 最全知识汇总
【Vue2学习笔记】基础（持续更新）
最新发布
m0_63634307的博客
08-12 1277
MVVM是 Model-View-ViewModel 的缩写,它是一种软件架构风格Model:模型,数据对象(data当中的数据View:视图代码模板页面(用于渲染数据)ViewModel:视图模型,其实本质上就是Vue 实例
Vue2
E_ISOLATE的博客
07-26 453
button @click="getmsg" getmsg(e){ console.log(e); //获取dom对象使用原生js button data-uid="123" @click="getmsg" console.log(e.target.getattribute("data-uid")); } //事件不带对象 传参带对象 button @cli...
Vue2笔记
qq_60754128的博客
11-04 318
与插值语法的区别：v-html会替换掉节点中的内容，{{ xx }}不会；v-html有安全性问题，在网站上动态渲染HTML是非常危险的，容易导致xss攻击，在可信内容上使用v-html，永远不要用在用户提交的内容上。①、组件的本质是一个名为VueComponent的构造函数不是程序员定义的，是Vue.extend生成的。与插值语法的区别：v-text会替换掉节点中的内容，{{ xx }}不会。②、实现动态组件：考虑好数据存放的位置，数据是一个组件在用，还是一些组件在用。②、子组件 ==> 父组件 通信。
Vue2学习笔记-前端开发
03-03
Vue2学习笔记-前端开发
Vue2学习笔记之请求数据交互vue-resource
01-21
必须引入一个库：vue-resource github地址 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then...
vue2笔记
neversleepy的博客
03-12 2297
这里写自定义目录标题vue基础知识初识：响应式原理插值语法&模板语法插值语法：**{{js表达式}}**模板语法：数据绑定(v-bind、v-model)v-bind 单向数据绑定 只能data-->容器v-model 双向数据绑定 只能用在表单类元素（有value值的输入类元素）上绑定class样式补充数组操作el&data的两种写法MVVM模型数据代理补充：Object.defineProperties(要修改的对象，属性，配置对象)事件处理事件修饰符点击事件键盘事件计算属性计算属
vue 2笔记
qq_42717015的博客
06-23 495
一. mothods 方法的使用 二、components 组件的使用 三、 生命周期函数/生命周期钩子： 组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数 <script> export default{ data(){ return{ msg:'msg' } }, meth.........
Vue2（初识vue）
passerby的博客
08-02 9723
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。vue环境的搭建有很多种：对于我们初次学习，我们使用自行下载js的方式。 注意 面试题： Data为啥要写成函数？ Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。什么是指令
Vue2学习笔记（1）
qq_62476499的博客
07-06 1035
学习Vue笔记
Vue 2.0 学习笔记（一）
weixin_44772326的博客
12-01 9532
前端工程化与Webpack：概括了前端工程化的概念与特点，讲述了webpack的安装配置与使用，并使用插件解决实时打包项目的问题。介绍了webpack加载器。介绍项目如何打包发布。认识Source Map在调试中的作用。
vue2学习笔记尚硅谷
09-15
但是，我可以为您提供一些关于Vue.js 2的学习笔记。以下是一些重要的主题和概念，供您参考： 1. Vue.js介绍： - Vue.js是一个轻量级的JavaScript框架，用于构建用户界面。 - 它采用了MVVM（Model-View-ViewModel...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值