VUE基础入门使用教程

第一个Vue程序

.html

<!--view层 ${}  变成了一个模板-->
<div id="app">

    <ul>
        <li><span v-bind:title="m">鼠标悬停几秒查看此处动态绑定的提示信息！</span> </li>
        <li>{{name}}</li>
        <li>{{tit.name}}</li>
    </ul>

    <a v-bind:href="tit.url">b站链接</a>


</div>

.script

    var vm =new Vue({

        el:"#app",  //元素的缩写 el
        data:{      //Model ： 数据
            m:'Hello vue!',
            name:'Hello  框架',
            tit:{
                name:'Vue',
                url:'https://www.bilibili.com'
            }
        }
    });

07_事件处理-@click-@keyup

1.事件处理基本使用

事件的基本使用：
        1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
        2.事件的回调需要配置在methods对象中，最终会在vm上
        3.methods中配置的函数，不需要箭头函数，否则this就不是vm了；
        4.methods中配置的函数，都是被vue所管理的函数，this指向的是vm 或者 组件实例对象；
        5.@click="demo" 和 @click="($event)"效果一致，但后者可以传参
==============================================================================
<div id="root">
      <button v-on:click="fn1()">点我提示信息1（不传参）</button>
      <button v-on:click="fn2($event,66)">点我提示信息2（传参）</button>
</div>
==============================================================================
    methods:{
             fn1(event){
             
             },
         fn2(event,number) {
             console.log(event,number)
             //console.log(event.target.innerText)
             //console.log(this)//此处的this是vm
             alert('同学你好');
         }
     }

2.事件修饰符

Vue中的事件修饰

  1. prevent : 阻止事件的默认行为 event.preventDefault() 常用
  2. stop : 停止事件冒泡 event.stopPropagation() 常用
  3. once : 事件只触发一次（常用）
==============================================================================
<!--阻止默认事件-->
      <a href="http://www.baidu.com" @click.prevent="showInfo">点击我提示信息</a>

      <!--阻止冒泡事件-->
      <div class="demo1" @click="showInfo">
          <button @click.stop="showInfo()">点击我提示信息</button>
      </div>

      <!--事件只触发一次（常用）-->
      <button  @click.once="showInfo">点击我提示信息</button>

==============================================================================
methods:{
    showInfo(e){
        // e.preventDefault();//阻止默认事件
        // e.stopPropagation();//阻止冒泡
        //e.onceProcessed(); //事件只触发一次
        alert('同学你好');
    }

}

3.键盘事件

<!-- 键盘事件
     1. keyup : 键盘弹起
     2. keydown : 按下键盘
 -->

08_计算属性- computed

1.姓名案例—用methods实现

因为methods没有缓存，所以只能反复调用,不建议使用这种方式

2.姓名案例—用计算属性去实现

一、计算属性:

       1.定义:要用的属性不存在，要通过已有属性计算得来。

       2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter.

       3. get函数什么时候执行?

               (1).初次读取时会执行一次。

               (2).当依赖的数据发生改变时会被再次调用。

       4.优势:与methods实现相比， 内部有缓存机制(复用)，效爷更高，调试方便。

       5.备注:

               (1).计算属性最终会出现在vm上，直接读取使用即可。

               (2).如果计算属性要被修改，那必须写set函数去响应修改，且set中 要引起计算时依赖的数据发生改变

<!--准备好一个容器-->
  <div id="root">

      姓:<input type="text" v-model="firstName"><br/>
      名:<input type="text" v-model="lastName"><br/>
      测试:<input type="text" v-model="x"><br/>
      全名:<span>{{fullName}}</span><br/> <!--这里get只调用了1次，因为computed有缓存，所以直接就给其他调用的赋值了-->
      全名:<span>{{fullName}}</span><br/>
      全名:<span>{{fullName}}</span><br/>
      全名:<span>{{fullName}}</span>

  </div>

