Vue基础笔记

最新推荐文章于 2023-11-29 13:49:24 发布

是阿梁呢

最新推荐文章于 2023-11-29 13:49:24 发布

阅读量1.1k

点赞数

分类专栏：前端学习笔记-vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ldl305866325/article/details/121203821

版权

前端学习笔记-vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.Vue实例

1.通过new关键字实例化Vue（{}）构造函数

2.实例化Vue时的参数内的属性，我们称为选项*:

1.data Vue实例数据对象

案例代码：

<body>
    <div id="app">
        <p>{{name}}</p>
    </div>
   
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: '定义初始数据!'
            }
        });
        console.log(vm.$data.name);
        console.log(vm.name);

    </script>
</body>

2.methods 定义Vue实例中的方法

案例代码：

<body>
    <div id="app">
        <button @click='showInfo'>请单击</button>
        <p>{{msg}}</p>
    </div>
    
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '请单击'
            },
            methods:{
                showInfo:function(){
                    this.msg = '点击之后的内容'
                },
                showInfo2(){
                    this.msg = '点击之后的内容'
                }
            }
        });

    </script>
</body

3.commponents 定义子组件

案例代码：

4.computed 计算属性

案例代码：

<body>
    <div id="app">
        <p>总价格:{{totalPrice}}</p>
        <p>单价：{{price}}</p>
        <p>数量: {{num}}</p>
        <div>
            <button @click="num==0?0:num--">
                减少数量
            </button>
            <button @click="num++">
                增加数量
            </button>
            <button @click="logTotalPrice">
                打印总价格
            </button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'app',
            data: () => ({
                price:20,
                num:0
            }),
            computed:{ //计算属性
                totalPrice(){
                    console.log("totalPrice计算属性执行了");
                    return this.price * this.num;
                }
            },
            methods:{
                logTotalPrice(){
                    console.log('totalPrice的结果'+this.totalPrice);
                }

            }
        });
    </script>


    
</body>

5.filters 过滤器

案例代码：

<body>
    <div id="app">
        <div>{{message | toUppercase}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
               message:'hellowrld'
            },
            filters: {
                toUppercase(value){
                    return value ? value.toUpperCase() : '';
                }
            }
        });
    </script>
</body>

<body>
    <div id="app">
        <div v-bing:id="dataId | formatId">hellowrorld</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
               dataId:'dff1'
            },
            filters: {
                formatId(value){
                    return value ? value.charAt(1)+value.index0F('d'):'';
                }
            }
        });
    </script>
</body>

6.el 唯一根元素

案例代码：

<body>
    <div id="app">
        {{name}}
        <p>{{name}}</p>
    </div>
    
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'Vue实例绑定成功!'
            }
        });
    </script>
</body>

7.watch 监听数据变化

案例代码：

<body>
    <div id="app">
        <input type="text" v-model='cityName'>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                cityName:'shanghai'
            },
            watch: {
                cityName(newValue,oldValue){    //newValue新的值 oldValue旧的值
                    console.log(newValue,oldValue);
                }
            }
        });
    </script>
</body>

3.computed计算属性

1.computed计算属性：计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。

4.watch状态监听：

            1.watch选项表示:监测data选项中的数据变化
            2.应用场景：要在数据变化的同时进行异步操作或者是比较大的开销时使用
            3.注意：watch是监测data的数据变化，watch的方法名必须与data的属性名一致。

5.filters过滤器

   1.filters选项表示：对data选项中的数据进行格式化
   2.应用场景：1）字符串字母大写，字符串大小写转换
2）日期的格式化
   3使用方法：1.插值表达式{{data属性名 | 过滤器名称}}
2.属性绑定使用：V-bing:id=‘data属性名 | 过滤器名称'

二.数据绑定

内置指令

1.v-model 双向数据绑定，通常用在表单元素上，例如input ,textarea,select

案例代码：

<body>
    <div id="app">
        <input type="text" v-model = 'msg'>
        
        </div> 
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                msg: 'v-model指令'
            }
        });
       
    </script>
</body>

2.v-text 插入文本内容, 除了v-model其他数据绑定都是单向的

案例代码：

<body>
    <div id="app">
        <p v-text='msg'></p>
        
        </div> 
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                msg: '我是v-text'
            }
        });
       
    </script>
</body>

3.v-html 插入包含html的内容，是将元素内部html与data属性进行单向数据绑定

案例代码：

<body>
    <div id="app">
       <div v-html="msg"></div>
        
        </div> 
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                msg: '<h2>我是v-html</h2>'
            }
        });
       
    </script>
</body>

4.v-on 监听事件

案例代码：

