基本使用和常用指令

基本使用

<div id="app">
        {{abc}} ---->data数据中的使用
 </div>
<script src="./js/vue.js"></script>
<script>
   var app =  new Vue({
    el:"#app",//挂载要管理的元素
     data:{//定义数据
         abc:"aaa",
     },
   });
</script>

基本指令

v-for

<div v-for=item in products>
//item为变量 products为数组
    </div>
如果需要下标 通过第二个参数接收
<div v-for=(item,i) in products>
//item为变量 poducts为数组 ，i为下标
</div>

v-html

设置元素的innerHTML

<div id="app">{{html}}</div>h1标签也会当字符串显示到内容是
//v-html会把标签的效果显示出来 但是会把标签中的内容覆盖掉
  <div id="app"v-html="html"></div> 
<script>
    //vm称为vue实例
    var vm = new Vue({
        el: "#app",  //css选择器--通过id  class选择标签
        data:{
            html:`<h1>1111<h1>`
        }
    }); 
</script>

v-on

注册事件可简写成@

<div id="app">
        <button v-on:click="btn()【可以直接写js】">进行点击</button> //正常事件写法
        <button @click="btn()">进行点击</button> //注册点击事件==简化版
        //不传参数调用方法的（）可以去掉
    </div>
<script>
    //vm称为vue实例
    var vm = new Vue({//创建vue的构造函数  里面写配置
        el: "#app",  //css选择器--通过id  class选择标签
        data:{
            html:`<h1>1111<h1>`
        },
        methods:{
            btn() {
                console.log("11");
             },
        }
    });

指令修饰符

 阻止默认行为 prevent
    <div id="app">
         <a href="http://www.baidu.com" @click.prevent="btn()">进行点击</a>
    </div>
    阻止事件冒牌 stop
    <div id="app">
         <btutton @click.stop="btn()">进行点击</button>
    </div>
    获取事件参数
    <div id="app">
         //传参数的方式获取事件参数
         <btutton @click="btn($event)">进行点击</button>
         //不传参可以在方法中直接写入e进行获取事件参数
           <btutton @click="btn1">进行点击</button>
    </div>
    js
     methods:{
            btn(e) {
                console.log("11" e);
             },
             btn1(e) {
                console.log("11" e);
             },
        }

v-bind

绑定动态属性可简写成：

<div id="app">
        <img v-bind:src="urlImg"/> //正常写法
        <img :src="urlImg"/>  //简化写法
    </div>
    //vm称为vue实例
    var vm = new Vue({//创建vue的构造函数  里面写配置
        el: "#app",  //css选择器--通过id  class选择标签
        data:{    urlImg:`https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg`
        },
    });

v-show

控制元素可见度true显示 flase隐藏

<div id="app">
        <img v-show="inshow" :src="urlImg"/>
        <button @click="inshow = !inshow【js代码】">切换显示</button>
    </div>
    //vm称为vue实例
    var vm = new Vue({//创建vue的构造函数  里面写配置
        el: "#app",  //css选择器--通过id  class选择标签
        data:{
            inshow:true,        
urlImg:`https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg`
        },
    });

v-if

    <ul>
            <li v-for="(item,i) in products">
                名称：{{item.name}}
                <span v-if="item.stock > 0">库存：{{item.stock}}</span>
                <span v-else>库存：已经没有了</span>
            </li>
        </ul>
    </div>
<script>
    //vm称为vue实例
    var vm = new Vue({//创建vue的构造函数  里面写配置
        el: "#app",  //css选择器--通过id  class选择标签
        data: {//和界面相关的数据
            title: "abc",
            products: [
                { name: "iphone", stock: 10 },
                { name: "华为", stock: 5 },
                { name: "小米", stock: 1 }
            ]
        },

v-model

双向数据绑定该指令是v-on 和 v-bind的合成常用语于表单元素

 <div id="app">
        <h1>{{text}}</h1>
        <input type="text" :value="text"> //当向绑定更改input中的值 text不会改变
        //@input="text=$event.target.value" 可以通过加入事件给单向绑定变成双向绑定
       //双向绑定 改变input中的值 text中的值也会改变
         <input type="text" v-model="text">
    </div>
</body>
<script>
    //vm称为vue实例
    var vm = new Vue({//创建vue的构造函数  里面写配置
        el: "#app",  //css选择器--通过id  class选择标签
        data: {
            text:"abc   "
        },
    });

v-model和radio的使用

<div id="app">
    <input type="radio" value="男" name="sex" v-model="sex">男
    <input type="radio" value="女" name="sex" v-model="sex">女
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            message: 'abc',
            sex: '',//选中会自动给sex赋值
        }
    });