const vm = new Vue({
   el:'#root',
   data:{
       firstName:'唐',
       lastName:'九',
       x:'你好'
   },
   computed:{//计算属性
        fullName:{
            //1.get有什么用？当有人在读取fullName时，get就会被调用，且返回值就作为，fullName的值
            //2.get什么是被调用？1.有人初次使用fullName的时候。2.fullName依赖数据发生改变的时候。
            get(){
                console.log('get被调用')
                //console.log(this);//此处的this是vm
                return this.firstName+'-'+this.lastName
            },
            //set什么是被调用？ 当fullName被修改时
            set(value){
                console.log('set',value)
                let split = value.split('-');
                this.firstName=split[0];
                this.lastName=split[1]
            }
        }

3.data，methods，computed

二、data，methods，computed

data里面的属性，你写什么value,就是什么属性放在vm上

methods里面的方法，你写什么方法，就是什么方法放在vm上

computed里面，写的计算属性，他不是你写什么，vm上就放什么，
而是vm自动去找get的计算结果（返回值），放在vm身上了，
vm里面，放的计算结果的名字叫xxx

09_监视属性-watch

1.天气案例-监视属性

<!--准备好一个容器-->
  <div id="root">

      <h2 >今天天气很{{info}}</h2>
      <button @click="btn">切换天气</button>

  </div>

 const vm = new Vue ({
    el:'#root',
     //添加属性,数据
    data:{
     isHot:true,
    },
     //计算属性
    computed:{
        info(){
            return this.isHot?'炎热':'凉爽';
        }
    },
    //方法，函数
     methods:{
        btn(){
             this.isHot= !this.isHot;

         }
     },
     //监视属性
     watch:{
        info:{
            //handler 什么时候被调用？isHot发生改变的时候
            handler(newValue,oldValue){
                console.log("isHot 被修改了",newValue,oldValue)
            },
            //立即执行，函数
            immediate:true, //初始化时，让handler，调用一下
        }
     }
})

2.天气案例-深度监视

深度监视：

（1）vue中的watch默认不检测对象内部值的改变（一层）。
（2）配置deep.true 可以监测对象内部值改变（多层）。
备注：
（1）vue自身可以监视对象内部值的改变，但是vue提供的watch默认不可以
（2）使用时watch根据数据的具体结构，决定是否采用深度监视。
==============================================================================
<!--准备好一个容器-->
  <div id="root">
      <h2 >a的值是:{{numbers.a}}</h2>
      <button @click="numbers.a++">点我a+1</button>
  </div>
==============================================================================
 const vm = new Vue ({
        el:'#root',
         //添加属性,数据
        data:{
         numbers:{
             a:1,
             b:1,
         }
        },
         //监视属性：一般默认，不提供多级化机构的监控
         watch:{
            info:{
                //handler 什么时候被调用？isHot发生改变的时候
                handler(newValue,oldValue){
                    console.log("isHot 被修改了",newValue,oldValue)
                },
                //立即执行，函数
                immediate:true, //初始化时，让handler，调用一下
            },
             numbers:{
                 //深度监视，监视多级化结构中所有属性变化
                 deep:true,
                 handler() {
                     console.log("number改变了")
                 }
             }
         }
    })

10_绑定样式-:class

绑定样式

<!--准备好一个容器-->
<div id="root" >
    <!--绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="btn">{{name}}</div><br>

    <!--绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
    <div class="basic" :class="classArr">{{name}}</div><br>

    <!--绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定用不用 -->
    <div class="basic" :class="classObj">{{name}}
        
</div>
 ==============================================================================
    new Vue({
        el:'#root',
        data:{
            name:'肉肉',
        //字符串
            mood:'normal',
        //数组
            classArr:['atguigu1','atguigu2','atguigu3'],
        //对象
            classObj:{
                atguigu1:false,
                atguigu2:false,
            }
        }
 ==============================================================================    
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        .happy{
            background-color: #0093E9;
            background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
        }
        .sad{
            background-color: #D9AFD9;
            background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
        }
        .normal{
            background-color: #85FFBD;
            background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
        }
        .atguigu1{
           
        }
        .atguigu2{
            border-radius: 15px 50px 30px 5px
        }
        .atguigu3{
            background-color: cornflowerblue;
        }
    </style>

11_条件渲染-v-show : v-if

条件渲染

1.使用v-show，做条件渲染

   <h2 v-show="false">欢迎来到{{name}}</h2>
   <h2 v-show="1===1">欢迎来到{{name}}</h2>

  2.使用v-if做条件渲染
   <h2 v-if="1===1">欢迎来到{{name}}</h2>
   <h2 v-if="false">欢迎来到{{name}}</h2>


        v-show不安全，在网页源码，可以看见，v-if看不见，所以安全！
        但是频繁切换，最好使用show
        
        频率低的用v-if
==============================================================================     
        <!--准备好一个容器-->
  <div id="root">
      <h2 >当前n值是{{n}}</h2>
      <button @click="n++">点击+n</button>

      <!--
      <div v-show="n===1">Angular</div>
      <div v-show="n===2">React</div>
      <div v-show="n===3">Vue</div>
      -->
      
      <!--  v-else和v-else-if-->
      <div v-if="n===1">Angular</div>
      <div v-else-if="n===2">React</div>
      <div v-else-if="n===3">Vue</div>
      <div v-else>哈哈哈</div>

  </div>

来源：3309064415