<body>
    <div id="app">
        <p>{{msg}}</p>
        <button v-on:click='showInfo'>请单击</button>
        <!-- click简写 -->
        <button @click='showInfo'>请单击</button>
        
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                msg: '请单击按钮查看内容',   
            },
            methods:{
                showInfo(){
                    this.msg = '我是v-on指令'
                }
            }
        });
       
    </script>
</body>

5.v-bind 单向数据绑定

案例代码：

<body>
    <div id="app">
       <input type="text" v-bind:value='msg'>
        <a v-bind:href="dataHref">我是一个超链接</a>
        </div> 
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                msg: '我是v-bind',
                dataHref: 'www.baidu.com'
            }
        });
       
    </script>
</body>

6.v-for 1.v-for：用于遍历数组，可实现页面列表渲染
2.语法：v-for="(value,key)in xxx"

案例代码：

<body>
    <div id="app">
         <div v-for="(value,index" in list>
             索引是{{index}} ,元素内容是{{value}} 
         </div>
        
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                list:[1,2,3] 
            },
            
        });
       
    </script>
</body>

        7.v-if和v-show    1.用来控制元素显示或隐藏，属性为布尔值
                                    2.     1）v-if控制元素是否渲染
                                          2）v-show控制元素是否显示，操作display属性

案例代码：

<body>
    <div id="app">
        <!-- 两种使用方法 -->
        <!-- <div v-if="isShow" style="background-color: #ccc;">我是div</div> -->
        <div v-show="isShow" style="background-color: #ccc;">我是div</div>
        <button @click ="isShow =! isShow">我是切换显示和隐藏的按钮</button>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data: {
                isShow: true
            },
            
        });
       
    </script>
</body>

三.Vue事件

一.事件监听

1.事件监听：其实就是给元素绑定事件，调用事件处理函数.

2.语法： 1.v-on：事件名 = '事件函数',
2.v-on: 事件名 = 'js代码'.

3.代码： <button v-on:click="count += Math.random()">随机数</button>

案例代码：

<body>
    <div id="app">
        <button @click='count += Math.random()'>随机数</button>
        <p>自动生成的随机数为{{count}}</p>
    
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                count: 0
            }
        });
    </script>
    
</body>

   4.按键修饰符： 1.监听那个键盘按下/抬起
                       2.v-on:keyup.按键修饰符="xxx"
                         3.按键修饰符其实就是按键名，代表监听哪个按键
                       4.v-on:keyup.enter="submit"

案例代码：

<body>
    <div id="app">
        <input type="text" @keyup.enter='submit'>
    
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                submit() {
                    console.log('表单提交');
                }
            }
        });
    </script>
    
</body>

二.事件修饰符点击事件@ = v-on.

1.常用修饰符
1）.stop 1.阻值事件冒泡
2.代码：<button v-on:click.stop="doThis">阻值事件冒泡</button>

案例代码：

<body>
    <div id="app">
       <div @click='doParent'>
           <button @click='doThis'>事件冒泡</button>
           <button @click.stop='doThis'>阻止事件冒泡</button>
        </div>
    
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                doParent(){
                    console.log('我是父元素的点击事件');
                },
                doThis(){
                    console.log('我是子元素的点击事件');
                }
            }
        });
    </script>
    
</body>

2）.prevent 1.阻值默认事件行为
2.代码 <a href="www.baidu.com" @click.prevent>阻值默认行为</a>

案例代码：

<body>
    <div id="app">
        <a href="www.baidu.com" @click.prevent>阻值默认行为</a>
        <a href="www.baidu.com">不阻值默认行为</a>
    
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                
            },
          
        });
    </script>
    
</body>

3）.capture            1.用于将事件流程改为捕获阶段
                               2.代码 <div @click.capture='doParent'>
                                     <button @click='doThis'>事件捕获</button>
                                   </div>
                               3.注意：capture修饰符需要添加到父元素的事件上，不然不生效.

案例代码：

<body>
    <div id="app">
       <div @click.capture='doParent'>
           <button @click='doThis'>事件捕获</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                doParent(){
                    console.log('我是父元素的单击事件');
                },
                doThis(){
                    console.log('我是子元素的单击事件');
                },
            }
        });
    </script>
    
</body>

4）.self        1.将事件绑定到自身，只有自身才能触发
        2.代码：<div class="Odiv1" @click.self='doParent'>a
<div class="Odiv2" @click='doThis'>b</div>
         </div>
       3.代码说明：这个代码中当触发子div时，即使事件冒泡到父div，父div

也不会触发事件

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.js"></script>
    <style>
        .Odiv1 {
            width: 80px;
            height: 80px;
            background: #aaa;
            margin: 5px;
        }

        .Odiv2{
            width: 50px;
            height: 50px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="Odiv1" @click.self='doParent'>a
            <div class="Odiv2" @click='doThis'>b</div>
        </div>
        <div class="Odiv1" @click='doThis'>c
            <div class="Odiv2" @click='doParent'>d</div>
        </div>
      
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                doParent(){
                    console.log('我是父元素的单击事件');
                },
                doThis(){
                    console.log('我是子元素的单击事件');
                },
            }
            
        });
    </script>
    