</script>

v-model和checkbox的使用

 <input type="checkbox" name="xieyi" v-model="xieyi">同意协议
  let vue = new Vue({
        el: '#app',
        data: {
            xieyi:false,//单个多选框的使用 选中返回true 默认为false
        }
    });
<input type="checkbox" name="aihao" value="羽毛球" v-model="aihao">羽毛球
<input type="checkbox" name="aihao" value="篮球" v-model="aihao">篮球
<input type="checkbox" name="aihao" value="足球" v-model="aihao">足球
 let vue = new Vue({
        el: '#app',
        data: {
            aihao:[],//多个多选框的使用 选上会把value中的值存入数组中 取消选中会在数组中删除
        }
    });

v-model的值绑定

lazy
<input type="text" v-model.lazy="message"> //双向绑定 不再是实时的了 失去焦点会绑定
number
<input type="number" v-model.number="message">不用number绑定数字的时候还会变成string 绑定number不会在变成string
trim
<input type="text" v-model.trim="message"> 去除字符串左右边的空格

key 的使用

出现的问题当点击切换时由于只有label是发生改变的所以框架之后改变label
导致当input标签里面的内容点击切换之后还是会存在
解决：在input标签中添加一个key属性设置上不一样的值例

 <input type="text" key="1">
 <input type="text" key="2"> 
<div id="app">
        <div v-if="qiehuan==='shouji'">
            <label>手机</label>
            <input type="text">
        </div>
        <div v-els
            <label>邮箱</label>
            <input type="text">
        </div>
     <button @click="qiehuan=qiehuan==='shouji'?youxiang:'shouji'">切换方式</button>
    </div>

  var vm = new Vue({//创建vue的构造函数  里面写配置
        el: "#app",  //css选择器--通过id  class选择标签
        data: {
            qiehuan: "shouji",
        },
    });

利用vue使用循环的时候也要加key 不加会出现删除一个其他元素会跟着更新的情况

 <div id="app">
        <h1>内容{{title}}</h1>
        <ul>
            <li :key="item.id" v-for="(item,i) in products">
                名称：{{item.name}}
            </li>
        </ul>
    </div>  
    //vm称为vue实例
    var vm = new Vue({//创建vue的构造函数  里面写配置
        el: "#app",  //css选择器--通过id  class选择标签
        template:``,
        data: {//和界面相关的数据
            title: "abc",
            products: [
                {id:1,name: "iphone", stock: 10 },
                {id:2, name: "华为", stock: 5 },
                {id:3, name: "小米", stock: 1 }
            ]
        },
     });

计算属性

computed的基本使用

<div id="app">
        <p>姓：{{fistName}}</p>
        <p>名：{{lastName}}</p>
        <p>全名：{{fistName+lastName}}</p>
    </div>
    //vm称为vue实例
    var vm = new Vue({//创建vue的构造函数  里面写配置
        el: "#app",  //css选择器--通过id  class选择标签
        data: {
            fistName:'张',
            lastName:'三',
        },
    });
正常同上 用通过两个属性相加得到的内容可以通过计算属性获取     
 var vm = new Vue({//创建vue的构造函数  里面写配置
        el: "#app",  //css选择器--通过id  class选择标签
        data: {
            fistName:'张',
            lastName:'三',
        },
        computed:{
            addName(){
                return this.fistName+this.lastName;
          }
        },

可以通过添加一个computed属性里面写方法进行操作 使用可以当做属性一样直接赋值{{addName}}
通过方法也可以获取同样的结果 直接调用方法也是可以的
区别：computed 有缓存：
          里面的值没有发生改变 其他操作不会使其重新加载
      通过方法实现 ：
          页面有其他的改变会导致方法重写调用 即使这个方法内容没有改变也会重写调用 
总结：计算属性可以赋值  而方法不行
计算属性会进行缓存，如果方法里面依赖的数据没变则直接使用缓存结果不会重新计算
凡是根据已有数据计算得到新数据的无参函数都应该尽量写成计算属性而不是方法

computed中的getter和setter方法

computed:{
    addName:{
        get(){
            return this.fistName+this.lastName;
        }
        set(val){--->通常不用里面必须有参数获取修改的值== addName="abc" abc会被val接收 
            this.fistName = val;
        }
    }
    上面是计算属性的标志格式  addName(){}是简化版 不能传值 只可通过双向绑定更改
}

过滤器

对输出的结果进行格式

//定义过滤器
filters:{
    showPrice(price){
    return '￥'+price.toFixed(2);/toFixed(2) 保留小数点后几位
}
//使用
<td>{{items.price | showPrice}} </td> //通过| 过滤器中定义的方法 继续使用
//会自动把要显示的内用传入showPrice方法中 进行格式化 然后显示

监听—watch

 watch:{
     name(newValue,oldValue){
      name 为监听的属性--必须和要监听的属性完全一样
      newValue 属性改变的新值
      oldValue 属性的改变之前的值
       }
}
不需要使用会自动检测

回调函数

//当组件创建出来调用
  created(){
     alert("aaa");
  },
   //当组件挂载到DOM上是调用
  mounted(){
    alert("bbb");
  },
  //当组件刷新的时候调用
  updated(){
    alert(ccc);
  }
//当组件销毁的时候调用
destroyed(){
}
//当组件活跃的时候调用 只有该组件被保持了状态使用了keep-alive时才有效
activated(){
}
//当组件不活跃的时候调用 只有该组件被保持了状态使用了keep-alive时才有效
deactivated(){
}

组件化

组件的基本使用

<div id="app">
    <my-con></my-con> <!--使用-->
</div>
<script>
  //创建组件构造器
    const cpnC = Vue.extend({
        template: `<div id="app">
                        <div>1111</div>
                        <div>2222</div>
                    </div>`,
    });
      //注册组件
    Vue.component('my-con', cpnC);
    let vue = new Vue({
        el: '#app',
        data: {
            message: 'abc',
        }
    });
</script>

全局组件和局部组件

全局组件

 const cpnC = Vue.extend({
        template: `<div id="app">
                        <div>1111</div>
                        <div>2222</div>
                    </div>`,
    });
    Vue.component('my-con', cpnC);
    let vue = new Vue({
        el: '#app',
        data: {
            message: 'abc',
        }
    });

局部组件

 const cpnC = Vue.extend({
        template: `<div id="app">
                        <div>1111</div>
                        <div>2222</div>
                    </div>`,
    });
    let vue = new Vue({
        el: '#app',
        data: {
            message: 'abc',
        },
        components:{
            mycpn:cpnC,
        }
    });

父组件和子组件

const cpn1= Vue.extend({
        template: `<div id="app">
                        <div>1111</div>
                    </div>`,
    });
    const cpn2 = Vue.extend({ 
        template: `<div id="app">
                        <div>2222</div>
                        <cpn1></cpn1>
                    </div>`,
        components:{//在二组件里面注册1组件
            cpn1:cpn1,
        }
    });
    let vue = new Vue({
        el: '#app',
        components:{
           cpn2:cpn2,
        }
    });

可以简化

 let vue = new Vue({
        el: '#app',
        components:{
           cpn2{
            template: `<div id="app">
                       <div>2222</div>
                          <cpn1></cpn1>
                    </div>`,
           },
        }
    });

优化

<template id="cpn2">
    <div id="app">
        <div>1111</div>
    </div>
</template>  通过template标签进行引入
<script src="./js/vue.js"></script>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            message: 'abc',
        },
        components: {
            cpn2: {template:'#cpn2',}
        }
    });
</script>

组件对象数据的存放

组件对象自己也有data属性(也可以有methods的属性)
但是这个函数必须是一个函数而且返回值是一个对象保存着数据