</body>
</html>

5）.once 1.事件处理函数只触发一次.
2.代码: <button @click.once='doThis'>只执行一次</button>

案例代码：

<body>
    <div id="app">
           <button @click.once='doThis'>只执行一次</button>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                doThis(){
                    console.log('我是当前元素的单击事件，只执行一次');
                },
            }
        });
    </script>
    
</body>

四.Vue组件

1.什么是组件

简略：可以理解为自定义标签，可以是一个标签组成，也可以是多个标签组成。
1.什么是组件：在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。
2.组件特性：
            1.能够减少重复代码的编写，提高开发效率。
            2.降低代码之间的耦合程度，使项目更易维护和管理。
            3.根据业务逻辑实现复杂的项目功能。

<div id="app">
           <my-component></my-component>
           <my-component></my-component>
           <my-component></my-component>
    </div>
    <script>
        //参数1：组件的名称
        //参数2：组件的配置对象
        Vue.component('my-component',{
            //组件使用的数据
            data(){
                return {
                    count:0
                }
            },
            //组件模板，组件显示的内容
            template:'<button @click="count++"被单击了{{count}}次</button>'
        });
        var vm = new Vue({
            el:'#app',
            
        });
    </script>

2.局部注册组件

1.局部组件，通过components选项来定义

2.组件定义:

 <script> 
        var com1 = {
            template: '<p>我是vm实例中注册的局部组件</p>'
        }
        var vm = new Vue({
            el:'#app',
            components: {
                //key：组件名 ， value：组件的配置对象
                myComponent: com1
                //'my-component': com1
            }
        });
    </script>

3使用组件:
    <div id="app">
           <my-component></my-component>
    </div>
. 定义组件时如果是驼峰,在使用组件时必须换成短横线

4.全局组件与局部组件的区别：

1.全局组件在项目中的任何界面都可以使用

2.局部组件只能在当前界面使用

3.template模板

1.Vue提供了template标签，可以编写组件的结构

2.模板定义：

    <template>
        <p>{{title}}</p>
    </template>

3.组件使用模板：

    <script>
        Vue.component('component',{
            template:'#tem1',
            data(){
                return{
                    title: '我是组件内的title数据'
                }
            }
        })
    </script>

4.优势

1.改善开发体验：之前的组件模板都是直接以字符串形式书写，这种方式很容易出错

2.有代码提示，代码高亮，提高开发效率

4.组件直接的数据传递

在Vue开发中，我们会使用大量的组件,所以会存在组件嵌套的情况，那么父子组件之间会经常需要传递数据
传值方式

1.props传值

1.props：propertys,属性，意为通过属性传值

2. 传值步骤：

1.定义允许传值的属性：
  Vue.component('my-parent',{
      //props:规定组件可以通过哪些属性传递数据
      props:['name'],
      template:'<div>我是父组件的{{name}}</div>'
  });
ps：在定义组件时，通过props来规定哪些属性可以

2.使用属性传值:

  <div id="app">
        <my-parent name='title'></my-parent>
  </div>

3.这种方式是父组件向子组件传值

1.my-parent是父组件

2.template的标签就是子组件

3.父组件在使用的时候，通过name属性，给子组件div传递值

4.案例代码

<body>
    <div id="app">
        <my-parent name='title'></my-parent>
  </div>
    </template>
    <script>
        Vue.component('my-parent',{
            //props:规定组件可以通过哪些属性传递数据
            props:['name'],
            template:'<div>我是父组件的{{name}}</div>'
        });
        
        var vm = new Vue({
            el:'#app',
           
        });
    </script>
    
</body>
</html>

2.$emit传值

1.emit：发射，理解为触发

2.Vue实例中提供了也给$emit方法，专门用于触发自定义事件的执行

3.传值步骤：

1)父组件定义时，给予组件绑定自定义事件

2)子组件定义时，通过$emit触发绑定的自定义事件:

$emit的参数1：触发的自定义事件名称

$emit的参数2：给自定义事件的事件处理函数

4.这种方式是子组件向父组件传值，通过子组件触发事件的方式，来向父组件传值。

5.案例代码：

<body>
    <div id="app">
        <parent></parent>
  </div>
  <template id="child">
      <div>
          <button @click='click'>Send</button>
          <input type="text" v-model='message'>
      </div>
  </template>

  <template id="parent">
        <div>
            <clild @clildfn = 'transContent'></clild>
            <p>子组件传递的值:{{message}}</p>
        </div>
  </template>
    <script>
        Vue.component('parent',{
            template: '#parent',
            data() {
                return {
                    message:''
                }
            },
            methods: {
                transContent(transData){
                    this.message = transData;
                }
            },
        })
        Vue.component('child',{
            template:'#clild',
            data() {
                return {
                    message:'子组件的信息'
                }
            },
            methods: {
                click(){
                    //通过$emit调用自定义的事件,然后传递数据
                    this.$emit('childfn',this.message)
                }
            },
        })
     
        
        var vm = new Vue({
            el:'#app',
           
        });
    </script>
    
</body>
</html>

5.组件切换

1.通过v-if和v-else来控制是否显示组件

2.结构代码:

<!-- 自定义组件 -->    
    <login v-if='flag'></login>
    <register v-else></register>
<!-- 如果flag为true就显示login组件 -->

3.flag：

    var vm = new Vue({
       el:'app',
       data: {
               flag:true
             }
    });
</script>
<!--flag是vue的boolean类型的数据 -->
<!-- boolean=布尔类型 -->

4.案例代码：

  <body>
        <div id="app">
            <a href="#" @click.prevent='flag=true'>登陆</a>
            
            <a href="#" @click.prevent='flag=false'>注册</a>
            <login v-if='flag'></login>
            <register v-else></register>
        </div>
        <script>
            Vue.component('login',{
                template: '<div>我是登陆界面</div>'
            });
            Vue.component('register',{
                template: '<div>我是注册界面</div>'
            });
            var vm = new Vue({
                el:'app',
                data: {
                    flag:true
                }
            });
        </script>
        
    </body>
    </html>

五.Vue生命周期

1.钩子函数

Vue生命周期：

Vue从创建到销毁的整个过程

在Vue生命周期过程中，会执行很多回调函数，这些回调函数叫做钩子函数

钩子	说明
beforeCreate	创建实例对象之前执行
created	创建实例对象之后执行
beforeMount	页面挂载成功之前执行
mounted	页面挂载成功之后执行
beforeUpdate	组件更新之前执行
updated	组件更新之后执行
beforeDestroy	实例销毁之前执行
destroyed	实例销毁之后执行

2.实例创建

beforeCreate：此时数据不能使用

created：此时数据可以使用 //常用

案例代码：

<body>
    <div id="app">
        {{msg}}
  </div>
    </template>
    <script>
        
        var vm = new Vue({
            el:'#app',
           data: {
               msg : '张三'
           },
           beforeCreate() {
            console.log("Vue实例创建之前");
            console.log(this.$data.msg);
           },
           created() {
            console.log("Vue实例创建之后");
            console.log(this.$data.msg);
           }
        });
    </script>
    
</body>
</html>

3.页面挂载

beforeMount：此时无法显示数据

mounted：可以展示数据

案例代码：

<body>
    <div id="app">
        {{msg}}
  </div>
    </template>
    <script>
        
        var vm = new Vue({
            el:'#app',
           data: {
               msg : '张三'
           },
           beforeMount() {
            console.log("挂载之前");
            console.log(this.$el.innerHTML);
           },
           mounted() {
            console.log("挂载之后");
            console.log(this.$el.innerHTML);
           }
        });
    </script>
    
</body>
</html>

4.数据更新

beforeUpdate和updated：Vue实例挂载完成后，当数据发生变化时，会执行beforeUpdate和updated函数

1：beforeUpdate：数据更新之前

2：updated：数据更新之后

案例代码：

<body>
    <div id="app">
        <div v-if='isShow' ref='div'>test </div>
        <button @click='isShow=!isShow'>更新</button>
  </div>
    </template>
    <script>
        
        var vm = new Vue({
            el:'#app',
           data: {
               isShow:true
           },
           beforeUpdate() {
            console.log("更新数据之前执行");
            console.log(this.$refs.div);
           },
           updated() {
            console.log("更新数据之后执行");
            console.log(this.$refs.div);
           }
        });
    </script>
    
</body>
</html>

5.实例销毁

beforeDestroy和destroyed：生命周期函数的最后阶段是实例的销毁，会执行beforeDestroy和destroyed钩子函数。

beforeDestroy：可以操作DOM

destroyed：无法操作DOM

案例代码：

<body>
    <div id="app">
        <div ref='div'>test </div>
  </div>
    </template>
    <script>
        
        var vm = new Vue({
            el:'#app',
           data: {
               msg:'张三'
           },
           beforeDestroy() {
            console.log("销毁之前");
            console.log(this.$refs.div);
            console.log(this.msg);
            console.log(vm);
           },
           destroyed() {
            console.log("销毁之后");
            console.log(this.$refs.div);
            console.log(this.msg);
            console.log(vm);
           }
        });
        //在控制台使用vm.$destroy()
    </script>
    
</body>