<template id="cpn2">
    <div id="app">
        <div>{{title}}</div>
    </div>
</template> 
let vue = new Vue({
   el: '#app',
   data: {
     message: 'abc',
   },
   components: {
     cpn2: { //可以把组件里面用到的数据 通过data写入
        template: '#cpn2',
        data() {
          return {
             title: "aaa",
           }
          }
   },
 },
    });

父组件子组件通信

父组件给子组件传数据—props

<div id="app">
    <cpn2 :cmovies='movies'></cpn2> <!--通过v-bind绑定传的数据 :cmovies为子组件定义的属性-->
</div>
<template id="cpn2">
    <div id="app">
        <div>{{cmovies}}</div> <!--在组件使用的地方通过子组件中定义的属性获取-->
    </div>
</template>
<script src="./js/vue.js"></script>
<script>
let vue = new Vue({
  el: '#app',
  data: {
    message: 'abc',
    movies:['张三','李四','王五'],
     },
   components: {
     cpn2: {
       template: '#cpn2',
       data() {
           return {
             title: "aaa",
           }
          },
       props:['cmovies'],
      },
   },
});

<!--props还可以是对象--可以用了设置限制信息 -->
 props:{
    cmovies:{
      type:String, //设置数据类型 支持String Number Boolean Array Object Date Function
      default:"aaa", //设置默认值 
      //如果是数组,对象类型,Function写法：defaule(){return [];}
      required:true,        //设置是否必须传
        },
  },

子组件通过事件给父组件传数据

<div id="app">
    <cpn2 v-on:itemclick="cpnClick"></cpn2><!--父组件绑定发射过来的事件-->
</div>
<template id="cpn2">
    <div id="app">
        <button v-for="item of categories" @click="itemclick(item)"><!--点击字组件-->
            {{item.name}}
        </button>
    </div>
</template>
<script src="./js/vue.js"></script>
<script>
let vue = new Vue({
 el: '#app',
 data: {
   message: 'abc',
   },
methods:{
  cpnClick(item){<!-由于绑定事件没有传参 这里面的参数就是发射过来事件带来的item内容 通过参数的方式接收->
    console.log(item);
     }
  },
components: {
    cpn2: {
       template: '#cpn2',
       data() {
          return {
             categories: [
              { id: 'a', name: '热门' },
              { id: 'b', name: '手机' },
              { id: 'c', name: '家用' },
             ],
            }
         },
       methods:{
         itemclick(item){
           <!--emit发射-->
            this.$emit('itemclick',item); <!--发射一个事件 itemclick事件名 item内容-->           
           }
        },
      },
   },
});
</script>

父组件访问子组件

和传数据不同这个是直接对子组件中的数据进行操作

this.$children是一个数组类型
this.$children[0]获取第一个子组件
this.$children[0].方法
                                 .属性
这个方法存在的缺点：如果在原有的子组件中加一个新的子组件会改变获取值
this.$refs获取
 <cpn2 ref="aaa"></cpn2>
 methods: {
cpnClick() {
        aaa为子组件 ref设置的值
    this.$refs.aaa获取子组件对象
                                    .方法名  获取方法
 }                                .属性名  获取属性
}

子组件访问父组件

直接对父组件中的数据进行操作

this.$parent  会获取父组件的Vue实例
components: {
   cpn2: {
      template: '#cpn2',
      methods: {
         onClick(){
             console.log(this.$parent);//获取组件的实例 this.$parent.父组件属性
    }
  },
}
this.$root 直接访问根组件

插槽slot使用

#作用：给组件预留一个位置
<div id="app">
    <cpn2>
        <h3>在组件中预留的文件</h3>
    </cpn2>
</div>
<template id="cpn2">
    <div>
        <h2>子组件</h2>
        <slot></slot> 可以在插槽中写入内容来设置默认值
    </div>
</template>

具名插槽

#在多个插槽的情况下选择其中一个插槽设置内容
<cpn2>
  <button slot="center">abc</button>
</cpn2>
<template id="cpn2">
    <div>
        <slot name="left"></slot>
        <slot name="center"></slot>
        <slot name="right"></slot>
    </div>
</template>